Contactez-nous
Kitpages
17 rue de la Frise
38000 Grenoble
tel : 04 58 00 33 81
kitSlideshow, jQuery plugin
Introduction
A slideShow here is a horizontal presentation of several contents (pages).
Features :
- Easy to install
- you can put any content in the pages (images, divs, iframes,.. whatever...)
- extendable with events
- compatible IE6 + and any modern browser (including mobile browsers)
Download the plugin
This plugin can be downloaded on Github : jquery_kitSlideshow
Demo
This is not very sexy, but I don't have time to code something better right now...
You can see another example on this page http://www.kairosagency.com/en/cms/16/our-clients
Code sample
Let's see some code sample.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Example kitSlideshow</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script> <script src="../jquery.kitSlideshow.js"></script> <link rel="stylesheet" href="../css/kitSlideshow.css"/> <style> .myslideshow { width: 200px; height: 210px; overflow: hidden; } .el { display: inline-block; zoom: 1; *display: inline; background-color: #CCCCCC; margin: 2px; padding: 20px; } </style> </head> <body> <h1>kitSlideshow</h1> <div class="myslideshow"> <div class="el"> div No 1 </div> <div class="el"> div No 2<br/> <a href="http://www.kitpages.fr"><img src="kitpages_small.jpg"/></a> </div> <div class="el"> div No 3 </div> <div class="el"> div No 4 </div> <div class="el"> <iframe href="kitSlideshow.html" width="50" height="60"></iframe> div No 5 </div> <div class="el"> <iframe width="210" height="157" src="http://www.youtube.com/embed/lBcORwcCf8I" frameborder="0" allowfullscreen></iframe> div No 6 </div> <div class="el"> div No 7 </div> <div class="el"> div No 8 </div> </div> <script> $('.myslideshow').kitSlideshow(); </script> </body> </html>
Configurations
You can configure several options :
$('.myslideshow').kitSlideshow({ // durations moveDelay: 50, // time in ms between moves // speed animationSpeed: 300, // duration of the animation in ms // size wrapperMaxWidth: 10000, // width of the entire div which will scroll inside your div wrapperMaxHeight: 10000, // idem for height animationStepWidth: "auto", //step in px of the animation // keys keyCodeLeftArrow: 37, // from http://www.javascripter.net/faq/keycodes.htm keyCodeRightArrow: 39, // events render: null, // callback after rendering of dom (called very often during a move) animation: null, // callback before animation begins stop: null // callback before stop of animation });
Events
var animationCallback = function(event, direction) { var widget = event.data.self; console.log(direction); // display "left" or "right" event.preventDefault(); // stops the beginning of the animation }; var renderCallback = function(event) { var widget = event.data.self; event.preventDefault(); // stops the rendering of the widget }; var stopCallback = function(event) { var widget = event.data.self; event.preventDefault(); // stops the end of the move (hum... dangerous...) } // you can use events with 2 methods : // standard bind : widget.bind("render_kitSlideshow", renderCallback); // in the configuration with the "render", "animation" or "stop" callback
Conclusion
Use comments for your questions, remarks,...
Commentaires
Ajouter un commentaire