javascript - Fancybox 中的目标 href

Question

我试图在标题中放置一个链接，该链接本质上是选定的锚href，带有前缀。我该怎么做以下？我希望能够在选定的锚元素上获取 this.href。

$(".gallery-module > li > a").fancybox(
{
    title       : '<a href="'+ this.href + '-large">DOWNLOAD</a><br> High Resolution File, 300dpi'
});

Answer 1

我假设您使用的是 fancybox v1.3.x，不是吗？

使用该版本，您不能this.href直接引用，除非它在回调函数中。在您的情况下，您可以使用titleFormat自定义标题的选项，例如

$(".gallery-module > li > a").fancybox({
 titleFormat: function(){
  return '<div class="newTititleWrap"><a href="'+ this.href + '-large">DOWNLOAD</a><br> High Resolution File, 300dpi</div>'
 } 
});

请注意，我将自定义标题包装在DIVwith class = newTititleWrap（或您喜欢的任何内容）中，您可以css稍后使用它来设置样式。

更新：我错过了标签fancybox-2（我的错）。对于fancybox v2.0.6，使用如下beforeShow回调选项：

 $(".gallery-module > li > a").fancybox({
   beforeShow : function() {
    this.title = '<div class="newTititleWrap"><a href="'+ this.href + '-large">DOWNLOAD</a><br> High Resolution File, 300dpi</dv>';
   } 
 }); // fancybox

我将发布 v1.3.4 的解决方案，以防它帮助其他人。

Answer 2

当你绑定fancybox时：

$(".gallery-module > li > a").fancybox({
    title: '<a href="'+ this.href + '-large">DOWNLOAD</a><br> High Resolution File, 300dpi'
});

this不是匹配<a>元素，this可能不是'属性，window是（可能），这不是你想要的标题。this.href<a>hrefthis.hrefwindow.href

each如果您想使用来自 fancybox 中链接的信息，您可以使用并分别绑定 fancybox 来遍历匹配元素集<a>：

$('.gallery-module > li > a').each(function() {
    // 'this' will be the <a> in here
    $(this).fancybox({
        title: '<a href="'+ this.href + '-large">DOWNLOAD</a><br> High Resolution File, 300dpi'
    });
});

在$('.gallery-module > li > a').each回调中，this将是<a>您正在寻找的。