郑德才博客

jQuery FancyBox图片弹出浏览效果插件

$(function() {
    $("a[rel=example_group]").fancybox({
        'transitionIn': 'none',
        'transitionOut': 'none',
        'titlePosition': 'over',
        'maxWidth': 700,
        'titleFormat': function(title, currentArray, currentIndex, currentOpts) {
            return '<span id="fancybox-title-over">图片文件：' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title: '') + '</span>';
        }
    });
});

<a rel="example_group" href="http://img2.21tx.com/2008/10/17/21450.gif" title="图片1"><img src="http://img2.21tx.com/2008/10/17/21450.gif" alt="" /></a>
<a rel="example_group" href="http://img2.21tx.com/2008/10/17/21327.gif" title="图片1"><img src="http://img2.21tx.com/2008/10/17/21327.gif" alt="" /></a>
<a rel="example_group" href="http://image4.it168.com/2009/11/7/0f31e243-d745-4f9f-9046-f393f90b8ad7.jpg" title="图片1"><img src="http://image4.it168.com/2009/11/7/0f31e243-d745-4f9f-9046-f393f90b8ad7.jpg" alt="" /></a>
<a rel="example_group" href="http://images.cnblogs.com/cnblogs_com/xieex/zxgc.gif" title="图片1"><img src="http://images.cnblogs.com/cnblogs_com/xieex/zxgc.gif" alt="" /></a>