multiple jQuery Cycle slideshows get superimposed

Question

I'm using the jQuery cycle plugin to create multiple slideshows on a single page (which, once I get this problem figured out, will be started/stopped by mouse hover -- yeah, I know there are 9 slideshows on the page).

Problem is, when I tell more than one slideshow to start cycling, whichever ones I call cycle() on get superimposed. So, all the images from slide 1 are superimposed, then they all transition to slide 2, etc. I can tell they're being superimposed because the first slide of each slideshow contains a transparent PNG.

This happens whether I call cycle() in a jQuery each() iterator, or even if I call it by hand on just two or three of the containers with a jQuery id selector.

The relevant page is http://zi.ma/cycle

Answer 1

Just add this to your CSS:

.column { position: relative }

The Cycle plugin is setting an absolute positioning on the slideshows, which will be in relation to the first parent element that has either position: relative or position: absolute. So by setting position: relative on the .column class, it contains the slideshow to its 0,0 coordinates and subsequently keeps them from overlapping each other.