Specify Children for jQuery Cycle Slideshows

The jQuery Cycle plugin is a versatile JavaScript plugin for making slideshows.

The default behavior is to fade in a new slide, let the viewer see the slide for four seconds, then fade out that slide as the next one fades in. Slides are faded in and out continuously and in a sequential manner. Unless specified in the options, a slideshow starts with the first slide and cycles through all slides, then loops back to the first slide, running continuously.

Options are available to change every aspect of the slideshow behavior, so the kind and timing of the transitions can be easily changed, as well as the starting and ending slides of the show.

It’s beyond the scope of this post to review all the Cycle options, but one option that may come in handy is the slideExpr option. The default value is ‘NULL‘ and it’s described as the “expression for selecting slides (if something other than all children is required)”.

So far, there are two instances where slideExpr has saved my day. Basically, it lets you specify the children of the slideshow and that’s important if you’re using WordPress or if you’re wrapping slides in links.

WordPress or Other CMS

Using JavaScript inside WordPress posts can be tricky. One has to properly register and queue up the scripts with the methods wp_register_script() and wp_enqueue_script() instead of inserting <script> tags in the page headers.

Still, things may not look right when a post is previewed because of the way that WordPress assembles the pages we see on the World Wide Web. WordPress or another content management system (CMS) may insert line breaks that interrupt the flow of a slideshow.

Remember, with the Cycle plugin every child element inside the slideshow container will become a slide. That means every CMS inserted <br /> will be treated as a slide. This produces a slideshow with long, blank pauses in between the actual slides, like the slideshow on the left below, #show_a.

Use slideExpr to specify the children elements for slideshows in WordPress. This avoids extraneous elements from the content management system from being interpreted as slides. See the slideshow on the right below, #show_b.

HTML Markup:

one two three four five

 

one two three four five

 

one
two
three
four
five

 

one
two
three
four
five

 

 

The left slideshow, #show_a, shows a few different transitions without using slideExpr, which gives a background-colored pause or blank pause in between each slide. This slideshow assumes the first-level children are the elements to be manipulated in the slideshow.

The right slideshow, #show_b, shows the same transitions with slideExpr set to ‘img’. This gives the expected behavior where only the images, <img>, are treated as slides, not any other element that may be inserted by WordPress or by the developer.

JavaScript:

Wrapping slides

If you’re not using WordPress or another CMS, there may still be unexpected behavior with the Cycle plugin with respect to children of the slide show.

Any children in a container element can be used as a slide with the jQuery Cycle plugin. Designers can get as fancy or as funky as they want to with their slideshows because they ultimately have complete control. If you want to wrap each image in an anchor which is wrapped in a styling div, that’s ok.

Just remember to use slideExpr: ‘img’ if it is the images that you want to transition from slide to slide. HTML Markup is very similar to that above with different container ids for JavaScript and CSS targeting.

one
two
three
four
five

 

one
two
three
four
five

 

 

In this example the slideshow on the left, #show_1, uses the ‘fadeZoom’ transition effect without slideExpr. Slideshow #show_2 on the right uses the ‘fadeZoom’ transition effect with slideExpr: ‘img’. Note how the actual transition effect is different depending on which element is serving as the slide.

JavaScript:

Note the empty paragraph in the HTML markup for each slideshow. Without specifying the slideExpr option, as in #show_1, the empty paragraph is treated as a slide and a blank space is shown for it. Slideshow #show_2 specifies that the images are to be the sliding elements, so no blank space is seen.

Certain transition effects problems may appear when wrapping slides with links in jQuery Cycle. Using the slideExpr option is an easy solution.

jQuery Cycle Plugin Working with Links

The Cycle plugin for use with the jQuery library can be described as a robust, mature and versatile JavaScript plugin. Plentiful options allow every aspect of a slideshow created with Cycle to be modified.

For interactive slideshows where you’d like the user to be able to click on a slide to get more information, wrap an anchor around each slide. Then, when the user clicks on a slide they will be shown the target link. You could show the user a larger image, an expanded view of a portion of the image, or more descriptive text about the slide.

The markup is straightforward, using an unordered list of links:

Transition Effects Problem

Wrapping anchors around each slide makes them clickable, but that introduces a potential problem when using the Cycle plugin. Some of the transition effects just won’t work as expected. In this example the children that will be manipulated inside the #show container are the anchor links, not the images. Even though we know it’s supposed to be the images that are to be swapped in and out of this slideshow, technically, the children that will be swapped are the anchors, and that makes a difference in how things will look. Images are contained inside the anchors, so the images won’t be manipulated, just the anchors.

