‹‹ cycle homejQuery Cycle Plugin - slideExpr Demo

The 'slideExpr' option is handy when using Cycle on a page where you don't control the markup (ie: a CMS). Some systems generate superfulous markup that can cause problems for Cycle. By default, Cycle assumes that each immediate child of the slideshow container is a slide. But consider the following markup (from a real-world CMS, and hence the reason for this option):

<div id="slideshow" class="pics">
    <font size="-1">
        <img src="images/beach1.jpg" width="200" height="200" />
        <img src="images/beach2.jpg" width="200" height="200" />
        <img src="images/beach3.jpg" width="200" height="200" />
    </font>
</div>

The markup above is not how the user entered it, but rather is how it was interpreted by FireFox because the CMS wrapped the 'slideshow' div in a <font> tag. FireFox saw that and said, "That's not allowed. You can't wrap a block element with an inline element. They must want the contents of the block element wrapped with a font."

Of course, that's not at all what the author of the content wanted. And it prevented the slideshow from working because Cycle found only a single child element of the slideshow container.

The 'slideExpr' option lets you tell Cycle which elements to choose as slides, rather than defaulting to the immediate children of the container. In the example below, we run Cycle using the markup shown above but we tell it to only select <img> elements as slides:

$('#slideshow').cycle({ slideExpr: 'img' });