How to Create a Slideshow With Jquery Cycle Plug In

jQuery Cycle Plugin is a Plug In Slideshow light and pretty awesome. This plugin provides a method of calling in cycles that are involved in a container element, in which each element of the container into a slide.

If you are interested in using jquery slideshow with the cycle plugin for bloggers in particular friend or website please follow the steps below.

1. As usual my friend must log in first to blogger

2. select design

3. Then select Edit HTML

4. check the Expand Widget Templates and backup first your templete (to avoid the event of any errors)

5. Copy the code below and paste the code above </ head> or below the code ]]></ b: skin>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"> </script>
<script type="text/javascript" src="http://my-slideshow.googlecode.com/files/jquery.cycle.all.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({
fx: 'cover',
speed: 500,
timeout: 2000
});
});
</script>

6. For the CSS code below, copy and paste this code above ]]></ b: skin>

#myslides {
width: 370px;
height: 220px;
padding: 0;
margin: 0 auto;
}

#myslides img {
padding: 10px;
border: 1px solid rgb(100,100,100);
background-color: rgb(230,230,230);
width: 350px;
height: 200px;
top: 0;
left: 0
}

CAUTION

You can edit the CSS code above in accordance with the width you want for example (width slidshow / image) and height (height slideshow / images)

7. The last step is to install the HTML code below where you want to put SlidShow by adding gadgets.

<div id="myslides">
<img src="http://weblearning27.blogspot.com/files/water.jpg" />
<img src="http://weblearning27.blogspot.com/files/fire.jpg" />
<img src="http://weblearning27.blogspot.com/files/air.jpg" />
<img src="http://weblearning27.blogspot.com/files/ground.jpg" />
<img src="http://weblearning27.blogspot.com/files/lightning.jpg" />
</div>

CAUTION

code yellow is the address of the image. Please change the address of your image.

Read also this....