0

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

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

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

4

2 回答 2

0

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

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）

您可以做的是使用 javascript方法将打开链接中的 AND 替换为下载链接，例如： press_webdownload_web.jpg.jpg.zipreplace()

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

于 2013-10-10T16:53:41.577 回答
0

您可以通过target="_blank"这种方式添加一个附加属性来标记：

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

也在小提琴中。

于 2015-03-18T09:43:41.033 回答