54 lines
1.3 KiB
JavaScript
54 lines
1.3 KiB
JavaScript
|
(function () {
|
||
|
|
var galleries = document.getElementsByClassName('gallery');
|
||
|
|
|
||
|
|
var process_gallery = function (g) {
|
||
|
|
var images = g.querySelectorAll('.images img');
|
||
|
|
var navs = []; // computed below
|
||
|
|
var gallery_nav = g.querySelector('nav');
|
||
|
|
var selected_index = 0;
|
||
|
|
|
||
|
|
var select_image = function (index) {
|
||
|
|
// var image = images[index];
|
||
|
|
if (selected_index !== index) {
|
||
|
|
images[selected_index].style.display = 'none';
|
||
|
|
navs[selected_index].classList.remove('selected');
|
||
|
|
images[index].style.display = 'block';
|
||
|
|
navs[index].classList.add('selected');
|
||
|
|
selected_index = index;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var next_image = function () {
|
||
|
|
if (selected_index >= images.length-1) {
|
||
|
|
select_image(0);
|
||
|
|
} else {
|
||
|
|
select_image(selected_index+1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var nav_to_image = function () {
|
||
|
|
select_image(Array.from(navs).indexOf(this));
|
||
|
|
}
|
||
|
|
|
||
|
|
var navHtml = '';
|
||
|
|
|
||
|
|
for (var i=0; i<images.length; ++i) {
|
||
|
|
var image = images[i]
|
||
|
|
image.addEventListener('click', next_image)
|
||
|
|
navHtml += '<i class="' + (i===0? 'selected' : '') + '" data-target="' + image.id + '"></i>'
|
||
|
|
}
|
||
|
|
|
||
|
|
gallery_nav.innerHTML = navHtml;
|
||
|
|
|
||
|
|
navs = gallery_nav.querySelectorAll('i');
|
||
|
|
for (var i=0; i<navs.length; ++i) {
|
||
|
|
var nav = navs[i];
|
||
|
|
nav.addEventListener('click', nav_to_image)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
for (var i=0; i<galleries.length; ++i) {
|
||
|
|
var g = galleries[i];
|
||
|
|
process_gallery(g);
|
||
|
|
}
|
||
|
|
})();
|