Develop Reference

Fancybox 3 change link title to data-caption

I would like to ask you if there is any javascript method to grab link title and use it or change it to data-caption in fancybox 3? The only condition is if the link title exists.
This is what I have now:
<a data-fancybox="gallery" title="some-title" href="big_1.jpg">
<img src="small_1.jpg">
</a>
and I would like to somehow change it to this:
<a data-fancybox="gallery" data-caption="some-title" href="big_1.jpg">
<img src="small_1.jpg">
</a>
Thanks for all help.

use some JS code to do
jQuery(function(){
$('a[data-fancybox="gallery"]').each(function(){
if($(this).attr('title') != '' ){
$(this).attr('data-caption', $(this).attr('title'));
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a data-fancybox="gallery" title="some-title" href="big_1.jpg">
<img src="small_1.jpg">
</a>
<a data-fancybox="gallery" title="title" href="big_1.jpg">
<img src="small_1.jpg">
</a>
<a data-fancybox="gallery" href="big_1.jpg">
<img src="small_1.jpg">
</a>

jQuery Packery plugin not setting height properly

I'm using the Packery plugin to give my image gallery a more interesting layout on a website I'm building.
Every now and then, I visit the page and some of the images are overlapping each other like so:
But then when I refresh the page, it displays it properly:
I tried specifying a height on the container element but to no avail.
Here is the code I'm using:
CSS:
.packery-grid {
min-height: 500px;
}
.packery-grid-03 {
width: 20%;
}
.packery-grid-06 {
width: 40%;
}
.packery-grid figure {
padding: 15px;
}
jQuery:
$(document).ready(function() {
// visuals
$('.packery-grid').packery({
// options
itemSelector: '.packery-grid-item',
gutter: 0
});
});
HTML:
<div class="row">
<div class="packery-grid">
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/255-198x127.jpg" alt="Six" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/319-198x127.jpg" alt="Five" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/IMG_8204-198x127.jpg" alt="Four" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-06">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/157-426x284.jpg" alt="Three" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-06">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/IMG_4445-426x284.jpg" alt="Two" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/Iceland-198x127.jpg" alt="One" />
</a>
</figure>
</div>
</div>
</div>
</div>
</div>

I think I've found the solution on their support page
Unloaded images can throw off Packery layouts and cause item elements
to overlap. imagesLoaded resolves this issue.
And so I've modified my code like so:
// visuals
var $grid = $('.packery-grid').packery({
// options
itemSelector: '.packery-grid-item',
gutter: 0
});
// layout Packery after each image loads
// to prevent overlapping images
$grid.imagesLoaded().progress( function() {
$grid.packery();
});

Scroll Down Arrow Javascript

I'm working on a canvas drawing app and I want to have a scroll down arrow show up in a div with a group of images to show the user that they have to scroll down to see the rest of the images, but also I want the user to be able to actually scroll down when touching the arrow. Could someone help me with the script to go about this ? thank you very much.
//////////////HTML/////////////////////////
<div id="branddraw">
<div class="drawings col-md-2">
<div class="pre-scrollable">
<div class="thumb">
<a class="thumbnail" href="#" id="img1">
<img class="img-responsive" src="./assets/colour_imgs/Kcoloring/img1.png" alt="">
</a>
</div>
<div class="thumb">
<a class="thumbnail" href="#" id="img2">
<img class="img-responsive" src="./assets/colour_imgs/Kcoloring/img2.png" alt="">
</a>
</div>
<div class="thumb">
<a class="thumbnail" href="#" id="img3">
<img class="img-responsive" src="./assets/colour_imgs/Kcoloring/img3.png" alt="">
</a>
</div>
<div class="thumb">
<a class="thumbnail" href="#" id="img4">
<img class="img-responsive" src="./assets/colour_imgs/Kcoloring/img4.png" alt="">
</a>
</div>
<div class="thumb">
<a class="thumbnail" href="#" id="img5">
<img class="img-responsive" src="./assets/colour_imgs/Kcoloring/img5.png" alt="">
</a>
</div>
<div class="thumb">
<a class="thumbnail" href="#" id="img6">
<img class="img-responsive" src="./assets/colour_imgs/Kcoloring/img6.png" alt="">
</a>
</div>
</div>
</div>
</div>

Add dynamic divs around 6 image urls using jquery

I need help to render 6 images retrieved from mysql database in mvc razor view. Images 1 and 6 are put in their separate divs called "item". Images 2,3,4 and 5 are all put in one div called "item -item-small" Below is the original rendering:
<div class="owl-photos">
<a href="post.html" class="item-photo">
<img src="images/photos/image-1.jpg" alt="" />image1
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-2.jpg" alt="" />image2
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-3.jpg" alt="" />image3
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-4.jpg" alt="" />image4
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-5.jpg" alt="" />image5
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-6.jpg" alt="" />image6
</a>
</div>
Below is what I want to achieve:
<div class ="owl-photos">
<div class="item">
<a href="post.html" class="item-photo">
<img src="images/photos/image-1.jpg" alt="" />image1
</a>
</div>
<div class="item item-small">
<a href="post.html" class="item-photo">
<img src="images/photos/image-2.jpg" alt="" />image2
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-3.jpg" alt="" />image3
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-4.jpg" alt="" />image4
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-5.jpg" alt="" />image5
</a>
</div>
<div class="item">
<a href="post.html" class="item-photo">
<img src="images/photos/image-6.jpg" alt="" />image6
</a>
</div>
</div>
Any help in using JQuery will be appreciated I do not know how to start this. I can add classes to first element but this is a big challenge
Attempted with the code below:
$(".owl-photos>div:nth-child(1n)").before("<div class="item">");
$(".owl-photos>div:nth-child(1n)").after("</div><div class="item item-small">");
$(".owl-photos>div:nth-child(1n)").after("<div class="item item-small">");
$(".owl-photos>div:nth-child(5n)").after("</div><div class="item ">");
$(".owl-photos>div:nth-child(6n)").after("</div>");

$(function () {
var $result = $('<div class="owl-photos"></div>');
var length = $('.owl-photos a').length;
$('.owl-photos a').each(function (key, item) {
if (key == 0 || key == length - 1) {
var $div = $('<div class="item"></div>').append(item);
$result.append($div);
} else {
var $small = $result.find('.item-small');
console.log($small);
if (!$small.length) {
var $div = $('<div class="item item-small"></div>').append(item);
$result.append($div);
} else {
$small.append(item);
}
}
});
$('.owl-photos').html($result.html());
});
https://jsfiddle.net/atw4gwrr/

You can create elements with JavaScript, append the specific elements to them, then place the new elements into .owl-photos. By appending the <a> elements to the newly made <div>s they are moved from their previous place, that's why you don't see them duplicate.
Below, I get the list of childs, then group them as such:
The .first() child is placed in a <div class="item">, then appended
The :not(:first-child) and :not(:last-child) elements are placed in <div class="item item-small">, then appended
The .last() child is placed in a <div class="item">, then appended
$(function(){
var $photos = $('.owl-photos'),
$childs = $photos.children(),
$itemWrapper = $(document.createElement('div')).attr('class','item'),
$itemSmallWrapper = $(document.createElement('div')).attr('class','item item-small');
$photos.append(
$itemWrapper.clone().append($childs.first()),
$itemSmallWrapper.clone().append($childs.filter(':not(:first-child), :not(:last-child)')),
$itemWrapper.clone().append($childs.last())
);
})
.item { border: 3px solid green }
.item.item-small { border: 3px solid blue }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="owl-photos">
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=1" alt="" />image1
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=2" alt="" />image2
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=3" alt="" />image3
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=4" alt="" />image4
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=5" alt="" />image5
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=6" alt="" />image6
</a>
</div>

How can I create a button that selects next image, get its src and replace it on lightbox?

I am trying to make a prev and a next button that changes de "src" attribute of the "lightbox" img. Basically when you click on a thumbnail, jquery script gets its src and places on the lightbox, now i need to make a button that let me get the src of the next and prev img ( or thumbnail ?)..
$(document).ready(function(){
$(".thumbnail").click(function(){
var address= $(this).attr("src");
$("#popup").fadeIn("slow");
$("#lightbox").attr("src",address);
$(".footer").fadeToggle("fast");
});
$("#close").click(function(){
$("#popup").fadeOut("slow",function(){
$(".footer").fadeToggle("fast");
});
});
$("#next").click(function(){
$("#lightbox").removeAttr("src");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="popupslide">
<div id="popup">
<div id="center">
<img id="lightbox" src="" >
<img id="close" src="fotos/fotoscidade/close.png">
<img id="next" src="fotos/fotoscidade/close.png">
<img id="prev" src="fotos/fotoscidade/close.png">
</div>
</div>
</div>
<div>
<ul class="sidebside">
<li>
<img src="fotos/fotoscidade/MorroDC/asa.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/Balne%C3%A1rio%20Morro%20dos%20Conventos.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/asa.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/Balne%C3%A1rio%20Morro%20dos%20Conventos.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/asa.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/Balne%C3%A1rio%20Morro%20dos%20Conventos.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/asa.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/Balne%C3%A1rio%20Morro%20dos%20Conventos.jpg" class="thumbnail" width="200">
</li>
</ul>
</div>

Give your imgs attribute called img_no with values like 0,1,2,3,4 etc. Use that value, parseInt it and get src based on it.
Refer this link to understand what I mean. Infinite carousel doesnt work