Jquery image slideshow
Hi guys you might say that “Oh no! not another image slideshow” yes I know. I have made this plugin for me to keep things simple and use what exactly what is needed. Imagine using 2kb plugin I think less if compress. That’s a big discount ahahahahaah! I hope you got my point. Hey I’m not a fully, king or master javascript programmer I’m just starting up. So if you guys have a nice idea or good approach might as well share it in the comment. I might enhance this plugin by adding paging and more effects in transition. In the future I think.
Jquery Code :
$(function(){ $('#container').slideShow({ container: '.cont', items: '.item', fade: 5000, /* Fading of images */ transition: 4000 /* transition of each images */ }); });
CSS :
#container { height:335px; width:500px; overflow:hidden; position:relative; } .cont { height:335px; position:absolute; } .item { width:500px; height:335px; display:none; position:absolute; left:0; z-index:0; } .current { z-index:2; display:block; }
HTML :
<div id="container"> <div class="cont"> <div class="item"><img src="images/3888886475_79f6ec6fa4.jpg" width="500" height="335" /></div> <div class="item"><img src="images/3884814086_ab27bb2f7a.jpg" width="500" height="335" /></div> <div class="item"><img src="images/3884022159_7eca2c92a9.jpg" width="500" height="335" /></div> <div class="item"><img src="images/3884989133_2dd993518a.jpg" width="500" height="335" /></div> <div class="item"><img src="images/3889679176_8efb27feb0.jpg" width="500" height="335" /></div> <div class="item"><img src="images/3888886073_3e962efb9b.jpg" width="500" height="335" /></div> <div class="item"><img src="images/3888886271_6106cd0cd4.jpg" width="500" height="335" /></div> </div>