Hi,
Can't find what I am looking for anywhere and it's driving me crazy.
I have a page on which I have 10 spots for images. Each spot needs to fade in/out about 5 images each, in a continuous loop.
I can fade in/out on multiple images in a loop in the one spot, but I am having trouble getting multiple spots working.
If anyone can point me in the right direction I would appreciate it.
Thanks.
What are you using to do the fading? What you may need to do is to create a script in object oriented fashion. Then create an object of the script to handle each spot where you displays images.
OK, I have a script now which kind of works. I have two problems with it:
1) between fadein and fadeout there is no background colour i.e. it is white. How can I make the fade overlap so that there is always something visible?
2) I have realised that the script loops through each <li> to display the bg colours, but then waits to get to the last <li> before starting on the first one again. What I am after is for the backgrounds to rotate randomly and that there is always something on display in each <li>.
Any help would be appreciated.
Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>TEST</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<style type='text/css'>
#rotating-item-wrapper {
list-style-type:none;
margin:0;
padding:0;
height: 150px;
}
li{
float: left;
width: 148px;
height: 150px;
margin: 0 0 0 6px;
padding: 0;
position: relative;
}
li div {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.rotating-item{
display: ;
position: absolute;
width: 148px;
height: 150px;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
var InfiniteRotator =
{
init: function()
{
//initial fade-in time (in milliseconds)
var initialFadeIn = 1000;
//interval between items (in milliseconds)
var itemInterval = 2000;
//cross-fade time (in milliseconds)
var fadeTime = 2500;
//count number of items
var numberOfItems = $('.rotating-item').length;
//set current item
var currentItem = 0;
//show first item
$('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
//loop through the items
var infiniteLoop = setInterval(function(){
$('.rotating-item').eq(currentItem).fadeOut(fadeTime);
if(currentItem == numberOfItems -1){
currentItem = 0;
}else{
currentItem++;
}
$('.rotating-item').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
};
InfiniteRotator.init();
});
//]]>
</script>
</head>
<body>
<ul id="rotating-item-wrapper">
<li>
<div class="rotating-item" style="background-color: red;"></div>
<div class="rotating-item" style="background-color: blue;"></div>
<div class="rotating-item" style="background-color: green;"></div>
<div class="rotating-item" style="background-color: yellow;"></div>
<div class="rotating-item" style="background-color: purple;"></div>
<div class="rotating-item" style="background-color: brown;"></div>
</li>
<li>
<div class="rotating-item" style="background-color: black;"></div>
<div class="rotating-item" style="background-color: green;"></div>
<div class="rotating-item" style="background-color: red;"></div>
<div class="rotating-item" style="background-color: blue;"></div>
<div class="rotating-item" style="background-color: green;"></div>
<div class="rotating-item" style="background-color: yellow;"></div>
</li>
<li>
<div class="rotating-item" style="background-color: red;"></div>
<div class="rotating-item" style="background-color: blue;"></div>
<div class="rotating-item" style="background-color: green;"></div>
<div class="rotating-item" style="background-color: yellow;"></div>
<div class="rotating-item" style="background-color: purple;"></div>
<div class="rotating-item" style="background-color: brown;"></div>
</li>
<li>
<div class="rotating-item" style="background-color: black;"></div>
<div class="rotating-item" style="background-color: green;"></div>
<div class="rotating-item" style="background-color: red;"></div>
<div class="rotating-item" style="background-color: blue;"></div>
<div class="rotating-item" style="background-color: green;"></div>
<div class="rotating-item" style="background-color: yellow;"></div>
</li>
</ul>
</body>
</html>
Not sure what you mean by #1... Do you mean the background color of a fading item becomes white? And you want it to be transparent? Or you want it to fade with the current display background and transform to the new display background color? If the before mention is what you want, you may need to add background-color:transparent to your parent element. If it is the latter, you need more knowledge of how to manipulate the background color and some arithmathic computation.
For #2, if I understand you correctly, you want a random item in the list to be display next, correct? Then you need to update your script line 64~68 where you select the next item to fade in. One thing you need to know is the total number of the rotating items in your list. If you know it, you could do as follows:
// original script line 64~68
if(currentItem == numberOfItems -1) { currentItem = 0; }
else{ currentItem++; }
// change them to...
var rand = Math.floor(Math.random()*(numberOfItems-1)) + 1;
currentItem = (currentItem+rand) % numberOfItems;
The new script line 1 will random a number from 1 up to numberOfItems-1. For example, you have 5 items in the display. The random number will be between 1 and 4. The second line will compute for the next display item number which will never be the same as the one being displayed and always within the range. Hope this help...
Thanks Taywin - your random code addition works beautifully.
The problem I see is that if I let it run for about 20 seconds, I start getting blank spots. It's as if the loop has reached a certain point and the output is blank (why this is I do not know!) and then the code is taking the loop to another <li> element so the blank spot remains until that <li> is active again.
Not sure if this makes complete sense, but if you let the code run for 20-30secs you'll see what I mean. My aim is for there to never be a blank.
Note: I'm using these timings and the fadein/out works fine.
//initial fade-in time (in milliseconds)
var initialFadeIn = 3000;
//interval between items (in milliseconds)
var itemInterval = 1000;
//cross-fade time (in milliseconds)
var fadeTime = 2000;
Note: it is a lot worse in IE8 (haven't tried on IE9 yet)
After using Firebug on FF to check its behavior, it seems that the color is still there, but the opacity value gets lower and lower until it hits the point where it is almost invisible (lower than 0.05). That's when you see the white background. I don't see anything wrong with your part, so I would assume that it is the built-in rotate() function in the JQuery. In other words, the computation of the opacity is incorrect (not attempt to keep it up higher than a certain value). However, I also think that it is an intentional behavior. Not sure how to fix this because I'm not an expert in JQuery. Sorry.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.