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>';
            }
            });