內置框架也能使用Lightbox
欧镜
转自：http://blog.sina.com.cn/s/blog_714a6dc301011bqa.html
以下内容引自http://www.hsiu28.net/html/jss.php?id=12
英文原文地址http://www.huddletogether.com/forum/comments.php?DiscussionID=250&page=1#Item_0已测试成功（应用网址：http://www.zy-artfair.com），原文有错误，下文有详细说明。
使用內置框架時也能全視窗預覽
以下教學是修改自 Lightbox JS v2.0，目前已在 Firefox 及 IE6 測試無誤。
目前只能在放置 iFrame 的頁面執行，一般的 Frame 框架恕無法使用。
(註：此處將用來放相簿圖片的 iFrame 命名為 "DisplayFrame"。您只須把下列語法中出現 "DisplayFrame" 的地方改成您想要的 iFrame 名稱就可以了。)
STEP 1:開啟並修改頁面lightbox.js。
請使用關鍵字 "var anchors"，找到變數 anchors 所定義的地方：
var anchors = document.getElementsByTagName_r('a');
修改為：(請注意：原始的定義已設為註解)
// var anchors = document.getElementsByTagName_r('a');
var anchors = window.frames['DisplayFrame'].document.getElementsByTagName_r('a');
STEP 2:接著，在往後的幾行中您可以找到：
anchor.onclick = function () { myLightbox.start(this); return false; }
並請將其改為：
// anchor.onclick = function () { myLightbox.start(this); return false; }
anchor.onclick = function() { window.parent.myLightbox.start(this); return false; }
STEP 3:此頁的後方還有個相同的變數 "var anchors"，重複步驟1的動作：
// var anchors = document.getElementsByTagName_r('a');
var anchors = window.frames['DisplayFrame'].document.getElementsByTagName_r('a');
STEP 4:找到最後一行，並將其改為註解：
// Event.observe(window, 'load', initLightbox, false);
(註：這個步驟是必須的，否則瀏覽器會出現錯誤，目前原因未知，但依據目前的測試，程式仍可正確的執行。)
STEP 5:開啟您的 iFrame 頁面，將JavaScript 和 CSS 呼叫改為註解：
<!--script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" /-->
STEP 6:在 <body> 標籤中加入 οnlοad="parent.initLightbox();"：
（应该是在放置IFRAME的页面加入）
<body οnlοad="parent.initLightbox();">
(註：若有需要，您也可以使用 window.οnlοad=function(){parent.initLightbox();}，請選擇最適合您的方式。)
STEP 7:開啟"放置" iFrame(DisplayFrame) 的頁面，並加入以下呼叫：
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
类似资料：