SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,446
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •