$(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();
});
});