add galleries
This commit is contained in:
BIN
assets/.DS_Store
vendored
BIN
assets/.DS_Store
vendored
Binary file not shown.
BIN
assets/blog/example/gallery/1/lanius_isabellinus1.jpg
Normal file
BIN
assets/blog/example/gallery/1/lanius_isabellinus1.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 818 KiB |
BIN
assets/blog/example/gallery2/Quarter_Horse_Buckskin.jpg
Normal file
BIN
assets/blog/example/gallery2/Quarter_Horse_Buckskin.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.9 MiB |
Binary file not shown.
After Width: | Height: | Size: 3.0 MiB |
Binary file not shown.
After Width: | Height: | Size: 2.5 MiB |
54
assets/js/gallery.js
Normal file
54
assets/js/gallery.js
Normal file
@ -0,0 +1,54 @@
|
||||
(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);
|
||||
}
|
||||
})();
|
Reference in New Issue
Block a user