[JavaScript] Shadowbox 燈箱效果於父視窗展示 iframe 頁中的圖片 Gallery

Standard

好,我知道這個標題相當拗口 XD

前幾天寫了篇 [JavaScript] ColorBox 跨越 iframe 顯示完整的黑底(overlay) ,但詢問的網友表示他希望能展示圖片群組,不過ColorBox 的官網,關於 Opening ColorBox in the parent of an iframed document 的這段,最後提到:

Note that grouping will not work with this format since the parent document can not access the content of the iframe to see if any of those elements share a rel attribute value.

也就是用這種方法的話,是無法取得 iframe 中元素的 rel 值的,因此也就無法展示圖片群組了。

也許可以修改以達成目的,但目前還沒空細細研究他的 Code .. 於是就偷懶先找其他替代方案囉 😛

經過連來連去的找尋,找到 Shadowbox.js 這套燈箱效果是可以達成在 iframe 的父視窗展示圖片群組的!以下就來看看做法吧。

您可以先下載本例的範例檔,因為我對原始的 shadowbox.js 做了點修改(後面會說明)。

首先,我們要先準備 index.html 與 iframe.html,分別是父視窗頁(展示燈箱效果)與 iframe (放置圖片)頁。

兩個頁面都請引入 jQuery 與 Shadowbox.js:

[code language=”html”]
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
google.load("jquery", "1.3.2");
</script>
<script type="text/javascript" src="shadowbox.js"></script>
[/code]

而 index.html ,請初始化 Shadowbox:

[code language=”html”]
<script type="text/javascript">
window.onload = function(){
Shadowbox.init();
};
</script>
[/code]

iframe.html 頁的 JavaScript:

[code language=”html”]
<script type="text/javascript">

var xarr=[];

$(document).ready(function(){
var y=0;
$(‘a.examplelink’).each(function(){

var z=new Object;
z.player=’img’;
z.title=$(this).attr(‘title’);
z.content=$(this).attr(‘xhref’);
xarr.push(z);
y++;
});
});

function sboxParent(j){
var s = window.parent.Shadowbox;
if(s){
s.open(xarr);
s.change(j);
}
};
</script>
[/code]

名為 xarr 的陣列,用來存放圖片群組,圖片群組會在載入頁面後,由符合 <a class=”examplelink> 的元素下的 img 組成,player 為開啟方式(img 圖片,詳見 Shadowbox 官網 Usage 說明)、title 為圖片標題,會由 a 的 title 屬性取得、content 為圖片位置,由 a 的 xhref 屬性取得。

在此另外制定了一個 sboxParent() 方法,用於在點擊圖片後,開啟圖片群組於父視窗的動作。其中 s 指定為父視窗初始化的 Shadowbox。change() 方法為直接切換至該序號的圖。

完成的效果會像這樣:

不過,若用 Shadowbox 官網下載的 shadowbox.js ,點圖片後會引發一個 JavaScript 錯誤:

訊息: ‘Q.player’ 是 null 或不是一個物件
行: 527
字元: 13
程式碼: 0
URI: file:///C:/???/shadowbox.js

暫時不知如何正確地解決此問題,因此我就將 shadowbox.js 的第 527 行(若您下載的 shadowbox.js 是被壓縮過的,可能要還原一下,才是正確的行數):

[code language=”javascript”]
Q.player.remove();
[/code]

改為:

[code language=”javascript”]
if(Q.player){
Q.player.remove();
}
[/code]

就可以避免這個 JavaScript 錯誤了,若有更好的做法請告知 ….. 😉
大概就是醬子。

3 thoughts on “[JavaScript] Shadowbox 燈箱效果於父視窗展示 iframe 頁中的圖片 Gallery

  1. 樓主,我明明照足抄你的檔案去改去加,但按下圖時就是不斷出現error,說什麼aa.style是null、此處需要物件shadowbox.js,實在不知道那裡出錯了!不知你能否幫忙看看?><

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *