fancybox - JS图片库

Question

我正在建立一个投资组合网站，并想使用花哨的盒子来创建一个简单的画廊。

我希望一个部分的所有图像都驻留在一个文件夹（'gallery1'）中，并且我希望用户能够单击该文件夹中的所有图像。

这是我的html：

<div class="content_image" rel="gallery" href="image01_large.jpg" ><img src="gallery1/image01_small.jpg"/></div>

我正在尝试使用这个 jQuery 脚本，但它不起作用：

<script type="text/javascript">

$("div[rel=gallery]").fancybox({
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'titlePosition'     : 'over',
                'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                }
            });

</script>

任何帮助将不胜感激！

Answer 1

您可以在此处找到 jQuery 库插件列表，在此处更新版本。

你想使用一个图库插件，而不是一小段脚本，因为它们被编码来处理所有流行的浏览器，并且可以巧妙地高效工作。我建议在那里找到合适的选项并尝试插件的示例用法。

编辑

也试试这个：

<script type="text/javascript">

$(function(){$("div[rel=gallery]").fancybox({
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'titlePosition'     : 'over',
                'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                }
            })});

</script>