Most of the available transition effects modify the size of the slide’s width and/or height to achieve the desired effect. When an anchor is wrapped around an image, the anchor’s size can be manipulated, but the contained image won’t be resized. If one of the transitions that manipulate the slide width or height has been called, the effect won’t be seen as intended.

For example, the two slideshows below use the same HTML markup, except for having different container ids, which are targeted by the script and the CSS. Images are wrapped by <a> in both the left and right slideshows below.

Here’s the HTML Markup for the example slideshows below:

one two three four five

 

one two three four five

 

Using one of the turn effects illustrates how the different children behave. The slideshow on the left is manipulating anchors, while a slight change in the script allows the slideshow on the right to manipulate the images. Both slideshows below use the turnDown transition effect.

Watch each slide transition and you’ll see that the one on the left doesn’t show any turning behavior as the top slide is dragged off the lower slide. In the slideshow on the right the turnDown effect can be seen as the images are manipulated in a way to make it look like the next image is being turned down from above.

one
two
three
four
five

 

one
two
three
four
five

 

 

This phenomenon happens using the jQuery Cycle plugin when an anchor, <div>, or any other tag wraps around the images, in effect taking their place as children of the slideshow container.

slideExpr Solution

One solution is to use the slideExpr option. The default value for slideExpr is ‘NULL‘ which indicates that the default children will be manipulated as the slides, as in the slideshow on the left.

The slideshow on the right, #showright, has specified the option slideExpr: ‘img’ to assure that the <img> should be treated as slides, see line 11. By specifying which element should be treated as the children of the slideshow container, the transition fx can be seen as intended.

Slideshows can use any content for slides, so remember that extra elements in the slideshow container will be treated as slides. Inspect the HTML markup above and take note of the blank paragraph in each slideshow container. The default slideshow on the left, #showleft, assumes that the <p> is a child that is part of the slideshow, so it shows a blank paragraph after the last slide. Only images are slides in the slideshow #showright, so its behavior is to wrap around to the first <img>, instead of showing the blank paragraph as the last slide.

fx Solution

Another way to avoid the transition effect problem is to stick with the slide transitions that aren’t affected when using wrappers around slides. When the design requires wrapping slides in anchors or divs, pick from the subset of transition effects that doesn’t modify the image size. To see the true effects use fade, scrollUp, scrollDown, scrollLeft, scrollRight, and shuffle for slide transitions.

Note: The blank spaces between each slide in #showleft are due to the way that WordPress assembles a webpage or post. Use slideExpr with WordPress to avoid having WordPress-injected elements acting as slides in slideshows with the jQuery Cycle plugin.

Centering Slideshows with jQuery Cycle Plugin

The jQuery Cycle plugin is a JavaScript plugin that will help you make beautiful slideshows. There are a ton of options for the Cycle plugin to help you make really nice-looking and functional slideshows.

This example will show the steps to take for centering slides in a slideshow using the Cycle plugin. HTML markup in this case is a group of images inside a <div> container. CSS is used to give some style to our slideshow and for centering everything. JavaScript is used to control the transitions of the slides and the animation of the slideshow.

HTML Markup:

runaway artist darling kittens dog in sun cat in tree

A basic slideshow might have a few images that are cycled through in sequential fashion with random special effects that bring each photo into view. The JavaScript code that could be used with the jQuery Cycle plugin for such a slideshow could be as follows:

JavaScript:

jQuery(document).ready(function($) {
 $('#showy').cycle({
  fx: 'all',
  speed: 800,
  pause: 2000,
  slideExpr: 'img'
 });
});

So far, we’d get a mess if no CSS rules targeted the slideshow.

runaway artist
darling kittens
dog in sun
cat in tree
 

Without at least giving dimensions to the slideshow, via width and height properties, the Cycle plugin will be helpless to show the images correctly. Make sure to add width and height values to the slideshow container in the CSS rules.

Also, you’ll need to specify the position property. In this case we’re giving a value of ‘relative’ instead of ‘absolute’ for the position property as we want to center the slideshow instead of placing it at some exact location. Without specifying the position of the slideshow container, some of the transition effects won’t be seen as intended.

The trick to centering the slideshow is to set the margins. Give the right and left margins a string value of ‘auto’ to center things horizontally. The top and bottom margins are given a numerical value, 10 px in this case.

CSS:

#showy {
position:relative;
height:300px;
width: 300px;
margin: 10px auto;
}

Using these simple CSS styling rules, we get a more pleasing slideshow experience.

one
two
three
four
 

JavaScript Plugin: jQuery Cycle for Slideshows

JavaScript plugins can definitely speed up development of a website, but unless you take the time to explore the plugins you’re using, you may not be using them to full advantage. Read on to learn more about using the jQuery Cycle plugin for slideshows. It works with jQuery v1.3.2 and later.

cat in snow
cat in tree
darling kittens
baby sixtoes
 

The jQuery Cycle Plugin offers an amazing number of transitions for your next slideshow. If any of the two dozen transitions don’t give the effect you’re looking for, the plugin can always be modified to suit. If you’re looking to make some unique transitions, check out the advanced demos on the plugin site.

Over 50 options can be implemented to show your slides in the best light. Options are available for controlling the speed of the transitions, the length of time between slides, as well as running the slideshow backwards or stopping after a certain number of slides have been shown.

Slides can be forced to fit a container and made to be manually paused and resumed. Easing transitions can be specified as can random showing of slides. Options in Cycle are plentiful and definitely worth investigating.

Command strings can be used to pause or resume the slideshow or advance to the next or previous slides. Tie these commands to a click event to let your visitors see the show as they wish.

The Cycle plugin works with two assumptions in creating slideshows. First, it assumes that a container object has been identified, usually via a class or id identifier, that will contain the slides for the slideshow. All children of the containing parent will become a slide.

Second, the slides must all be children of the container. Any object can be a child here, so textual content, images, anchors and divs can all be manipulated and viewed as slides in your slideshow. Don’t put anything else in the slideshow container unless you want it to become part of the slideshow.

Here’s the HTML markup that could be used for a simple slideshow of images:

one two three four five

The images are contained in a specific container, div#show, which can be styled with CSS. Giving the container and the slides fixed dimensions works best, so make sure to specify the widths and heights.

The default behavior is to fade slides in and out of the container in a continuous and sequential manner, in a cyclical way. So, we’re going to ‘cycle’ through the slides in this slideshow. The javascript for a slideshow using default behavior is simple:

$('#show').cycle();

With Cycle plugin default settings the slideshow starts with the first image or slide and each slide takes one second, or 1000 milliseconds, to be faded in. Each slide is then paused for 4 seconds and then faded out in one second. The slideshow wraps around so that the first slide will be shown after the last one. The fading in and out action occurs continuously and indefinitely with the default settings, as below:

cat in snow
cat in tree
darling kittens
baby sixtoes
 

To alter the slideshow behavior pass an effect, other than fade, as a string to the cycle method, like so:

$('#show2').cycle('shuffle');

Check out all the effects that can be used to transition slides: blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, scrollUp, scrollDown, scrollLeft, scrollRight, scrollHorz, scrollVert, shuffle, slideX, slideY, toss, turnUp, turnDown, turnLeft, turnRight, uncover, wipe, and zoom.

Several transitions can be combined in a comma-separated list if you can’t choose just one. Or, use the string ‘all’ to see all the slide transition effects in a random manner.

Alternatively, you can use an options object to set the fx option among others. The code below specifies fade, zoom and curtainY effects to bring the slides in and out of the container. Each slide will be brought in slowly (800 ms) and taken out quickly (400 ms) taking a total of 3 seconds for each complete transition. This is the code for the slideshow (#show3) at the top of this post.

$('#show3').cycle({
  fx: 'fade,zoom,curtainY',
    speedIn: 800,
    speedOut: 400,
    slideExpr: 'img'
    timeout: 3000,
    nowrap: true
});

The parameter slideExpr is given a string value of ‘img’ in order to produce a slideshow without long blank pauses in between slides when using WordPress. WordPress and other content management systems may introduce extraneous markup when preparing webpages. The markup may be incorrectly interpreted by different browsers used to view slideshows created with Cycle, so it’s become important to specify the elements that are supposed to be cycled in the slideshow. Thus, the addition of slideExpr: ‘img’ as an optional parameter is necessary for image slideshows in WordPress.

The slideshow just above will be shown only one time and end with the last slide because the nowrap option is set to true. This might be a good thing to remember for leaving a textual message on the screen with your last slide instead of having the slideshow run indefinitely.

If you get stuck or need a little help with figuring out how to work the Cycle plugin, visit the jQuery Forum.