Multiple jQuery conflict unsure of why

1 Views

I am trying to use the same image fader in two different spots on my testing site. The one in the top banner works, and the one in the furthest right sidebar kind of worksThey both now do not work. However I believe that the answer below is more or less on the right track and it is a WordPress “quirk” that is at a fault and I just need a workaround.

If I have a look at it in Chrome’s developer tools, the css is transitioning properly. In the browser the first image fails to load, the second image does and then nothing.

Read More

I have literally copied and pasted the code from the top of the page to the widget location in the side bar.

I have tried copying and pasting both the jQuery and the CSS adding a 2 onto the end of all declarations to try and create a distinct function, but to no avail.

Am I able to have two of the same jQuery function?

CSS 

<style type="text/css">
/* rotator in-page placement */
div.rotator {
    position:relative;
/*    height:77px;*/
/*    margin-left: 15px;*/
}

div.rotator ul {
    margin: 0;
    padding: 0;
}
/* rotator css */
    div.rotator ul li {
    list-style-type: none !important;
    float:left;
    position:absolute;
    list-style: none;
}
/* rotator image style */   
div.rotator ul li img {
    width: 468px;
}
div.rotator ul li.show {
    z-index:500;
}
</style>

PHP code is the same for both 

<div class="rotator">
<ul>
    <li class="show"><a href="1"><img src="http://173.247.253.180/~andrewba/images/banners/40779.gif" /></a></li>
     <li><a href="2"><img src="http://173.247.253.180/~andrewba/images/banners/40780.gif"  /></a></li>
</ul>
</div>

jQuery only called once 

<script type="text/javascript">
function theRotator() {
    //Set the opacity of all images to 0
    jQuery( 'div.rotator ul li').css({opacity: 0.0});

    //Get the first image and display it (gets set to full opacity)
    jQuery( 'div.rotator ul li:first').css({opacity: 1.0});

    //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds

    setInterval('rotate()',6000);

}

function rotate() { 
        //Get the first image
    var current = (jQuery( 'div.rotator ul li.show')?  jQuery( 'div.rotator ul li.show') : jQuery( 'div.rotator ul li:first'));

    if ( current.length == 0 ) current = jQuery( 'div.rotator ul li:first');

    //Get next image, when it reaches the end, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? jQuery( 'div.rotator ul li:first') :current.next()) : jQuery( 'div.rotator ul li:first'));

    //Un-comment the 3 lines below to get the images in random order

    //var sibs = current.siblings();
        //var rndNum = Math.floor(Math.random() * sibs.length );
        //var next = jQuery(  sibs[ rndNum ] );


    //Set the fade in effect for the next image, the show class has higher z-index
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);

    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');

};

//Ammended based on the Answer.    
jQuery( document).ready(function() {        
        //Load the slideshow
    jQuery('.rotator').each(function() { jQuery(this).theRotator() });
    jQuery( 'div.rotator').fadeIn(1000);
    jQuery( 'div.rotator ul li').fadeIn(1000); // tweek for IE
});
</script>
Post Views: 1

Related posts

Leave a Reply

2 comments

  1. Based off of https://stackoverflow.com/questions/7818525/jquery-image-rotator-with-multiple-instances-on-single-page here is the code that eventually got it to work

    PHP

    Top Banner

    <div id="top" class="rotator">
    <ul>
        <li class="show"><a href="1"><img src="http://173.247.253.180/~andrewba/images/banners/40779.gif" /></a></li>
         <li><a href="2"><img src="http://173.247.253.180/~andrewba/images/banners/40780.gif"  /></a></li>
    </ul>
</div>

    Sidebar

    <div id="right" class="rotator">
    <ul>
        <li class="show"><a href="1"><img src="http://173.247.253.180/~andrewba/images/banners/40787.gif" /></a></li>
         <li><a href="2"><img src="http://173.247.253.180/~andrewba/images/banners/40788.gif"  /></a></li>
    </ul>
</div>

    jQuery

    <script type="text/javascript">
    jQuery( document).ready(function() {        
            //Load the slideshow
        theRotator('top');
        theRotator('right');
        jQuery( 'div.rotator').fadeIn(1000);
        jQuery( 'div.rotator ul li').fadeIn(1000); // tweek for IE
    });

    function theRotator( id ) {
        //Set the opacity of all images to 0
        var jqElem = jQuery( '#' + id );
        jqElem.find('ul li').css({opacity: 0.0});

        //Get the first image and display it (gets set to full opacity)
        jqElem.find('ul li:first').css({opacity: 1.0});

        //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
        setInterval(rotate,6000);

        function rotate() { 
            //Get the first image
            var current = (jqElem.find('ul li.show')?  jqElem.find('ul li.show')  : jqElem.find('ul li:first'));

            //Get next image, when it reaches the end, rotate it back to the first image
            var next = ((current.next().length) ? ((current.next().hasClass('show')) ? jqElem.find('ul li:first') :current.next()) : jqElem.find('ul li:first'));   

            //Set the fade in effect for the next image, the show class has higher z-index
            next.css({opacity: 0.0})
            .addClass('show')
            .animate({opacity: 1.0}, 1000);

            //Hide the current image
            current.animate({opacity: 0.0}, 1000)
            .removeClass('show');

        };

    }

    function rotate() { 
            //Get the first image
        var current = (jQuery( 'div.rotator ul li.show')?  jQuery( 'div.rotator ul li.show') : jQuery( 'div.rotator ul li:first'));

        if ( current.length == 0 ) current = jQuery( 'div.rotator ul li:first');

        //Get next image, when it reaches the end, rotate it back to the first image
        var next = ((current.next().length) ? ((current.next().hasClass('show')) ? jQuery( 'div.rotator ul li:first') :current.next()) : jQuery( 'div.rotator ul li:first'));

        //Un-comment the 3 lines below to get the images in random order

        //var sibs = current.siblings();
            //var rndNum = Math.floor(Math.random() * sibs.length );
            //var next = jQuery(  sibs[ rndNum ] );


        //Set the fade in effect for the next image, the show class has higher z-index
        next.css({opacity: 0.0})
        .addClass('show')
        .animate({opacity: 1.0}, 1000);

        //Hide the current image
        current.animate({opacity: 0.0}, 1000)
        .removeClass('show');

    };

</script>

    CSS

    No changes.

  2. I’ve voted to close this as off topic but I kinda know the answer so will try my best to explain.

    If you have multiple areas that need image rotation on the same page then the code you have wont work. You need to bind an instance of a rotation function to each area that you want to rotate. That way each one can work independently.

    Below is what I have programmed up to allow multiple rotators on the same screen. Its fairly basic but feel free to modify to your needs.

    JQUERY

    $(document).ready(function() {

    // Any image containers need rotating?
    $('.imgRotator').each(function() { $(this).scWFWImageRotator() });

});

// jQuery plugin to make image containers rotate.
(function($){

    // Swap text with title attribute
    $.fn.scWFWImageRotator = function() {

        var rotatorTimeSwap = 6000;

        this.find("img").removeClass("selected");
        this.find("img:first-child").addClass("selected");

        var rotatorImageChangeFunc = function() {
            var rotatorImages = this.find("img");
            var imgSelected = this.find("img.selected");
            var rotatorImgCount = rotatorImages.length;
            var rotatorCurImage = rotatorImages.index(imgSelected);
            var rotatorNextImage = rotatorCurImage + 1;
            if(rotatorNextImage >= rotatorImgCount) {
                rotatorNextImage = 0;
            }
            this.find("img:eq("+rotatorCurImage+")").fadeOut("500", function() {
                $(this).removeClass("selected");
            });
            this.find("img:eq("+rotatorNextImage+")").fadeIn("500", function() {
                $(this).addClass("selected");
            });
        }

        return this.each(function() {

            var rotatorTimer;
            var $this  = $(this);
            var func = $.proxy( rotatorImageChangeFunc, $this );
            var rotatorImages = $this.find("img").length;

            if(rotatorImages > 1) {
                rotatorTimer = setInterval(func, rotatorTimeSwap);
                $this.hover(
                    function() { rotatorTimer = clearInterval(rotatorTimer); },
                    function() { rotatorTimer = setInterval(func, rotatorTimeSwap); }
                );
            }

        });

    };

})(jQuery);

    HTML

    <div class="imgRotator">
    <img src="/images/rotator/home1.jpg" />
    <img src="/images/rotator/home2.jpg" />
    <img src="/images/rotator/home3.jpg" />
    <img src="/images/rotator/home4.jpg" />
</div>

    CSS

    /**** Image Rotator ****/
.imgRotator {
    background-color: #d6e8ec;
    height: 180px;
    margin-bottom: 5px;
    overflow: hidden;
    position: relative;
    width: 180px;
}
.imgRotator img {
    display: none;
    left: 0;
    position: absolute;
    top: 0;
}
.imgRotator img:first-child,
.imgRotator img.selected { display: block; }