www.webdeveloper.com
Results 1 to 2 of 2

Thread: two js files conflicting

  1. #1
    Join Date
    Apr 2012
    Posts
    39

    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
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    looking at the error console does help sometimes
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles