检测灯箱点击的更好方法

时间:2017-10-24 16:14:58

标签: javascript html css

我试图让我的灯箱在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;
                }
            }
        }

0 个答案:

没有答案