#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    156
    Rep Power
    13

    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

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

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

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

    Code:
    <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. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2006
    Posts
    40
    Rep Power
    9
    For debugging purpose you should first put

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

    and run the script to see if the first script effect will run on your site. then if every thing
    work fine, then put the second code

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

    but remove this line totally

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

IMN logo majestic logo threadwatch logo seochat tools logo