我试图让我的灯箱在javascript中工作。
到目前为止,一切似乎都有效,但它真的很混乱,看起来真是错误的我如何循环获取缩略图
只是想知道最好的方法是什么?
<a href="#50279.jpg" class="thumbnail"><img src="thumbs/50279.jpg"></a>
<a href="#_" class="lightbox" id="50279.jpg"><img src="gallery/50279.jpg"></a>
<a href="#D467_D3G6269R.jpg" class="thumbnail"><img src="thumbs/D467_D3G6269R.jpg"></a>
<a href="#_" class="lightbox" id="D467_D3G6269R.jpg"><img src="gallery/D467_D3G6269R.jpg"></a>
var gallery = document.getElementById("Gallery");
var thumbnails = gallery.getElementsByClassName("thumbnail");
var lightboxes = gallery.getElementsByClassName("lightbox");
var items = gallery.querySelectorAll('a[href^="#"]');
function showLightBox(target, bool) {
if (target) {
if (bool) {
target.style.display = "block";
} else {
target.style.display = "none";
}
}
}
function onClickLightBox(event) {
event.preventDefault();
if (event.target.className == "lightbox") {
showLightBox(event.target, false);
}
}
function onClickThumbnails(event) {
event.preventDefault();
showLightBox(items[event.currentTarget.myParam + 1], true);
}
for (var i = 0; i < lightboxes.length; i++) {
lightboxes[i].addEventListener('click', onClickLightBox);
}
for (var i = 0; i <= items.length; i++) {
if (i % 2 == 0) {
if (items[i]) {
items[i].addEventListener('click', onClickThumbnails);
items[i].myParam = i;
}
}
}