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>
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
Sidebar
jQuery
CSS
No changes.
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
HTML
CSS