jQuery - colorbox

最近公司的案子又需要用到lightbox的效果
因為之前用的在IE6上的效果都不好，所以又找了另一個不錯用的套件 - ColorBox
這個是Jim大找到的，我覺得還不錯用
官網左側有五個範例連結，各有不同的開啟效果，可以參考看看想用哪一種
以下來簡略說一下使用方法：
首先當然是先把它掛進來 <script type="text/javascript" src="../colorbox/jquery.colorbox.js"></script> <!-- 別忘了他專有的css --> <link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" /> 另外他也有提供外框圖檔，如果要改變位置時記得要同步修改css檔
再來是javascript的部份，以下僅舉兩例： $(document).ready(function(){ $("a[rel='example1']").colorbox(); //a tag $(".iframe").colorbox({width:"80%", height:"80%", iframe:true});//使用iframe開啟 }); 最後是HTML的部份 <a href="../content/ohoopee1.jpg" rel="example1" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a> <a class='iframe' href="http://google.com">Outside webpage (IFrame)</a> 在實測過程中發現用IE6開啟iframe時，第一次會無法顯示透明底色，要滾動一下scrollbar才會顯示
於是Jim大網路搜尋了一下，剛好有人也發現這個問題，並且找到了修正方式(好心人啊~)
修正方式要直接修改它的jQuery程式，以下是修正方式： if (!open) { open = TRUE; $.event.trigger(cbox_open); $close.html(settings.close); $overlay.css({"opacity": settings.opacity}).show(); cboxPublic.position(setSize(settings.initialWidth, 'x'), setSize(settings.initialHeight, 'y'), 0); if (isIE6) { $window.bind(cbox_ie6, function () { $overlay.css({width: $window.width(), height: $window.height(), top: $window.scrollTop(), left: $window.scrollLeft()}); }).trigger(cbox_ie6); } } //修改成下面 if (!open) { open = TRUE; $.event.trigger(cbox_open); $close.html(settings.close); $overlay.css({"opacity": settings.opacity}).show(); cboxPublic.position(setSize(settings.initialWidth, 'x'), setSize(settings.initialHeight, 'y'), 0); if (isIE6) { $window.bind(cbox_ie6, function () { $overlay.css({width: $window.width(), height: $window.height(), top: $window.scrollTop(), left: $window.scrollLeft()}); }).trigger('scroll.cboxie6'); } } 其實主要是修改trigger的部份
修改過後在IE6上使用感覺真讚^^"

由於客戶的需求，希望在開啟box時要隱藏scrollbar
所以上網搜尋了一下資料，果然也有人需要此效果
在此也放上解決方式，而且IE6也可以使用喔
$().bind('cbox_open', function(){ $('html').css({overflow:'hidden' }); }).bind('cbox_closed', function(){ $('html').css({overflow:'auto'}); });