finalize gallery feature
This commit is contained in:
@ -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');
|
||||
|
Reference in New Issue
Block a user