打开图像链接覆盖（灯箱效果）[关闭]答案

【问题标题】：open image link overlay (lightbox effect) [closed]打开图像链接覆盖（灯箱效果）[关闭]
【发布时间】：2014-06-03 02:05:38
【问题描述】：

我在我的网站上使用了一个 diy 幻灯片。我正在尝试使用链接（如在下面的代码中）在叠加层（如灯箱）中打开缩略图照片的全尺寸照片，我需要使用 href，因为我在网站上使用自定义字段。

这是我的html：

<div class="slide">

<a href="http://collapsingmarket.com/wp-content/uploads/fly_1-400x566.jpg" class="full"/>
    <img src="http://collapsingmarket.com/wp-content/uploads/fly_1-211x300.jpg" class="thumbnail"/>
</a>

</div>

我不知道从哪里开始实现这一点...我猜是使用 jquery

谁能帮我解决这个问题？

非常感谢您的帮助

【问题讨论】：

你有没有尝试过？你能和我们分享你的尝试吗？如果没有，网上有数百个灯箱教程。
为什么不直接使用灯箱？大多数灯箱使用a 标签。

标签： jquery html image href lightbox

【解决方案1】：

先做一个div

<div style="display:none;z-index:999;position:absolute">
    <img/>
</div>

点击标签时首先放置

e.preventdefault()

然后用

显示 div

$('div img').attr('src',$(this).attr('href')).show()

您可以根据要求提供图像的顶部和左侧等如果需要，您可以戴上口罩

【讨论】：