Slideshow with javascript without absolute positioning

Question

I need something like this http://jonraasch.com/blog/a-simple-jquery-slideshow

but w/o the absolute positioning. Is it possible?

If not, how do I deal with the absolute positioning - if I make it centered for one screen res, it won't be for another. Any tips?

Answer 1

Whenever you need to place on image on top of another you can do it in one of two ways:

1) Use absolute positioning

The slideshow should be contained within a wrapper element that has position:relative, then the contents of the slideshow use position:absolute. The layout will not be affected because the "absolute" elements are within, and relative to, the wrapper, not the rest of the page.

2) Use one image on top of an element that has a background image

You can make a slideshow easily this way:

• Set the background image to the first frame
• Fade-in the image (the second frame) which is on top of the background
• Set the background to the same image as the second frame
• Hide the second frame
• Swap the SRC of the second frame to the third image
• Repeat