Fotocarroussel
Dit is een fotocarroussel.
<script>
function showGallery(startIndex) {
//Load previous, current and next images
var imageElement = null;
//Previous image
if (startIndex === 0) {
//Select last
imageElement = $('#fullscreengallery .item:last-child img');
} else {
//Select previous
imageElement = $('#fullscreengallery .item:nth-child(' + (startIndex) + ') img');
}
imageElement.attr('src', imageElement.attr('data-lazy-load-src'));
//Current image
imageElement = $('#fullscreengallery .item:nth-child(' + (startIndex + 1) + ') img');
imageElement.attr('src', imageElement.attr('data-lazy-load-src'));
//Next image
if (startIndex + 1 == $('#fullscreengallery .item').length) {
//Select first
imageElement = $('#fullscreengallery .item:first-child img');
} else {
//Select next
imageElement = $('#fullscreengallery .item:nth-child(' + (startIndex + 2) + ') img');
}
imageElement.attr('src', imageElement.attr('data-lazy-load-src'));
//Init carousel
$('#fullscreengallery').carousel(startIndex);
//Show carousel
$('#fullscreengallery').removeClass('hidden');
$('#fullscreengallery .carousel-inner .item').each(function() {
$(this).css('line-height', $(this).height() + 'px');
});
};
function hideGallery() {
$('#fullscreengallery').addClass('hidden');
};
$(document).ready(function() {
$('#fullscreengallery').carousel('pause');
});
$('#fullscreengallery').on('slide.bs.carousel', function(event) {
var nextImage = null;
if (event.direction === 'left') {
nextImage = $(event.relatedTarget).next('.item').find('img');
//If no next, select first
if (nextImage.length === 0) {
nextImage = $('#fullscreengallery .item:first-child img');
}
} else {
nextImage = $(event.relatedTarget).prev('.item').find('img');
//If no next, select last
if (nextImage.length === 0) {
nextImage = $('#fullscreengallery .item:last-child img');
}
}
//Set the url of selected element
if (!nextImage.attr('src')) {
nextImage.attr('src', nextImage.attr('data-lazy-load-src'));
}
});
$(document).keyup(function(e) {
//Esc
if (e.keyCode === 27) {
if (!$('#fullscreengallery').hasClass('hidden')) {
hideGallery();
}
}
//Left
else if (e.keyCode === 37) {
$('#fullscreengallery').carousel('prev');
}
//Right
else if (e.keyCode === 39) {
$('#fullscreengallery').carousel('next');
}
});
</script>
