tutorial #3: Image Gallery Cycle Plugin

The cycle plugin is commonly used on websites. It is a slideshow that uses transitional effects to rotate through the designated elements. This demonstration will use the same images from the lightbox demonstration for the slideshow.

(Note: the cycle plugin requires jquery.cycle.all.min.js. For more information on this plugin and the different effects, visit: jquery.malsup.com/cycle.)

For this demonstration, you will learn how to create slideshow with cycle plugin. You will learn how to build the jQuery code needed and learn the purpose of each line. Also, you will learn how to create the elements needed to create a slideshow in HTML and CSS.

Below is a demonstration of jQuery cycle plugin. You will see six images cycle though.

The How-To

HTML

                 
<div id="gallery">

<img src="lib/sunset_over_river.png" alt="Sunset over river">
<img src="lib/evening_clouds.png" alt="Evening Clouds">
<img src="lib/stormy_Field.png" alt="Stormy Field">
<img src="lib/american_flag.png" alt="Folded American Flag">
<img src="lib/hockey.png" alt="Street Hockey">
<img src="lib/neighborhood_tiltshift.png" alt="Neighborhood in Tiltshift">
                    
</div>
                 

CSS

#gallery {
box-shadow: 3px 3px 10px #767676;
}

    

jQuery

                
$(window).load(function(){//The webpage is loaded.
  $('#gallery').cycle({
	//The "cycle" method select the element with an attribute of"gallery  
    fx: 'fade'//Sets the transition effect at "fade."
  });
});//Close.