将下载图像链接添加到标题fancybox 1.3.4中

时间:2014-11-05 18:31:19

标签: jquery

我正在使用 Fancybox 1.3.4 ,我希望能够在标题中为当前正在查看的图像添加下载链接。如何在不切换到 Fancybox 2.0 的情况下执行此操作,因为这不适合我的情况。

这是我的尝试:

_format_title = function(title) {

        var $el = $('.thumb-link');
        var url = $el.attr('href');
        var dl = $el.data('dl');
        var link = '&nbsp;<a class="download-link" href="' + url + '" download="' + dl + '">Download</a>';


        if (title && title.length) {
            if (currentOpts.titlePosition == 'float') {
                return '<table id="lightbox-title-float-wrap" cellpadding="0" cellspacing="0"><tr><td id="lightbox-title-float-left"></td><td id="lightbox-title-float-main">' + title + '</td><td id="lightbox-title-float-right"></td></tr></table>';
            }

            return '<div id="lightbox-title-' + currentOpts.titlePosition + '">' + title + link + '</div>';
        }

        return false;
    },

我创建了这些变量,然后添加了+title+link+,但它不会获得当前查看的标题,它将获得第一个锚点href。变量dl的数据来自html中包含图像文件名的数据属性。

1 个答案:

答案 0 :(得分:0)

好吧,无论如何我最终还是把它弄清楚了。我认为id会发布答案,以防万一其他人遇到同样的问题。我使用了fancybox 1.3.4必须修复的已经定义的变量和函数。

以下是完成的代码:

_format_title = function(title) {
        downloadLink = '&nbsp;<a class="download-link" href="' + currentOpts.href + '" download="' + currentOpts.href + '">Download</a>';

        if (title && title.length) {
            if (currentOpts.titlePosition == 'float') {
                return '<table id="lightbox-title-float-wrap" cellpadding="0" cellspacing="0"><tr><td id="lightbox-title-float-left"></td><td id="lightbox-title-float-main">' + title + '</td><td id="lightbox-title-float-right"></td></tr></table>';
            }

            return '<div id="lightbox-title-' + currentOpts.titlePosition + '">' + title + downloadLink + '</div>';
        }

        return false;
    },

创建了一个新变量:

downloadLink = '&nbsp;<a class="download-link" href="' + currentOpts.href + '" download="' + currentOpts.href + '">Download</a>';

然后我将新变量添加到title:

return '<div id="lightbox-title-' + currentOpts.titlePosition + '">' + title + downloadLink + '</div>';