时间戳

首页 > 解决方案 > HTML 中的灯箱效果

javascript - HTML 中的灯箱效果

问题描述

我正在尝试编辑我的 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%">

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

标签： javascriptlightbox

解决方案

您必须使用像 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

推荐阅读