好，我知道這個標題相當拗口 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 錯誤了，若有更好的做法請告知 ….. 😉
大概就是醬子。