How to Cycle Multiple Effects in JQuery

Captivate site visitors with a slideshow loaded with effects.

JQuery, a powerful JavaScript library, helps site owners around the world build eye-catching Web pages quickly. The jQuery Cycle plugin, described by Cocy Lindley in, "JQuery Cookbook," for example, is one of many free plugins you can use to extend jQuery's capabilities. This plugin allows you to create a slideshow that cycles through multiple transition effects automatically on your Web page. Although it helps to understand jQuery when building jQuery sites, you only need basic JavaScript skills to use the jQuery Cycle plugin.

Instructions

1. Navigate to the jQuery Cycle download page hosted by GitHub, and double-click the first entry in the displayed list to open a Save dialog window. Click "Save" to save the file to your hard drive. The first entry contains the most recent version of the plugin.

2. Paste the following code into the head section of one of your HTML documents to add the jQuery library to your document:

   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

3. Paste the code shown below, replacing "Downloaded_File.js" with the name of the file you downloaded, after the code listed in the previous step:

   <script src="Downloaded_File.js" type="text/javascript"></script>

4. Add the following code to your document's body section, replacing "image1.jpg" and "image2.jpg" with the names of two images on your hard drive:

   <div class="mySlideshow">
   <img src="image1.jpg" width="280" height="280" class="first" />
   <img src="image2.jpg" width="280" height="280" />
   </div>

5. The first three class selectors in the following code define the div container's size and hide the images. The .mySlideshow img selector allows you to tweak the border, background-color and padding around the images. Change these values to anything you like. The padding attribute, whose value is 20px, determines the amount of padding that appears between each image and the container. This value is in pixels. The width and height attribute values match the values set in the body section. Add this CSS code to your document's head section:

   <style type="text/css">
   .mySlideshow {width: 300px; height: 300px;}
   .mySlideshow img { display: none }
   .mySlideshow img.first { display: block }
   .
   mySlideshow img {
   border-width: 2px; border-color: blue; border-style: solid;
   background-color: yellow;
   padding: 20px; width: 280px; height: 280px;
   top: 0; left: 0;
   }
   </style>

6. Add button that call a JavaScript function named cycleEffects and passes it the name of one of the available effects. These buttons also pass the speed at which a transition effect occurs -- 1,000 milliseconds in the example below -- and the number of milliseconds to wait before showing the next image. That value, known as timeout, is 3,000 in this instance. Add these button definitions below the code shown in the last step:

   <input type="button" value="Fade Zoom" onclick="cycleEffects('fadeZoom', '1000', '3000')" />
   <input type="button" value="Shuffle" onclick="cycleEffects('shuffle', '1000', '3000')" />
   <input type="button" value="Toss" onclick="cycleEffects('toss', '1000', '3000')" />

7. Add a function that contains a cycle command to run the chosen effect using the speed and timeout values passed to the function. Paste the cycleEffects function into your document's script section as shown below:

   function cycleEffects(effect, effectSpeed, effectTimeout) {
   $('.mySlideshow').cycle({
   fx: effect,
   speed: effectSpeed,
   timeout: effectTimeout
   });

8. Save the document and view it in a browser.

9. Click the "Fade Zoom" button to begin the slideshow. The Fade Zoom effect causes new images to fade in and the zoom to replace existing images. Click the other buttons to make the slideshow display the other effects.

Tips & Warnings

• You don't have to use buttons to trigger the plugin. Call the cycleEffects function any time you like from any JavaScript statement and pass it the name of the effect you wish to produce. Preview the list of available effects on the JQuery Cycle Plugin Effects Browser Web page.

• Add additional images as needed to the mySlideshow div element.

References

• JQuery Cookbook: Cody Lindley
• Malsup JQuery Cycle Plugin: Beginner Demos

Resources

• GitHub: Downloads for Malsup's Cycle
• Malsup JQuery Cycle Plugin: Effects Browser