对同一页面上的多个链接使用 Javascript 灯箱效果

Question

我正在尝试编写一个简单的灯箱效果，我可以将其用于同一页面上的多个图像。（单击 link，图片显示在网站背景中不透明。）我发现了一个不错的小 Javascript，但它仅适用于页面上的单个图像。我知道我的 HTML 和 CSS，但我正在努力寻找一个干净、简单的解决方案来解决 应该是 的简单函数。（不幸的是，我不是 Javascript 编码员，但我通常可以修改我发现的脚本以满足我的需要...这超出了我的范围！）

这是我的 Javascript:

window.document.onkeydown = function (e)
{
    if (!e){
        e = event;
    }
    if (e.keyCode == 27){
        lightbox_close();
    }
}
function lightbox_open(){
    window.scrollTo(0,0);
    document.querySelector('.light').style.display='block';
    document.querySelector('.fade').style.display='block';  
}
function lightbox_close(){
    document.querySelector('.light').style.display='none';
    document.querySelector('.fade').style.display='none';
}

经过一些研究，我将原来的 getElementById 更改为 querySelector，因为我需要将其应用于多个图像。但我想我需要切换回 ID，并可能使用编号 ID 来区分我的图像。但是我不确定如何将一个函数用于多个实例。

我的CSS是：

.fade {
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
.light {
    display: none;
    position: absolute;
    top: 20%;
    left: 50%;
    width: auto;
    height: auto;
    margin-left: -150px;
    margin-top: -100px;                 
    border: 2px solid #FFF;
    background: #FFF;
    z-index:1002;
    overflow:visible;
}

我还没有完善CSS，但我现在并不担心。我只需要先让 Javascript 工作。

而我的 HTML 是这样的：

<a href="#" onclick="lightbox_open();">Photo 1</a>
<div class="light">
<a href="#" onclick="lightbox_close();"><img src="portfolio/print/hwtc/bcard-MUC.jpg" alt="" /></a>
</div>
<div class="fade" onClick="lightbox_close();"></div>

<br />

<a href="#" onclick="lightbox_open();">Photo 2</a>
<div class="light">
<a href="#" onclick="lightbox_close();"><img src="portfolio/print/hwtc/bcard-CUN.jpg" alt="" /></a>
</div>
<div class="fade" onClick="lightbox_close();"></div>

就像我说的，这不是我的Javascript；我只是在试图根据我的需要修改它。必须有一种简单的方法来实现这一点，但我对 Javascript 编码的了解不够，无法自己完成。我可能需要一个数组或其他东西？？有人可以帮助一个女孩吗？ =) 谢谢！

Answer 1

如果你没有其他目的用图片处理带编号的ID，你不需要切换回来，稍微修改一下，希望对你有帮助 , 演示: http://codepen.io/Carr1005/pen/PzBgom

window.document.onkeydown = function (e)
{
    if (!e){
        e = event;
    }
    if (e.keyCode == 27){
        lightbox_close();
    }
}

function lightbox_open(index){
    window.scrollTo(0,0);
    document.querySelectorAll('.light')[index].style.display='block';
    document.querySelectorAll('.fade')[index].style.display='block';  
}

function lightbox_close(index){
    document.querySelectorAll('.light')[index].style.display='none';
    document.querySelectorAll('.fade')[index].style.display='none';
}

和html部分

<a href="#" onclick="lightbox_open(0);">Photo 1</a>
<div class="light">
<a href="#" onclick="lightbox_close(0);"><img src="portfolio/print/hwtc/bcard-MUC.jpg" alt="" /></a>
</div>
<div class="fade" onClick="lightbox_close(0);"></div>

<br />

<a href="#" onclick="lightbox_open(1);">Photo 2</a>
<div class="light">
<a href="#" onclick="lightbox_close(1);"><img src="portfolio/print/hwtc/bcard-CUN.jpg" alt="" /></a>
</div>
<div class="fade" onClick="lightbox_close(1);"></div>

============================================= ===============

有一种说法是使用 onClick() 是一种不好的做法，here is why

我认为在某些情况下使用 onclick() 并没有那么糟糕，但是如果你想朝这个方向走，这是另一个例子，也许这是一个研究更多的机会 javascript http://codepen.io/Carr1005/pen/wWxVYE?editors=1111

对同一页面上的多个链接使用 Javascript 灯箱效果

Using a Javascript lightbox effect for multiple links on same page

javascript

arrays

lightbox