jQuery Cycle Implimentation

In this example, we will build a simple slideshow using jQuery and the cycle plugin.

The Foundation

In your webroot create a new folder named cycle.

In the cycle directory, create your subdirectory structure (assets directory with subdirectories)

In an editor of your choice, create a new HTML document (html5 doctype) | Starter HTML

In the body, create the structure for your content. The way the Cycle plugin works is that it will look take the children of the declared element and cycle through them using the parameters defined by your JavaScript.

<section class="gallery">
  <img src="assets/img/1.jpg" alt="Mars Perseverance"> 
  <img src="assets/img/2.jpg" alt="Mars Perseverance"> 
  <img src="assets/img/3.jpg" alt="Mars Perseverance"> 
  <img src="assets/img/4.jpg" alt="Mars Perseverance">
  <img src="assets/img/5.jpg" alt="Mars Perseverance"> 
</section>

Add some CSS to spruce things up…

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
	background-color: #000;
}
.gallery {
	background-color: #212225;
	width: 830px;
	margin-top: 40px;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #999;
	height: 670px;
	overflow: hidden; /*Avoids showing all of the images momentarily while JS loads */
	border-radius: 6px;
}
.gallery img {
	margin: 15px;
}

Adding the JavaScript

Include jQuery from the Google CDN. This script tag can be placed in the head of the document or before the closing HTML tag. Make sure that it precedes the call to the plugin we’ll include in the next step.

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

Include Cycle from the CDNJS.com

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.03/jquery.cycle.all.min.js"></script>

Setting up the JavaScript Calls

Create a new file called local-calls.js and save it in the js directory.
Include the jQuery wrapper function to make sure the document has fully loaded prior to calling the script.

$(document).ready(function() {

// Your code goes here...

});

Include this file in the head of the document following the jQuery and Cycle calls.

<script src="assets/scripts/local-calls.js"></script>

In the local-calls.js file, include the following…

   
$('.gallery').cycle({
		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	});

Note that we are binding the script to the .gallery element. If you used a different naming convention you would need to change this to reference that element. Play around with the effects by adding different parameters to the script. Use this page for reference.

Thomas Wallace

Lectures and Resources