Contactez-nous

Kitpages
17 rue de la Frise
38000 Grenoble
tel : 04 58 00 33 81

Par Philippe Le Van (@plv) Dernière mise à jour : 05 April 2012

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

click on the square on the right to go to the next page

Let's try with an image

A canvas circle (for enabled browsers)

div No 5

div No 6

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

Navigation