Response title
This is preview!
Gallery with lightbox
in Using jQuery
•
7 years ago
Hi, I created easy gallery with lightbox. Jquery code:
$(function () {
var currentIndex = 0,
lightboxLis = $('.light-box li');
var overlay = $('<div/>', {id: 'overlay'});
overlay.appendTo('body').hide();
$('.thumbnail li').click(function () {
overlay.show();
currentIndex = $(this).index();
lightboxLis.eq(currentIndex).show();
//put next prev show here otherwise
it won't work due to your hover
//when you hover the next prev button
in your old version you no longer hover the li so can't click on
the button
$('.next, .prev, .close').show();
//add the hide of next prev to when
you close the lightbox
});
$('.next').click(function() {
currentIndex++;
if (currentIndex ==
lightboxLis.length) {
currentIndex = 0;
}
lightboxLis.hide();
lightboxLis.eq(currentIndex).show();
});
$('.prev').click(function() {
currentIndex--;
if (currentIndex < 0) {
currentIndex =
lightboxLis.length - 1;
}
lightboxLis.hide();
lightboxLis.eq(currentIndex).show();
});
$('.close, #overlay').on("click", function() {
$('.close').hide();
overlay.hide();
$('.next, .prev').hide();
lightboxLis.eq(currentIndex).toggle();
});
Than I tried to create clicable gallery. Jquery code:
$(function(){
// najdeme všetky galérie
var galleries = $('.gallery-set');
//skryjeme galérie
galleries.hide();
var selected = $('.controls').find('.selected');
//funckia na zobrazenie selektnutej galerie
function showGallery (selected) {
if(selected.length) {
var id = selected.find('a').attr('href');
selectedGallery = $(id);
}
var newGallery = selectedGallery.length ?
selectedGallery : galleries.eq(0).show();
galleries.not( newGallery ).hide();
newGallery.fadeIn();
}
showGallery( selected );
$('.controls a').on('click', function() {
var li = $(this).parent();
li.addClass('selected').
siblings().removeClass('selected');
showGallery( li );
event.preventDefault();
});
});
Gallery is ok, but lightbox is broken. Demo
page http://monika.konekto.net/gallery.html When i go to
gallery sanita and click on thumbnail image, first image of lightbox
gallery show.
Thanks for help
1