DotNetStories
Looking into the JQuery Cycle Plugin
I have been using JQuery for a couple of years now and it has helped me to solve many problems on the client.
You can find all my posts about JQuery in this link. In this post I will be providing you with a hands-on example on the JQuery Cycle Plugin.
I have been using extensively this plugin in my websites.You can rotate a series of images using various transitions with this plugin.It is a slideshow type of experience.
I will be writing more posts regarding the most commonly used JQuery Plugins.
In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.
You can use Visual Studio 2012 Express edition. You can download it here.
You can download this plugin from this link
I launch Expression Web 4.0 and then I type the following HTML markup (I am using HTML 5)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Liverpool Legends</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<script type="text/javascript" src="jquery-1.8.3.min.js"> </script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function() {
$('#main').cycle({ fx: 'fade'});
});
</script>
</head>
<body>
<header>
<h1>Liverpool Legends</h1>
</header>
<div id="main">
<img src="championsofeurope.jpg" alt="Champions of Europe">
<img src="steven_gerrard.jpg" alt="Steven Gerrard">
<img src="ynwa.jpg" alt="You will never walk alone">
</div>
<footer>
<p>All Rights Reserved</p>
</footer>
</body>
</html>
This is a very simple markup. I have added three photos (make sure you use your own when trying this example)
I have added references to the JQuery library (current version is 1.8.3) and the JQuery Cycle Plugin. Then I have added 3 images in the main div element.
The Javascript code that makes it all happen follows.
<script type="text/javascript">
$(function() {
$('#main').cycle({ fx: 'fade'});
});
</script>
It couldn't be any simpler than that. I view my simple page in Internet Explorer 10 and it works as expected.
I have this series of images transitioning one after the other using the "fade" effect.
I have tested this simple solution in all major browsers and it works fine.
We can have a different transition effect by changing the JS code. Have a look at the code below
<script type="text/javascript">
$(function() {
$('#main').cycle({
fx: 'cover',
speed: 500,
timeout: 2000
});
});
</script>
We set the speed to 500 milliseconds, that is the speed we want to have for the ‘cover’ transition.The timeout is set to two seconds which is the time the photo will show until the next transition will take place.
We can customise this plugin further but this is a short introduction to the plugin.
Hope it helps!!!