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

Question

我正在尝试编写一个简单的灯箱效果，可以将其用于同一页面上的多个图像。 (点击一个链接，图像就会显示出来，网站的背景是不透明的。)我发现了一个不错的小 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