郑德才博客 记录学习,记录工作,学习知识分享!

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

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>

2013年7月23日 | 发布:郑德才博客 | 分类:学习之路 | 评论:0

发表留言: