【JQuery】FancyBox燈箱(LightBox)效果

使用JQuery前,需要引用Jquery元件及FancyBox元件

FancyBox燈箱(LightBox)效果使用方式與Demo在官網上寫得很清楚了，所以本人就不多加敘述之。本篇應用在表格上。表格的使用不能用ID方式指向。在Jquery上ID是屬於唯一的。若有多個相同ID，Jquery判別上只會抓第一個ID作為辨認，所以宜採用class方式指向。這只是其中一個作法。

HTML(參考):

<table  border="1" >
<tr>
<td><a class="various5" href="http://tw.yahoo.com">Yahoo</a> </td>
<td><a class="various5" href="http://blog.xuite.net/xiaolian">XiaoLian Blog</a> </td>
</tr>
<tr>
<td><a class="ex6" href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a></td>
<td><a class="ex6" href="./example/12_b.jpg" title=""><img class="last" alt="" src="./example/12_s.jpg" /></a></td>
</tr>
</table>

Javascript(參考):

$(document).ready(function() {
             $("a.various5").fancybox({
                                 'hideOnContentClick':true,
                                 'width'    : '75%',
                                 'height'   : '75%',
                                 'autoScale'   : false,
                                 'transitionIn'          : 'none',
                                 'transitionOut'           : 'none',
                                 'type'    : 'iframe'
             });
            $("a.ex6").fancybox({
                                 'titlePosition'  : 'outside',
                                 'overlayColor'  : '#000',
                                 'overlayOpacity' : 0.9
            });
});

PS: Hides FancyBox
Within an iframe use - parent.$.fancybox.close();

參考資源：
http://fancybox.net/
FancyBox官網

http://fancyapps.com/fancybox/
FancyBox2 官網