1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Two js files conflicting

Discussion in 'JavaScript' started by ianhaney, Jun 6, 2013.

  1. #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>
     
    
    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
    SEMrush
    Ian
     
    ianhaney, Jun 6, 2013 IP
    SEMrush
  2. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #2
    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.
     
    HuggyStudios, Jun 6, 2013 IP
  3. ianhaney

    ianhaney Greenhorn

    Messages:
    72
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #3
    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
     
    ianhaney, Jun 6, 2013 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,735
    Likes Received:
    1,581
    Best Answers:
    227
    Trophy Points:
    515
    #4
    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.
     
    deathshadow, Jun 10, 2013 IP