fancybox相關知識

參考網站：http://imluren.com/2010/12/fancybox.html/comment-page-1

http://www.iteye.com/topic/1125770

圖片彈出框變大是因爲彈出後的圖片是原來圖片放大後的另一張圖片，不是同一種

彈出圖片並且能根據鍵盤或者鼠標移動到下一張圖片頁面：

<a title="Lorem ipsum dolor sit amet" href="img/9_b.jpg" rel="example_group">
<img src="img/9_s.jpg" alt=""/>
</a>
<a title="" href="img/10_b.jpg" rel="example_group">
<img src="img/10_s.jpg" alt=""/>
</a>
<a title="" href="img/11_b.jpg" rel="example_group">
<img src="img/11_s.jpg" alt=""/>
</a>
<a title="" href="img/12_b.jpg" rel="example_group">
<img class="last" src="img/12_s.jpg" alt=""/>
</a>

JS：

$("a[rel=example_group]").fancybox({

            'transitionIn' : 'elastic',
            'transitionOut' : 'elastic',
            'titlePosition' : 'over',
            'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
            return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
            }
            });