Fancybox - 在一個圖庫中合併圖像和iframe

Question

我正在處理的項目中有一個「附加文件」容器，它顯示了已附加到特定事件的文件的縮略圖。當用戶點擊一個縮略圖時，一個fancybox窗口打開，向他們展示所附圖像或文本文件的更大預覽。

現在，我的解決方案包括設置的fancybox類型的iframe，像這樣的：

$(".fancybox_group").fancybox({ 
    type : 'iframe' 
}); 

這將顯示這兩個文本文件和圖片就好了，但圖像在其周圍這個巨大的白色邊框。我在谷歌搜索了一下，發現this solution，但它不適合我。這只是創建兩個獨立的fancybox實例;一個用於圖像，另一個用於iframe。我希望能夠瀏覽一個畫廊中的所有附件。這可能嗎？

Here is an example on jsfiddle顯示我想要實現的。我從fancybox的例子中借用了代碼/圖像，並在文本文檔中添加了另一個縮略圖鏈接。這就是我在我的項目中建立的方式。任何有識之士將不勝感激。

Answer 1

您正在使用fancybox v2.0.6，所以其他解決方案可能已過時。

要實現你想要的簡單，只需要：

1）。加載所有的JavaScript文件的順序如下：

• jQuery的
• 的fancybox js文件
• 的fancybox媒體js文件（你的助手目錄中找到）

2）。加載fancybox的css文件

3）。設置html您想在喜歡的fancybox打開每個類型的對象：

圖片：

<a class="fancybox" data-fancybox-group="gallery" href="image01.jpg"><img src="image01thumb.jpg" alt="" /></a> 
<a class="fancybox" data-fancybox-group="gallery" href="image02.jpg"><img src="image02thumb.jpg" alt="" /></a> 

如果你的圖像href是一樣的東西href='/attachments/76'的fancybox不知道它是一個image因爲缺乏擴展（jpg，png，gif）。類fancybox.image添加到您的HTML這樣的：

<a class="fancybox fancybox.image" data-fancybox-group="gallery" href="/attachments/76"><img src="thumb76.jpg" alt="" /></a> 

Ajax內容（HTML或TXT文件）：

<a class="fancybox fancybox.ajax" data-fancybox-group="gallery" href="sample.html">open ajax 1</a> 
<a class="fancybox fancybox.ajax" data-fancybox-group="gallery" href="sample.txt">open ajax 2</a> 

（注意，第二類fancybox.ajax ......同時，你可以使用，而不是在我的例子文本）

通過iframe的外部網頁縮略圖：

<a class="fancybox fancybox.iframe" data-fancybox-group="gallery" href="http://domain.com/page.html">open page in iframe mode</a> 
<a class="fancybox fancybox.iframe" data-fancybox-group="gallery" href="http://other.com/page2.html">open other page in iframe mode</a> 

（注意，第二類fancybox.iframe）

Youtube視頻：

<a class="fancybox" data-fancybox-group="gallery" href="http://www.youtube.com/watch?v=2matH4B9bTo">open youtube video</a> 

（請注意，我們不需要添加任何額外的類，因爲我們正在使用fancybox媒體助手）

注意：我們使用的是data-fancybox-group="gallery"屬性來設置相同的畫廊內的所有元素（你應該設定一個HTML5 DOCTYPE雖然）

最後，簡單地使用這個腳本：

$(".fancybox").fancybox(); 

你可能要添加像其他API選項：

$(".fancybox").fancybox({ 
    // other API options 
    padding: 0 // optional etc. 
}); 

如果您還想要使用buttons或thumbnails幫手不要忘記加載正確的js和css文件。同時添加helpers選項，你的腳本，如：

$(".fancybox").fancybox(
helpers : { 
    buttons : {}, 
    thumbs : { 
    width : 50, 
    height : 50 
    } 
} 
}); 

最後一個音符：這是的fancybox v2.0.6 +