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
Script
Css
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>
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.
ReplyDeletethanks mate
ReplyDelete