Two js files conflicting

JavaScript
1

Hi

In my header.php file I am using a nivoslider and a normal fade in slideshow

Issue is the two js files are conflicting

The coding with the two files is below


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

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

<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>-->

<script type="text/javascript" src="./js/fadeslideshow.js"></script>

Have also got the following


<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [280, 250], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/team.jpg"],
		["images/team2.jpg"],
		["images/team3.jpg"],
		["images/team4.jpg"]
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: ""
})

</script>

and


  <script type="text/javascript">

$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'boxRainReverse', // Specify sets like: 'fold,fade,sliceDown'
        slices: 15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed: 500, // Slide transition speed
        pauseTime: 3000, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: true, // Next & Prev navigation
        controlNav: true, // 1,2,3... navigation
        controlNavThumbs: false, // Use thumbnails for Control Nav
        pauseOnHover: true, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        randomStart: false, // Start on a random slide
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});
</script>

I have tried but does not work


<script>
     jQuery.noConflict();

     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery('slider').show();
     });

     // Use Prototype with $(...), etc.
     $('fadeshow1').show();
   </script>

Any ideas on how to get the two working together without conflicting

Kind regards

Ian

2

Hi Ian,

Just include the most recent version of jQuery before the two plugins and you should be fine… most of the time there’s no reason to have more than one version of jQuery loaded.