loading...

Sunday, November 28, 2010

How to add jquery Rotating Image Slideshow to blogger

Rotating Image Slideshow  is created by Martin Angelov coded with css3 and jquery.Thanks for the great tutorial and i have used the code and converted it to be used for blogger.On  how the code works look the above link.Here is the Demo Rotating Image Slideshow in blogger.
How to add jquery Rotating Image Slideshow to blogger

Note:Latest jquery.js should be added  before </head> 
HTML
<div id="slideShowContainer">

<div id="slideShow">

<ul>
<li><img alt="Fish" src="http://dl.dropbox.com/u/13256471/rotating-slideshow/img/photos/1.jpg" width="100%" /></li>
<li><img alt="Ancient" src="http://dl.dropbox.com/u/13256471/rotating-slideshow/img/photos/2.jpg" width="100%" /></li>
<li><img alt="Industry" src="http://dl.dropbox.com/u/13256471/rotating-slideshow/img/photos/3.jpg" width="100%" /></li>
<li><img alt="Rain" src="http://dl.dropbox.com/u/13256471/rotating-slideshow/img/photos/4.jpg" width="100%" /></li>
</ul>

</div>

<a href="#" id="previousLink">»</a>
<a href="#" id="nextLink">«</a>

</div>

Script
<script src="http://dl.dropbox.com/u/13256471/rotating-slideshow/js/script.js">
</script>
<script src="http://dl.dropbox.com/u/13256471/rotating-slideshow/js/jquery.rotate.js">
</script>

Css
<style>
#slideShowContainer{
 width:510px;
 height:510px;
 position:relative;
 margin:120px auto 50px;
}

#slideShow{
 position:absolute;
 height:490px;
 width:490px;
 background-color:#fff;
 margin:10px 0 0 10px;
 z-index:100;

 -moz-box-shadow:0 0 10px #111;
 -webkit-box-shadow:0 0 10px #111;
 box-shadow:0 0 10px #111;
}

#slideShow ul{
 position:absolute;
 top:15px;
 right:15px;
 bottom:15px;
 left:15px;
 list-style:none;
 overflow:hidden;
}

#slideShow li{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
}

#slideShowContainer > a{
 border:none;
 text-decoration:none;
 text-indent:-99999px;
 overflow:hidden;
 width:36px;
 height:37px;
 background:url('http://dl.dropbox.com/u/13256471/rotating-slideshow/img/arrows.png') no-repeat;
 position:absolute;
 top:50%;
 margin-top:-21px;
}

#previousLink{
 left:-38px;
}

#previousLink:hover{
 background-position:bottom left;
}

a#nextLink{
 right:-38px;
 background-position:top right;
}

#nextLink:hover{
 background-position:bottom right;
}
</style>

2 comments:

  1. Good blog with very good posts on it it gives the total knowledge that everyone wants to know, It has given me everything that i wanted i had become a big fan of this blog and now i am going to bookmark this blog so that i can visit daily.

    ReplyDelete

fuzionpro Headline

fuzionpro