Faire un diaporama photo avec Jquery et le plugin nivo-slider

Bonsoir,

Déjà bon début de weekend à tous. Aujourd'hui, je compte aborder avec vous la mise en place d'un diaporama photo dans votre site web. Faudrait déjà savoir que plusieurs outils dont Jquery permet de mettre en place très facilement et très aisément un diaporama sur son site.

Jquery c'est quoi : Et bien c'est tout simplement la bibliothèque JavaScript la plus populaire du moment. Et comme vous le savez javascript c'est  ce langage qui permet de dynamiser les sites web côté client. Dans des prochains articles, nous reviendrons en profondeur sur Jquery et JavaScript.

Comme dit plus haut, nous allons voir comment réaliser un diaporama photo avec jquery, l'on utilisera pour cela le plugin Jquery nivo-slider. Ce plugin n'est qu'un parmi des centaines permettant de faire un diaporama photo avec Jquery, mais de tout ceux que j'ai pu côtoyer, il me semble être le meilleur.

Voici le résultat que l'on compte avoir :

Vous pouvez également consulter ce site : www.associationhac.org pour voir de plus près cette animation et les transitions qui y sont apportées.

Bien maintenant que l'on sait ce que l'on veut, passons à la réalisation. Déjà télécharger le fichier suivant : cliquez ici pour télécharger. c'est tout simplement le plugin Jquery qui nous servira.

Télécharger, puis copiez le dossier nivo-slider dans un répertoire de votre site internet. Regroupé toutes les images de votre diaporama dans un dossier; img sera le nom utilisé dans cet exemple.

A présent, voici la procédure de réalisation :

Dans la page ou sera exécuté votre diaporama (ici cette page est dans le même repertoire que les repertoires img et nivo-slider2.7), copiez y entre les balises head le code ci-dessous :

 <link rel="stylesheet" href="nivo-slider2.7/nivo-slider/themes/default/default.css" type="text/css" media="screen" />

    <link rel="stylesheet" href="nivo-slider2.7/nivo-slider/themes/pascal/pascal.css" type="text/css" media="screen" />

    <link rel="stylesheet" href="nivo-slider2.7/nivo-slider/themes/orman/orman.css" type="text/css" media="screen" />

    <link rel="stylesheet" href="nivo-slider2.7/nivo-slider/nivo-slider.css" type="text/css" media="screen" />

    <link rel="stylesheet" href="nivo-slider2.7/nivo-slider/demo/style.css" type="text/css" media="screen" />

   

    <script type="text/javascript" src="nivo-slider2.7/nivo-slider/demo/scripts/jquery-1.6.4.min.js"></script>

    <script type="text/javascript" src="nivo-slider2.7/nivo-slider/jquery.nivo.slider.pack.js"></script>

    <script type="text/javascript">

    $(window).load(function() {

        $('#slider').nivoSlider();

    });

    </script>

Après cela, rechargez votre page sur votre navigateur. Si vous avez un fichier de style pour votre site, vous pourrez constaté que l'affichage a été complètement modifié, en gros il est quelques peu différent pourtant vous avez juste ajoutez les éléments cités plus haut.

Cela est en effet dû au fichier de style de nivo-slider, il faut donc le modifier de manière à garder votre style originale. Ouvrez le fichier style.css dans le répertoire suivant : nivo-slider2.7/nivo-slider/demo/style.css, supprimé son contenu et collez y le contenu suivant :

blockquote:before, blockquote:after,

q:before, q:after {

content:"";

}

blockquote, q {

quotes:"" "";

}

/* HTML5 tags */

header, section, footer,

aside, nav, article, figure {

display: block;

}

.theme-default #slider {

    margin:3px 0 0 3px;

    width:650px; /* longeur  maximale de vos images  */

    height:300px; /* largeur maximale  de vos images  */

}

.theme-pascal.slider-wrapper,

.theme-orman.slider-wrapper {

    margin-top:150px;

}

/*====================*/

/*=== Other Styles ===*/

/*====================*/

.clear {

clear:both;

}

Après cela tout devrait rentrer dans l'ordre. Rafraichissez votre page sur votre navigateur.

Rmq : dans le code css que je viens de donner, vous constater que j'ai définit deux variables width et height et comme dit en commentaire elles représentent la longueur et la largeur maximale qu'ont vos images. Donc modifié les si vous voulez montrer des images plus grandes ou plus petites.

Bien, dans le code de votre page, à l'endroit ou doive défiler les images, collez y le code suivant :

<div id="wrapper"><div class="slider-wrapper theme-default">

            <div class="ribbon"></div>

            <div id="slider" class="nivoSlider">

/* Debut de la partie modifiable, nos images sont insérés ici */

                <img src="img/DEF1.jpg" alt="" />

                <a href="#"><img src="img/DEF2.jpg" alt="" title="" /></a>

                <img src="img/DEF3.jpg" alt="" data-transition="slideInLeft" />

                <img src="img/DEF4.jpg" alt="" title="#htmlcaption" />

/* Fin de la partie modifiable */

            </div>

        </div>

    </div>

Dans la partie réservée à la zone modifiable, sont inséré nos images. Ici j'en ai mis 4, mais pouvez en mettre plus si vous le souhaitez.

Explications : comme vous l'avez remarqué, les définitions des images sont différents. En effet pour chaque image on lui applique un effet d'apparition et de disparation différent (c'est l'une des choses qui ma le plus séduit sur le plugins nivo-slider)

Vous pourrez ainsi pour chaque image choisir l'effet que vous souhaitez, en clair si j'ai une cinquième image, je peux choisir de l'ajouter de la manière suivante :

<img src="img/DEF5.jpg" alt="" />   ou

                <a href="#"><img src="img/DEF5.jpg" alt="" title="" /></a>  ou

                <img src="img/DEF5.jpg" alt="" data-transition="slideInLeft" />  ou

                <img src="img/DEF5.jpg" alt="" title="#htmlcaption" />

Ainsi de suite jusqu'à l'affichage de toutes les photos de votre galerie.

Ainsi ce termine notre article, j'espère que cet article vous intéressera, je vous invites et je vous invites à poser des questions si vous avez des préoccupations.

Bonne lecture !