Continuous rotating images using css

I'm trying to create a group of 5 images on a clients homepage that infinitely loops and fades in and out. The fade in and out isn't a requirement but definitely a bonus.

I found one solution that worked perfect except the client was unhappy with the load time. here is the page.http://newhomeliposuction.com/index-testanimation.asp
I got the code from here. http://trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/

I found another solution that works on my HTML site but won't work on his ASP site. At least I think that's the reason.
this is the ASP page: http://newhomeliposuction.com/index-testanimation5.asp
this is the HTML page: http://www.jcarterjones.com/animation-script3.html

Thanks for the help! I apologize if this is mentioned anywhere on this site. I did a brief search and didn't find anything.
jcj

 

The massive images used in image rotators are an inherent part of why they are slow, and part of why I don't beleive in putting that nonsense on websites (the other being forcing yourself into an inaccessible fixed width).... It gets worse when you add the endless pointless jquery bloat to a page, wait for onload to start the functionality, etc, etc...

I put one together quickly for another user not that long ago:
http://www.cutcodedown.com/for_others/tksForLife/template.html

that's only 5k of javascript and a handful of CSS to make it work. The directory:
http://www.cutcodedown.com/for_others/tksForLife/

is open so you can extract the bits and pieces to try it if you like.

As you can see the markup to make it work:

<div id="homeBanner" class="imageRotate">
	<img
		src="images/homepage/everafter_clipped.jpg"
		width="100%"
		alt="Married couple on the Beach"
	/>
	<img
		src="images/homepage/burstofcolor_clipped.jpg"
		width="100%"
		alt="Colorful Flower"
	/>
	<img
		src="images/homepage/ido_clipped.jpg"
		width="100%"
		alt="Couple holding hands during marriage Ceremony"
	/>
</div>

Code (markup):

Is really simple, the scripting you add right before </body> is simple as well:

<script type="text/javascript" src="imageRotate.js"></script>
<script type="text/javascript">
	imageRotate.add('homeBanner');
</script>

Code (markup):

It's capable of running multiple image rotators on a page as well, just target them with the .add method by ID.

CSS actually does most of the heavy lifting.

Still, by their very nature the massive image rotating nonsense is fat, bloated, slow, and accessibility headache and not something I believe in having on websites in the first place. I would seriously consider axing the entire concept; much less that if you have that, dimes to dollars you also have a fixed width layout making it need to be thrown out and started over anyways. (though that's a wild guess)

 

Thanks for the help! Works great!

Unfortunately the client loves the looping images and he's also unwilling to drop the fix width. He still loves to scroll the page endlessly. It disgusts me.

One last question. On my test page there is a thin line below the images still.
http://www.jcarterjones.com/animation-script4.html

How can I remove this?

thanks again for your help and quick response. All suggestions are duly noted.
jcj

 

If you're referring to the thin black line, then you'll need to look at

.imageRotate img { }

Code (markup):

and replace 'border' to '0'

 

It's probably this:
.imageRotate img {
display:block;
border:solid #000;
border-width:1px 0;
}

But I'm not sure, having trouble isolating it in firebug or dragonfly

 

I changed the border width to '0' and that worked.

Thanks again!

 

A question for you deathshadow (forgive me if this is terribly obvious but i've just started playing with css & jquery:

I've reduced the image size in my code to about 70% and center aligned the div, so there is some white space around the images.
Now in this case, when the 2nd image replaces the first, a part of the 1st image is still visible, it doesn't overlap the image but is still present(due to the z-index value I presume: Image attached)
I'd like this to disappear when the 2nd image comes on screen. How do I achieve that?

 

Update: Figured it out

Setting the z-index value to -1 worked.

 

Whilst playing with z-index will kind-of fix it (as you discovered) the better approach is to keep those images as width:100% and height:auto, and instead resize the DIV around them so the images size to the DIV. Then you won't see those positioning issues.

Basically, leave the img tags dynamic, adjust the CONTAINER instead. Really that's the rule for all dynamic layouts.

 

Yeah, that makes a lot of sense. I'll do that instead!
Thanks deathshadow, appreciate the assist.