http://www.zooprinting.com/welcome

the section with 5 things that rotate
starts with "free design online"

i need to make an element like that on my site, and i'm pretty handy at googling until i find the script i'm looking for and making it work, but i can't figure out what in the world to call that. it's commonly used but i just can't seem to get my search terms right.

anyone know where i can find said script?

"Carousel"

But that carousel is simply a carousel of <div>s as opposed to the more traditional carousel of straight images.

p.s.: It's really pretty easy to do.

I might give this a go

I suppose it requires three containers (divs)?
1. An outer container of a set width (to confine the visible content)
2. An inner one of fixed width and height, and overflow:hidden to hide images that fall outside its width
3. A further one to contain all images of no set width, but a height that fits within the container 2.

All images then have 'float:left' so they stack next to each other (spilling over to the right).

Two arrows (left and right) that are positioned absolutely within the inner div (2). They would use mouseover/out (or enter/leave) to cause the animation or stop it.

The thing I think I'm missing is the actual animation (the important bit!). Would it use setTimeout to progressively increase or reduce the 'left' position of the left-most image? Or maybe the left-margin?

The mouseout would, presumably, just cancel the timeout?

If the images were stored (cached) into an array on page load, then imgArray.length could be stored as a global to identify the last image. This value would then be used to identify the last image (of a certain class) - although this may not be necessary.

Am I thinking along the right lines?

No, I don't think you would do something like that example in that way.

You *could*, but I wouldn't assume you'd do it all with images.

For example, if you wanted to have links from one of the carousel segments to another site or another part of the same site, if you used only images you'd be stuck using <map> and <area> for something simple.

I would think you would just use nested <div>s.

Like this:

Code:

<div style="position: relative; width: 800px; height: 200px; border: solid black 2px;">
    <div style="position: absolute; width: 800px; height: 200px; display: block;">
        ... contents of panel 1
    </div>
    <div style="position: absolute; width: 800px; height: 200px; display: none;">
        ... contents of panel 2
    </div>
    <div style="position: absolute; width: 800px; height: 200px; display: none;">
        ... contents of panel 3
    </div>
    <div style="position: absolute; width: 800px; height: 200px; display: none;">
        ... contents of panel 4
    </div>
</div>

And then you *could* simply use setInterval and, at the end of each interval, you change display of the currently visible div to "none" and the display of the next in sequence to "block".

That would work, but it's crude.

Instead, you'd want to change the *opacity* of the currently visible one slowly from fully opaque to fully transparent while, at the same time, changing the opacity of the next panel in sequence from transparent to opaque.

Notice that the problem with side-by-side images (or divs...same concept) is that you can't fade one in on top of another.

Ahhh...looked at the code that "Zoo Printing" is using.

Shame on them! They do it this way:

-- fade the current div contents to transparent
-- REPLACE the current div contents by changing the innerHTML thereof
-- fade the new current contents to opaque

That works, but it's ugly to keep changing innerHTML like that.

I like my answer better.

Slight confusion here. I was referring to the "carousel" - the collection of images that scroll left or right.

Re-reading the op I notice he was referring to the fading in and out of images, above the carousel that I took you to mean. Perhaps they are both called carousels - one fading and one sliding

Oh, DOH on me.

I read "free design online" to mean he is talking about the <div>s.

But who knows. Maybe he will never come back and we never will know.

So would you re-visit my outline for creating the sliding carousel

Oh, sure, that's a fine way.

The only thing I add to my own is that I allow the user to continuously scroll in either direction. That is, if he scrolls off the left end it just continues back to the first image.

One easy way to do that is to have *two* image strips, side by side, and when the first one has scrolled completely off the screen on the left, you move it to the right of the other one. And vice versa.