Question

<div class="shirt-thumb">
    <a href="../wp-content/uploads/2014/05/icelandic-logo2.png" class="fancybox fancybox-thumb" rel="shirt1" title="shirt">
        <img src="../wp-content/uploads/2014/05/icelandic-logo2.png" data-descr="Shirt 1 Back" />
    </a>
</div>

以上是我的HTML。我想要做的是获取data-descr属性并将其添加到jquery中的Fancybox缩略图，以便我可以应用css将其设置为:: after元素。我需要在每个缩略图下方显示说明。根据我的理解，没有内置的方法来执行此操作，只在全尺寸图像下方应用标题？

这是定义缩略图列表项的变量的方式。我实际添加的唯一一个是thumbDescr，其他三个来自Fancybox：

init: function (opts, obj) {
    var that = this,
        list,
        thumbDescr = opts.description,
        thumbWidth = opts.width,
        thumbHeight = opts.height,
        thumbSource = opts.source;

下面是我的缩略图列表项的构建。这部分加载正常：

for (var n = 0; n < obj.group.length; n++) {
    list += '<li><a style="width:' + thumbWidth + 'px;height:' + thumbHeight + 'px;" data-descr="' + thumbDescr + '" href="javascript:$.fancybox.jumpto(' + n + ');"></a></li>';
}

这些是我为尝试检索描述所做的事情：

这基本上只是将函数文本应用于data-descr而不是检索它 -

description: function (item) { //function to obtain the description of the thumbnail image
    var descr;

    if (item.element) {
        descr = $(item.element).find('img').attr('data-descr');
    }

    if (!descr && item.type === 'image' && item.href) {
        descr = item.href;
    }

    return descr;
}

同样的事情 -

description: function (item) { // function to obtain the description of the thumbnail image
    var descr;

    if (item.element) {
        descr = $(item.element).find('img').data("descr"),
    }

    return descr;
}

这返回“未定义” -

description : F.find('img').data("descr")

...其中F在jquery之前被定义为类.fancybox。

是的，我对此很新，我确信有一个简单的解决办法，但我不确定如何找到我需要的东西。如果我没有提供足够的信息，请告诉我。

Answer 1

如果你是“相当新的”，我不会建议你弄乱原来的fancybox js文件。你可以使用fancybox回调在你自己的fancybox自定义初始化中实现你想要的任何东西。

首先，请记住在屏幕上显示（fancybox）图像后附加fancybox缩略图助手，以便附加说明/标题（从{{1}的data-descr属性中检索您可能需要使用<img>回调。

此外，由于过程有一点延迟，最好使用afterShow函数来确保缩略图已完全附加到DOM。

所以试试这段代码：

setTimeout()

注意：

我们使用var _descrFlag = false; $(".fancybox").fancybox({ helpers: { thumbs: { width: 80, // your thumbnails size height: 80 } }, afterShow: function (current) { // validate if we already added the captions if (!_descrFlag) { // wait a bit setTimeout(function () { // get each data-descr $(".fancybox").each(function (i) { // wrap data-descr in a html element var _dataDescr = "<p>" + $(this).find("img").data("descr") + "</p>"; // append it to the current thumb using .eq() $("#fancybox-thumbs").find("li").css({ backgroundColor: "#fff" // default is transparent so }).eq(i).append(_dataDescr); }); // each // done? set flag to true _descrFlag = true; }, 100); // adjust time as needed }; // if } }); // fancybox变量标志（并在回调中首先验证它），以确保只添加一次描述。
请注意我们需要附加一个html元素（_descrFlag）;在我们使用var _dataDescr的示例中，您可以使用您需要的任何html元素。
如果未设置<p>，fancybox将从框中显示的（大）图像创建缩略图。您可以减少指定缩略图source的开销和页面加载，例如，可以与source标记相同，这样您就可以执行以下操作：
```
<img>
```

参见 JSFIDDLE

...并且不需要弄乱原始的js文件;）

使用jquery检索data-descr属性以在Fancybox缩略图中使用

1 个答案: