finalize gallery feature

This commit is contained in:
rzen
2020-09-09 23:09:57 -04:00
parent 40c9dab873
commit ddb9929419
3 changed files with 103 additions and 17 deletions

View File

@ -3,9 +3,11 @@
var process_gallery = function (g) {
var
// milliseconds to wait before switch to next slide
NEXT_SLIDE_TIMEOUT = 5000;
NEXT_SLIDE_TIMEOUT = 3000;
var
images_container = g.querySelector('.images'),
// images in this gallery
images = g.querySelectorAll('.images img'),
@ -26,17 +28,71 @@
// handle to setInterval
play_interval;
/*
+--------+--------+--------+
| image1 | image2 | image3 |
| |selected| |
+--------+--------+--------+
*/
var adjust_height = function (index) {
images_container.style.height = images[index].offsetHeight + 'px';
}
// show image at index
// update nav controls accordingly
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';
if (selected_index === index) return;
var slide = function () {
images[selected_index].removeEventListener('transitionend', slide);
images[selected_index].classList.remove('transition');
images[index].classList.remove('transition');
navs[index].classList.add('selected');
navs[selected_index].classList.remove('selected');
selected_index = index;
}
images[selected_index].addEventListener('transitionend', slide);
if (index < selected_index) {
setTimeout(function () {
images[index].classList.remove('right');
images[index].classList.add('left');
adjust_height(index);
setTimeout(function () {
images[index].classList.add('transition');
images[selected_index].classList.add('transition');
images[index].classList.remove('left');
images[index].classList.add('center');
images[selected_index].classList.add('right');
images[selected_index].classList.remove('center');
},1)
},1)
} else {
setTimeout(function () {
images[index].classList.remove('left');
images[index].classList.add('right');
adjust_height(index);
setTimeout(function () {
images[index].classList.add('transition');
images[selected_index].classList.add('transition');
images[index].classList.remove('right');
images[index].classList.add('center');
images[selected_index].classList.add('left');
images[selected_index].classList.remove('center');
},1);
},1);
}
}
// show next image
@ -63,26 +119,37 @@
}
}
// build nav bullets
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;
// attach nav bullet listeners
navs = gallery_nav.querySelectorAll('i');
for (var i=0; i<navs.length; ++i) {
var nav = navs[i];
nav.addEventListener('click', nav_to_image)
}
// play button
play_checkbox = g.querySelector('.play input[type=checkbox]');
play_checkbox.addEventListener('change', toggle_play);
// resize image container when initial image loads
if (images[selected_index].complete) {
adjust_height(selected_index);
} else {
images[selected_index].addEventListener('load', function () {
adjust_height(selected_index);
});
images[selected_index].addEventListener('error', function() {
console.warn('error loading image', arguments, images[selected_index].src, images[selected_index])
});
}
}
var galleries = document.getElementsByClassName('gallery');