Question

我正在尝试编辑我的JavaScript代码，以在单击图像时启用灯箱。当前，它在另一个选项卡中打开图像。我已经在网上搜索过，但似乎找不到答案。

<script language="JavaScript">
$(function() {
  /* Lets the user click on the images to view them in full resolution. */
  $("img").wrap(function() {
    var link = $('<a/>');
    link.attr('href', $(this).attr('src'));
    link.attr('title', $(this).attr('alt'));
    link.attr('target', '_blank');
    return link;
  });
});
</script>

<img src="img/4_email_a.png" style="border: #A9A9A9 1px solid; width:70%">

有人能指出我正确的方向吗？谢谢！

Answer 1

您必须使用像fancybox（https://fancyapps.com/fancybox/3/）这样的灯箱脚本，您只需要为链接添加data-fancybox属性，例如：

<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>

也可以使其不使用链接-https://codepen.io/anon/pen/rRVeJW

HTML中的灯箱效果

1 个答案: