Fancybox and Nivo slider on one page not working

问题

I want to implement a simple Nivo slideshow in the banner of my site and a fancybox gallery below it - I just can't get them to work simultaneously. The Nivo slider takes preference, when I disable it, the fancybox gallery works. I am using fancybox v2 (jquery 1.7.2) and nivo slider jquery 1.7.1 - is that the problem? My jquery and js skills are seriously rudimentary, so please spell it out for me - thank you so much! Here is the test site: http://designasite.co.za/aerialphotographer/

回答1:

I would try cleaning up your jQuery, give this a try:

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

Also, delete the

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

Above where your current nivo slider plugin is being included and initialised and also move the

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

into your head tag along with your other included files.

The reason for this is that you should only include jQuery once and use only one version on a page aswell and it's good practise to include all your plugins and css files at the same time, it's usually recommended to actually include your jQuery plugins at the bottom of your page so that it doesn't slow down your initial page from loading but wherever you have it, keep them together in the same place so that they are easier to find.

回答2:

I had similar problems with Nivo Slider and SigPro gallery (until I selected a version that didn't rely on the same jQuery code). I believe Nivo slider alters some of how the jQuery works and becomes incompatible with other image manipulation mods/plugins quite easily.

My recommendation would be to simply try another piece of gallery software, or a different piece of slideshow software. Or, don't have both on the same page at all.

A well known an unloved part of Nivo.

来源：https://stackoverflow.com/questions/10813209/fancybox-and-nivo-slider-on-one-page-not-working