点击一系列div

Question

我对下面的代码进行了类似的设置，其中图库类型链接打开了一个带有深色背景和放大图像的div（如下所示：https://codepen.io/ongtiffany/pen/BoOeQV）。

我想要做的是将这些灯箱div彼此链接（使用左箭头和右箭头），这样您就可以关闭当前打开的div并打开正确的相邻div，从而有效地在放大的图像之间切换。

<div class="lightbox" id="1">
    <div class ="lightbox_content">Some stuff here.</div>
    <a href="#lightbox_2"><div class ="lightbox_r">&rarr;</div></a>
</div>

<div class="lightbox" id="1">
    <a href="#lightbox_1"><div class ="lightbox_l">&larr;</div></a>
    <div class="lightbox_content">Some stuff here.</div>
    <a href="#lightbox_3"><div class="lightbox_r">&rarr;</div></a>
</div>

<div class="lightbox" id="3">
    <a href="#lightbox_2"><div class ="lightbox_l">&larr;</div></a>
    <div class="lightbox_content">Some stuff here.</div>
</div>

任何帮助都会很棒 - 谢谢！

Answer 1

不要重新发明轮子。尝试使用一些专门的“灯箱”库。几乎所有人都支持将多个图像链接成系列并使用箭头或某些按钮进行导航。

• http://photoswipe.com/（我个人最喜欢的）
• http://fancybox.net/
• http://lokeshdhakar.com/projects/lightbox2/
• http://highslide.com/
• 几乎所有你可以使用“lightbox”进行谷歌搜索