3、fancyBox-master展示图片例子

来源:互联网 发布:淘宝店铺叫虎扑伙伴 编辑:程序博客网 时间:2024/05/01 07:54

1、页面代码

@{    Layout = null;}<!DOCTYPE html><html><head>    <meta name="viewport" content="width=device-width" />    <title></title>    <script src="~/Content/FancyBox/lib/jquery-1.10.2.min.js"></script>    <script src="~/Content/FancyBox/lib/jquery.mousewheel.pack.js"></script>    <link href="~/Content/FancyBox/source/jquery.fancybox.css" rel="stylesheet" />    <script src="~/Content/FancyBox/source/jquery.fancybox.js"></script>    <script src="~/Content/FancyBox/source/jquery.fancybox.pack.js"></script>    <script>        var data = [{            href: '../Content/Image/1_b.jpg',            title: '1_b'        }, {            href: '../Content/Image/2_b.jpg',            title: '2_b'        }, {            href: '../Content/Image/3_b.jpg',            title: '3_b'        }, {            href: '../Content/Image/4_b.jpg',            title: '4_b'        }, {            href: '../Content/Image/5_b.jpg',            title: '5_b'        }];        //循环显示图片画廊        function Fn_ShowPicture(data) {            $.fancybox.open(data, {                helpers: {                    closeClick: true,                    thumbs: {                        width: 75,                        height: 50                    }                }            });        }    </script></head><body>    <div>        <a href="#" onclick="Fn_ShowPicture(data)">请点击我展示图片</a>    </div>    </body></html>


2、官方例子


3、最终效果

4、代码例子

源代码例子

0 0
原创粉丝点击