时间戳

首页 > 解决方案 > 使用JS从图像中获取动态id和url

fancybox - 使用JS从图像中获取动态id和url

问题描述

我在我的项目中实现了一个fancybox，我正在编写一个脚本来自动将一个锚点包裹在图像周围，其中包含图像的url和一个“data-fancybox”属性，让fancybox脚本完成它的工作。但是，我只获取第一张图片的网址，因为它们都共享同一个类。有一个动态图形 id 似乎是可以得到的。

我的问题是 - 我如何使用这个数字 id 来获取适当的 img src？

html是这样的：

    <figure id="XXXXXXX">
    <div>

    <img src="image.jpg" />

    </div>
    </figure>

... other stuff ...

    <figure id="YYYYYYY">
    <div>

    <img src="image2.jpg" alt="">

    </div>
    </figure>

我现在的代码如下（有效，但只返回第一个图像 url）：

$(document).ready(function() {
        var src = $("figure img").attr("src");
        var a = $("<a/>").attr( { href:src , "data-fancybox":"" } );
        $("figure img").wrap(a);
});

我知道我可以使用

var id = $("figure").attr("id");

获得我需要的 id，但我对编码很陌生，所以我不确定我如何实现它并使用它来获取正确的 url。任何帮助表示赞赏！

标签： fancybox

解决方案

如果您的目标是让您的图像可点击，那么您可以这样做：

$('figure img').each(function() {
  $(this).parent().css({cursor: 'pointer'}).attr('data-fancybox', 'gallery').attr('data-src', this.src);
});

演示 - https://jsfiddle.net/1jznsL7x/

提示：无需创建锚元素，您可以为任何元素添加data-fancybox和data-src属性，它将自动工作。

推荐阅读