如何添加Fancybox的鏈接以下載圖像的高分辨率版本

我想使用fancybox在模式窗口中打開低分辨率圖像，並選擇下載高分辨率版本的相同圖像來自同一窗口中的鏈接的圖像。我已經試過這樣：如何添加Fancybox的鏈接以下載圖像的高分辨率版本

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

從這個的jsfiddle http://jsfiddle.net/zAe6Z/ 但似乎打開同一圖像是在窗口中。

來源

2013-10-09 Cormac

按照描述工作。 '_s.jpg'是列表中使用的預覽圖像，'_b.jpg'同時被fancybox和下載源使用。 – nietonfir

您需要3張圖片：縮略圖 - 在您的網頁上顯示，中等 - 將在fancybox和高分辨率中打開 - 從fancybox的標題內鏈接 – JFK

我正在使用文本鏈接打開中畫面，這是沒問題的，問題我的是，我有不同的圖片多個下載鏈接。我有第一個.zip下載作爲Javascript中的href，但需要知道如何鏈接到每個不同的。 – Cormac

所有的鏈接似乎遵循一個模式：

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）

你可以做的是通過和download通過_web.jpg從.jpg.zip開鏈接進入下載鏈接使用JavaScript replace()方法一樣更換press_web ：

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-10 16:53:41 JFK

你可以只添加一個額外的屬性標記target="_blank"這樣：

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

在 Fiddle

也。

來源

2015-03-18 09:43:41 han

如何添加Fancybox的鏈接以下載圖像的高分辨率版本

回答

相關問題