ansaurus

Question

Using jQuery to cycle through 4 banner images contained in 1 sprite

Answer 1

A:

If position: absolute is set on them, they will be positioned based on the first element in their parent chain that has position: relative set. Often, this ends up being the <body /> element. Try setting position: relative on the parent <div id="banner" />.

Annabelle 2010-07-09 23:14:05

Tried setting position: relative on id="banner" without changing anything else in the code and the problem did not go away. Still don't see anything on screen even though Firebug shows the jquery.cycle method running because the divs are constantly having their visibility and z-index changed.

Chris F 2010-07-12 14:45:27

Answer 2

A:

Are you sure you're supposed to be setting the absolute positions? If you look at this demo (http://jquery.malsup.com/cycle/basic.html), the positions are all the same but the z-indexes/opacities/display properties differ.

<div class="slideshow" style="position: relative; ">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" style="position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; z-index: 5; opacity: 0; display: none; ">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" style="position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; z-index: 5; opacity: 0; display: none; ">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" style="position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; z-index: 5; opacity: 0; display: none; ">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" style="position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; z-index: 5; opacity: 0; display: none; ">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" style="position: absolute; z-index: 6; top: 0px; left: 0px; display: block; width: 200px; height: 200px; opacity: 1; ">
    </div>

a.feng 2010-07-09 23:15:01

I'm not setting the positions to absolute, jquery.cycle is. I added the "banner" CSS to demonstrate that I am not setting any position values. It seems to me there must be something missing, otherwise this should just work.

Chris F 2010-07-12 14:55:16

Answer 3

A:

I had a similar requirement and ended up using a plugin I found called innerFade. You can check it out at this URL: http://medienfreunde.com/lab/innerfade/

Sonny Boy 2010-07-09 23:16:28

I tried this, but get the exact same result as jquery.cycle. The cycling is happening, but no images show up. If I use Firebug to remove the "position: absolute" on each div inside of the banner div, then they all show up, but the effect is broken since the fade-in image is below the fade-out image until the fade-out image disappears, and then the fade-in image pops up to the correct position! I'm going to try using 4 separate images and see if that works.

Chris F 2010-07-12 14:57:17

@Chris - Try removing your CSS for the div tags. The jQuery plugin should handle all or most of this for you.

Sonny Boy 2010-07-12 16:33:39

Also, you can check out the markup, code, and CSS for my last site as an example: http://www.matchtech.de/

Sonny Boy 2010-07-12 16:36:43

@Sonny, sorry, but I'm not sure what you mean by "remove CSS" from my div tags. There's barely anything there. I need the background tag. The height tag can be removed, but only because you set it again for the entire #banner using innerfade. The margin and width tags for #banner are necessary.

Chris F 2010-07-12 20:06:57

@Chris - Not FROM your tags, FOR your tags. Remove (or comment) the CSS for the following IDs: #home-banner-1,#home-banner-2,#home-banner-3,#home-banner-4.I suspect the innerFade is working as intended, but your other images aren't showing because you've set the positions to be outside of the visible area.

Sonny Boy 2010-07-15 16:39:45

Answer 4

A:

I was unable to make this work using any of the answers given to date, so my answer to the problem was to remove the sprite and rather than using 4 div tags styled with backgrounds, to use 4 separate img tags pulling 4 separate images. Then everything started to work as advertised.

Chris F 2010-07-13 15:03:27

ansaurus

tags:

views:

answers:

Using jQuery to cycle through 4 banner images contained in 1 sprite

related questions