Two js files conflicting

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>
 

Code (markup):

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>
 

Code (markup):

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>

Code (markup):

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>

Code (markup):

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

Kind regards

Ian

 

Hey Ian,

First thing is can I have a link to your website? I can debug myself and normally work out the issue 10 times easier like that.

Second thing without me looking at the code jQuery.noConflict() means you have now changed the jQuery listener to jQuery. Personally I would make it var ianjQuery = jQuery.noConflict(); just to be safe and make sure any jQuery code called after is replaced with ianjQuery.('#replace-me') instead of $('#replace-me'). Hope that makes sense please look here: http://api.jquery.com/jQuery.noConflict/

Thirdly there maybe another issue which is more likely and as soon as you have posted your source code I can help more.

 

Hi HuggyStudios

Thank you for the reply

I have resolved it now

I took out the conflicting slideshow and its coding and made a second nivo slider in its place with a different id for it and different css as was a smaller slideshow

Thank you though for replying and preparing to have a look, really appreciate it

Kind regards

Ian

 

My advice? Swing an axe at the goofy animated crap -- most of the time people use that stuff it's just forcing the page to be an inaccessible mess and laundry list of how not to build a website.

See 90%+ of the garbage people vomit up on their sites using jQuery.