Question

我想使用fancybox在模态窗口中打开一个低分辨率图像，可以选择从同一窗口中的链接下载同一图像的高分辨率版本。我试过这个：

$(".fancybox").fancybox({
    afterLoad: function() {
        this.title = '<a href="' + this.href + '">Download</a> ' + this.title;
    },
    helpers : {
        title: {
            type: 'inside'
        }
    }
});

从这个jsfiddle http://jsfiddle.net/zAe6Z/ 但它似乎打开了与窗口中相同的图像。

Answer 1

您的所有链接似乎都遵循一种模式：

http://uraniumdrivein.com/img/press/press_web/Ayngel_Overson_BW_web.jpg 
http://uraniumdrivein.com/img/press/download/Ayngel_Overson_BW.jpg.zip

http://uraniumdrivein.com/img/press/press_web/Ayngel_Overson_Color_web.jpg
http://uraniumdrivein.com/img/press/download/Ayngel_Overson_Color.jpg.zip

http://uraniumdrivein.com/img/press/press_web/Bette_Nickle_Uravan_web.jpg
http://uraniumdrivein.com/img/press/download/Bette_Nickle_Uravan.jpg.zip

第一个是在fancybox中打开图像（href属性），第二个是下载高分辨率图像（在fancybox中title）

您可以做的是将press_web替换 download并_web.jpg通过.jpg.zip从开始链接使用javascript下载链接replace()方法如：

jQuery(document).ready(function ($) {
    $(".modal").attr("rel", "gallery").fancybox({
        afterLoad: function () {
            this.title = this.title ?
                '<a href="' + this.href.replace("press_web", "download")
                .replace("_web.jpg", ".jpg.zip") +
                '">Download</a> ' + this.title 
            :
                '<a href="' + this.href.replace("press_web", "download")
                .replace("_web.jpg", ".jpg.zip") +
                '">Download</a>';
        },
        helpers: {
            title: {
                type: 'inside'
            }
        }
    });
});

参见 JSFIDDLE

Answer 2

您可以通过这种方式为标记target="_blank"添加其他属性：

$(".fancybox").fancybox({
    afterLoad: function() {
        this.title = '<a href="' + this.href + '" target="_blank">Download</a> ' + this.title;
    },
    helpers : {
        title: {
            type: 'inside'
        }
    }
});

同样在Fiddle。

如何添加指向Fancybox的链接以下载图像的高分辨率版本

2 个答案: