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图库插件列表here，更新版本here。

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

修改

也试试这个：

<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>