Question

我想在我的网站横幅中实现一个简单的Nivo幻灯片，并在它下面实现一个fancybox图库 - 我无法让它们同时工作。 Nivo滑块优先，当我禁用它时，fancybox库工作。我正在使用fancybox v2（jquery 1.7.2）和nivo滑块jquery 1.7.1 - 这是问题吗？我的jquery和js技能非常简陋，所以请为我拼出来 - 非常感谢你！以下是测试网站：http://designasite.co.za/aerialphotographer/

Answer 1

我在Nivo Slider和SigPro gallery中遇到了类似的问题（直到我选择了一个不依赖于相同jQuery代码的版本）。我相信Nivo滑块会改变jQuery的一些工作方式，并且很容易与其他图像处理模块/插件不兼容。

我的建议是简单地尝试另一个图库软件或另一个幻灯片软件。或者，根本不要在同一页面上。

一个众所周知的Nivo不受欢迎的部分。

Answer 2

我会尝试清理你的jQuery，试一试：

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();

        $('#slider').nivoSlider({
            effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
            animSpeed: 1000, // Slide transition speed
            pauseTime: 3000, // How long each slide will show
        });

    });
</script>

另外，删除

<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>

在您的当前nivo滑块插件被包含和初始化的位置上方，并移动

<script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script>

将head标记与其他包含的文件一起放入。{/ p>

这样做的原因是你应该只包含一次jQuery，并且在页面上只使用一个版本，并且同时包含所有插件和css文件是一种很好的做法，它是通常建议在页面底部实际包含您的jQuery插件，这样它就不会使您的初始页面加载速度变慢，但无论您拥有它，都可以将它们放在同一个地方，以便更容易找到它们。

一页上的Fancybox和Nivo滑块不起作用

2 个答案: