3、fancyBox-master展示图片例子-CSDN博客

本文链接：https://blog.csdn.net/u013533810/article/details/46843779

这篇博客详细介绍了如何利用fancyBox库在网页中优雅地展示图片，包括页面代码结构、实现的最终效果以及具体的代码示例，帮助读者掌握这一图片展示工具的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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="#" οnclick="Fn_ShowPicture(data)">请点击我展示图片</a>
    </div>    
</body>
</html>

2、官方例子