1) How do I make the transitions smoother? I can never get all the pictures to align properly, so is there a way to make an image jump to exactly left of the image to the right (since it is scrolling left) so that there is no whitespace?

2) I want to make a popup over reach area tag (as you mouse over different sections of the picture, it stops the scroller, and puts a popup over that specific area with a different color). What is the best way to do this?

1 Answer
1

Instead of moving each individual image, you should make an element that contains all the images and move that.

I usually do something like this with image sliders:

Main Slider:

Set size

overflow:hidden

relatively positioned

Image Container:

999999px width (so that float:left will work)

absolutely positioned

Images:

Same size as main slider

float:left

You'll save some draw cycles and write less code if you move only the image container's left property, and you won't get any whitespace glitches.

Also, if it's an option, you should use CSS3 transitions. Older browsers will just see images jumping to the next slide, but modern browsers will get as smooth of a transition that is currently possible on the web. Plus, you won't need to use Javascript for presentation, which we shouldn't really be doing anyway.

I think you slightly misunderstood: I only have 1 image, but I'm using 3 so that I can loop it. When one image gets too far left, it goes to the right making the loop effect. I use 3 images so that there is never space in the middle (2 was too tricky)
–
The PumaNov 22 '12 at 13:43

1

@The Puma Ah. You could try using appendChild to the image every time it disappears from view, and just have the image container itself move continuously to the left.
–
Jeffrey SweeneyNov 22 '12 at 13:45

I actually literally just got it to work. My pixel math was a little off. But I do have another question: how do I make a popup for mouse overing sections of the image? You see how I have it sectioned out? I want each section to have a red box pop over it on mouseover...thank you very much for helping me out
–
The PumaNov 22 '12 at 13:49

@Puma Depends how you want to go about doing it exactly, but mouseover and mouseout events come to mind. I would probably create the popups outside the gallery inside a wrapper, and each popup would be referenced by an attribute defined in each image.
–
Jeffrey SweeneyNov 22 '12 at 14:20

I am doing that, I'm having trouble making the popup go directly over the area though
–
The PumaNov 22 '12 at 14:21