Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

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>
share|improve this question
    
Close-vote as off-topic. Down-vote for not following WPSE conventions. Answers are posted as answers, not as updates to questions. –  Chip Bennett Feb 6 '12 at 1:47
    
I tried to find out how to close this and/or answer my own question. –  Joshua Feb 6 '12 at 6:01
    
If you found the solution to your question, post it as an answer (below). Then, accept your answer, by clicking the checkmark. –  Chip Bennett Feb 6 '12 at 16:14
    
I didn't see that button facepalm –  Joshua Feb 6 '12 at 23:37
    
Have made the changes and answered as per your suggestion. –  Joshua Feb 7 '12 at 2:14
show 2 more comments

2 Answers

up vote 1 down vote accepted

Based off of http://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.

share|improve this answer
add comment

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; }
share|improve this answer
    
Unfortunately this did not work straight out of the box (jsfiddle.net/4tp7c). Also this does not support the swapping of the link associated with the image. I appreciate the time spent on this and would be really grateful if you were able to point out where I implemented it wrong and/or added link functionality as well. –  Joshua Feb 5 '12 at 23:51
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.