Multiple jQuery conflict unsure of why

Question

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="https://wordpress.stackexchange.com/questions/41048/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="https://wordpress.stackexchange.com/questions/41048/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.

Related Posts: