How to Implement Image Transition Effects Just by Loading jglycy-1.0.js and jquery.cycle.js Files

In this article, I will introduce a method to implement image transition effects by simply loading the jglycy-1.0.js and jquery.cycle.js files.

JavaScript Code to Implement Image Transition Effects by Loading jglycy-1.0.js and jquery.cycle.js Files

Load jquery.min.js, jglycy-1.0.js, jquery.cycle.js, and jquery.easing.min.js files.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="jglycy-1.0.js"></script>
<script src="jquery.cycle.all.js"></script>
<script src="jquery.easing.min.js"></script>

CSS Code to Implement Image Transition Effects

Change as necessary.

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:2.0em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:600px;
	margin:0 auto;
	text-align:center;
}
-->
</style>

HTML Code to Implement Image Transition Effects

Here, I have implemented two patterns of image transition effects: “Fade In/Fade Out” and “Zoom In”. Add the attribute jg=”cycle” to the tags for the “Fade In/Fade Out” area, and jg=”cycle” jg:cycle=”fx:’zoom’,delay:-2000″ to the tags for the “Zoom In” area.

<div id="idWrap">
    <h1><a href="jquery.cycle.all.js" target="_blank" title="jquery.cycle.all.js">jquery.cycle.all.js</a> and <a href="jquery.easing.min.js" target="_blank" title="jquery.easing.min.js">jquery.easing.min.js</a> plugins are loaded to implement image transitions.</h1>
    
<!--Fade In/Fade Out-->
<div style="height: 300px; width: 300px; padding: 0; margin: 0; float:left;" jg="cycle">
<img src="i1.jpg" width="300" height="300" />
<img src="i2.jpg" width="300" height="300" style="display:none;" />
<img src="i3.jpg" width="300" height="300" style="display:none;" />
</div>

<!--Zoom In-->
<div style="height: 300px; width: 300px; padding: 0; margin: 0; float:left;" jg="cycle" jg:cycle="fx:'zoom',delay:-2000">
<img src="i1.jpg" width="300" height="300" />
<img src="i2.jpg" width="300" height="300" style="display:none;" />
<img src="i3.jpg" width="300" height="300" style="display:none;" />
</div>
    
</div><!--/idWrap-->

Demo Page Implementing jQuery Plugins and Effects Without Writing JavaScript

Demo Page Implementing jQuery Plugins and Effects Without Writing JavaScript

Source: jQuery Cycle Plugin

jQuery Cycle Plugin

　
Please use this at your own risk. Do not use the Google Analytics tag within the demo page tags.