October 21, 2012

Create Blogger Static Slideshow With Jquery


Image slideshow is looking good for people who want make some photo album posting or for people who want insert more than one image to they posting page.

My posting here will show you how we can create an static image slideshow using Jquery on blogger blogpsot.

You can create it with simple steps, copy this code below and place it wherever you want, like your index page, your widget or your posting.

<!-- Image slideshow start -->
<p style="display:none">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  /* remove if you have jquery before */
<script type="text/javascript" src="http://dasargw.googlecode.com/files/jquery-slider.js"></script><script type="text/javascript">
$(document).ready(function(){
$('.slideshow').cycle({
fx: 'scrollLeft', /* another directions : scrollRight, scrollUp, fade, shuffle, scrollDown */
timeout: '6000'
}
);
}
);
</script></p>
<div class="slideshow" style="width:550px;height:250px;">
<a href="javascript:;"><img src="YOUR-IMAGESRC-URL" /></a>
<a href="javascript:;"><img src="YOUR-IMAGESRC-URL" /></a>
<a href="javascript:;"><img src="YOUR-IMAGESRC-URL" /></a>
<a href="javascript:;"><img src="YOUR-IMAGESRC-URL" /></a>
<a href="javascript:;"><img src="YOUR-IMAGESRC-URL" /></a>
 /* you can add more images here */
</div>
<!-- Image slideshow end -->

If you want see how this code work on posting page, you can click the demo link below:

Slideshow With Jquery Demo

That's it, if you have a problem with this, feel free to leave a comment here.
Thank You.

No comments:

Post a Comment