Un diaporama JavaScript sur votre site

Attention, ce diaporama ne fonctionne pas avec tous les navigateurs.

Introduction :

Slideshow

Les images sont un peu l’attraction d’un site Internet. Elles permettent de donner vie à du texte qui, même s’il est très intéressant, peu vite ennuyer et amener la fermeture de la page par l’internaute. Quoi de mieux alors qu’un diaporama, si possible attractif, comme vitrine de son établissement ou pour animer un book photo un peu triste.

Cependant, la plupart du temps quand on pense diaporama dynamique, on fait vite le rapprochement avec Flash qui peut vite compliquer la tâche pour les non connaisseurs. Que nenni, JavaScript et l’un de ses Framework Mootools couplé à des classes toutes faites vont faire le travail pour vous (ou presque).

Les Fichiers Nécessaires :

Le plus simple pour créer votre diaporama va être de se fournir à la source : La documentation Google du projet SlideShow ! : http://code.google.com/p/slideshow/ .

Dans la partie « Download » ou sur la droite du sommaire du projet, vous allez pouvoir télécharger un exemple de diaporama qui va nous servir de base. Téléchargez le fichier http://slideshow.googlecode.com/files/Slideshow2r147.zip .

Vous devez maintenant extraire le dossier « Slideshow 2! » . Faisons une petite revue des troupes avant de se lancer dans la customisation du diaporama pour qu’il convienne à nos souhaits.

Le dossier « css » contient les images « loader-1.png » jusqu’à « loader-11.png » et vont s’afficher lorsque les images se chargeront. Rien ne vous empêche de créer votre propre barre de chargement avec fond transparent pour une meilleure intégration dans le diaporama.

Il y a ensuite dans ce dossier les images nécessaires pour contrôler le diaporama (pause, lecture, aller à la dernière image, …).

Le dossier contient pour finir le fichier « slideshow.css » qui sera l’un des fichiers avec « index.html » que l’on va personnaliser.

Le fichier slideshow.css :

Chaque classe CSS va permettre de gérer une partie du diaporama avec, pour citer les plus importantes, les classes CSS « Slideshow », « slideshow-images », « slideshow-captions », « slideshow-controller », « slideshow-thumbnails » décrits plus en détails si dessous.

Slideshow : Cette classe CSS va permettre de gérer le diaporama au niveau général.
C’est à cet endroit que vous pourrez choisir la hauteur, la largeur et l’emplacement de la scène sur la page.

.slideshow-captions : Chaque photo peut avoir une légende lorsqu’elle va s’afficher. Grâce à cette classe CSS, vous allez pouvoir gérer les légendes (ou « captions »). L’activation de l’affichage ou non des légendes, ce fait dans « index.html ». Vous allez ici pouvoir gérer l’emplacement des légendes, leurs tailles, etc. .

.slideshow-images : Vous allez pouvoir, grâce à cette classe CSS , gérer l’affichage des images dans la scène.

.slideshow-controller : Classe CSS pour le contrôle du diaporama (pause, aller à l’image suivante, …).

.slideshow-thumbnails : Classe CSS pour les miniatures qui s’affichent en dessous de la scène.

Description de quelques propriétés css intéressantes à modifier

« height » et « width » : pour les dimensions des composants .

« opacity » : transparence du composant pouvant varier de 0 à 1 (0 pour transparent et 1 pour visible à 100%).

« z-index » : permet de gérer l’emplacement du div sur l’axe z, c’est-à-dire au niveau de la profondeur.

« float » : placement d’un bloc par rapport à un autre (left ou right).

« cursor » : permet de spécifier la forme du curseur.

Le fichier index.html

<head>
	<link rel="stylesheet" href="css/slideshow.css" media="screen" />
	<script src="js/mootools.js"></script>
	<script src="js/slideshow.js"></script>
</head>

On importe d’abord le fichier css que l’on vient de voir, puis les deux fichiers nécessaires au bon fonctionnement du diaporama. Les autres classes comme slideshow.fold.js ou slideshow.kenburns.js permettent de changer les effets de transition quand les images défilent. Si vous voulez les utilisés, il vous suffit de les importer à la suite.

<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
 
	var data = {
		'1.jpg': { caption: 'Volcano Asención in Ometepe, Nicaragua.' },
		'2.jpg': { caption: 'A Ceibu tree.' },
		'3.jpg': { caption: 'The view from Volcano Maderas.' },
		'4.jpg': { caption: 'Beer and ice cream.' }
	};
 
	var myShow = new Slideshow('show', data, {controller: true, height: 300, hu: 'images/', thumbnails: true, width: 400});
 
});
//]]>
</script>

« domready » est un évènement de l’élement « window » qui permet de s’avoir quand le DOM est opérationnel.

On va ensuite définir une variable data qui va accueillir le nom des images avec leurs légendes. C’est à cet endroit que vous allez pouvoir rajouter le nom de la miniature liée à l’image ainsi qu’un lien lorsque l’on clique sur l’image.

Par exemple :

'1.jpg': { caption: 'Volcano Asención in Ometepe, Nicaragua.' , thumbnail: '1_mini.jpg', href: 'http://www.experience-developpement.fr/'}

On déclare ensuite une variable myShow pour l’appel de la fonction Slideshow qui va prendre en paramètre :

var myShow = new Slideshow(element, data, options);

element : le bloc où va s’afficher le diaporama dans la page.

data : nom de la variable définit au dessus et qui contient toutes les images à afficher.

options : Les options que l’on va pouvoir modifier comme l’affichage ou non des miniatures, le dossier où sont les images (dans l’exemple : hu : ‘images/’), la taille des images dans la scène.

La taille des images se règlent ici ET dans la classe Css slideshow-images du fichier « slideshow.css ». Si les valeurs de « height » et de « width » sont différentes entre les deux fichiers, c’est « index.html » qui gagne !!

Ci-dessous, la déclaration du bloc qui va accueillir le diaporama.

<div id="show"></div>

Vous pouvez supprimer la ligne :

<img src="images/1.jpg" alt="Volcano Asención in Ometepe, Nicaragua." />

Elle permet d’afficher une image au cas ou le diaporama ne se lance pas (erreur dans le code javascript, javascript bloqué par le navigateur, …).

Pour changer la transition entre les images, il vous suffit d’importer le bon fichier js et de changer l’appelle à la fonction SlideShow :

var myShow = new Slideshow.KenBurns('show', data, {
	delay : 2500,
	controller: true,
	height: 600,
	hu: 'images/',
	thumbnails: true,
	width: 800,
	captions : true,
	pan: 100,
	zoom: [0, 25]
});

Pour chaque classe qui hérite de « Slideshow », il y a des options spécifiques décrites dans les documentations : http://code.google.com/p/slideshow/w/list.

Rien de vous empêche de jeter un œil (n’oubliez pas de le récupérer après) au fichier slideshow.js pour voir comment il se comporte. Vous pouvez même vous amuser à le modifier si le cœur vous en dit.

Dans options vous pouvez changer les valeurs par défaut du diaporama que vous pouvez aussi changer dans « index.html ». C’est dans ce fichier (slideshow.js) aussi que vous pouvez choisir les images utilisées pour le chargement des images (option loader). Dans l’exemple, 12 représente le nombre d’images utilisées pour créer l’effet de chargement (de « loader-0.png » à « loader-11.png »).

Il est intéressant de regarder les fonctions que l’on peut appeler comme « pause » par exemple. Imaginez que vous souhaitiez ajouter un bouton sur votre page qui cache votre diaporama grâce à Ajax ou encore plus simple en css grâce à la propriété style « display » de votre div. On peut ainsi appeler la fonction pause lorsque l’on cache le diaporama pour éviter qu’il continue à tourner quand il n’est plus visible.

function pauseTheDiapo(){
	myShow.pause(0);
	//D'autres actions si vous le souhaitez
}

Puis dans le div show ,

<div id="show" onclick="pauseTheDiapo();"></div>

Conclusion

Grâce à mootools et à la classe « Slideshow », faire un diaporama simple et efficace devient un jeu d’enfant. Plus besoin de maitriser Flash pour créer de belles animations et d’utiliser un fichier XML pour récupérer dynamiquement les photos. On pourra d’ailleurs créer côté serveur une variable qui récupèrera, par exemple, le nom des images en fonction de la page et mettre cette variable dans la variable var de la page HTML.

Bien sûr, vous pouvez télécharger l’exemple et Essayez Slideshow.

Tagués avec : , , , , , , ,
Publié dans Javascript
25 commentaires pour “Un diaporama JavaScript sur votre site
  1. sadlig dit :

    Super beau résultat

  2. Ben dit :

    Bonjour,

    J’ai essayé d’installer ce script, mais j’ai un problème : certaines de mes images sont destinées à être visionnées à l’horizontale et d’autres à la verticale, or le diaporama semble vouloir à tout prix que toutes les images apparaissent dans les mêmes dimensions.

    J’ai essayé bcp de choses pour résoudre le problème (supprimer les dimensions dans le document html, mettre les dimensions en % dans le document css, et même des dimensions max-height et max-width), mais rien ne fonctionne. Avez-vous une solution, ou au moins une explication ?

    En vous remerciant d’avance.

  3. Olivier PEREZ dit :

    Bonjour,
    Je ne me suis jamais posé cette question. Je vais essayer de trouver une solution.
    Je reviendrai te tiendrai au courant de mes tests.

  4. Ben dit :

    Merci !

  5. Vaya dit :

    Bonjour,

    Merci pour ces explications !
    Les scripts sont encore flous pour moi, mais ca commence a devenir plus clair… Par contre….
    Une fois que j’ai réalisé tout comme il faut, j’en fais quoi de mes fichiers ? Comment est-ce que je peux insérer tout ça dans une page web déjà créée (mais dont le code html peut être remanié), que dois-je insérer d’ailleurs ?
    Merci de votre aide
    Vaya

  6. 2aurene dit :

    Merci beaucoup !
    Ton article m’a fais gagner des heures de recherches et de compréhension :)

  7. Simon dit :

    Merci pour cette aide, je cherchais la syntaxe exacte pour ajouter un lien par image ! Gain de temps ! :)

  8. colonelwog dit :

    bonjour et merci pour ce code, j’ai une question, j’ai voulu déporter la liste des images malheureusement cela n’a pas fonctionner car j’aurai voulu créer un script qui permet de faire une liste des images et de l’importer ensuite en « include » dans le code actuel …

  9. colonelwog dit :

    désolé encore moi j’ai résolu mon problème, (mode boulet) je voulais faire à tout prix un « include » alors qu’il fallait simplement rédiger sous la forme src du script avec le lien tout simplement…

  10. colonelwog dit :

    dernière question est il possible de faire défiler le diapo de façon aléatoire ?
    car à chaque fois que la page est rechargée le diapo recommence (dans le cadre ou le diapo se situe dans le header)
    merci

  11. nicesurfer dit :

    Bonjour,
    excellente publication…pour moi qui ne connais pas bien javascript…merci !

  12. nicesurfer dit :

    colonelwog, vas jeter un coup d’oeil dans le slideshow.js. Regardes à la ligne 16 tu as le paramétrage de la class slideshow et à la ligne 40 un random définit à false…je pense qu’en le définissant à true tu devrais avoir ton diapo avec affichage aléatoire ;)

  13. Thomas dit :

    Salut,

    Vraiment cool, ce diaporama ! J’ai un peu galéré mais je suis finalement arrivé à faire ce que je voulais…

    Par contre j’ai une petite question, est-il possible de mettre le « loader » au centre des images et pas en haut à gauche ?

    C’est du détail, mais si quelqu’un sait comment faire ca serait sympa.

    A+ et merci.

  14. Yragael dit :

    Salut! merci pour le tuto et le module! Il me sauve littéralement la vie! Il est super bien comme base et très facile à modifier.

    J’ai vu une question rapport aux différents formats d’images. En général dans ce cas il ne faut forcer qu’une mesure. Par exemple 300px en height et on met toutes les images en 300px de hauteur et voila!

    En tout cas ça fonctionne pour moi, juste les légendes qui n’apparaissent pas mais je trouverais si nécessaire :)

  15. Yragael dit :

    Thomas tout se trouve dans les CSS

    tu modifie les données du margin.

    les chiffre correspondent aux pixels qui forment un cadre. autour de ton image

    margin:1px 2px 3px 4px;

    correspond dans le même ordre à
    haut droite bas gauche

    margin:1px 2px 3px;
    haut gauche/droite bas

    margin:1px 2px;
    haut/bas droite/gauche

    margin:1px;
    sur les 4 côtés

    auto permet de faire que ton margin sur ce côté s’adapte tout seul par rapport à ton élément dans la div ou il se trouve.

  16. christophe dit :

    slt

    dommage qu’il ne fonctionne pas avec IE10…
    Je devrais plutôt dire « cette daube de IE fait encore chier son monde ! »

  17. david dit :

    Bonjour
    j’aurais voulu savoir s’il serait possible de l’utiliser avec une base de données MySQL?
    je m’explique je trouve votre diaporama vraiment superbe et j’aimerais savoir si on pourrais importer des photos venant d’une base de données
    en gros mettre votre script et que selon le choix les photos s’intègres dedans?
    merci pour votre réponse
    david

  18. Olivier PEREZ dit :

    Bonjour,

    Il suffirai de générer le code Javascript avec d’un script PHP qui interroge ta base de données MySQL.
    Je propose PHP parce qu’il est accessible sur presque tous les serveurs, mais n’importe quel autre langage peut faire l’affaire.

    Si tu es débutant en PHP et que t’as besoin d’aide pour démarrer tu peux trouver des cours sympas sur le siteduzero.

  19. christophe dit :

    hello,

    Tiens pour toi david:

    tu remplaces le dernier script du fichier index.html que tu renommes en index.php.

    Il te faut déjà une bdd avec des infos qui sont dans cet exemple: « name_file » pour le nom du fichier, « url_img » pour le lien de l’image si tu veux en mettre un, et « txt_img » pour le texte de l’image.

    //<![CDATA[
    window.addEvent('domready', function(){
    var data = {

    <?php
    $serveur='serveur';
    $utilisateur='login';
    $motDePasse='motdepasse';
    $base='nom_base';
    @mysql_connect($serveur, $utilisateur , $motDePasse)
    or die("Impossible de se connecter au serveur de bases de données. »);
    @mysql_select_db($base) or die(« Base de données non trouvée. »);
    $i=0;
    $query=(« SELECT * FROM diaporama »);
    $result = mysql_query($query);
    while ($val = mysql_fetch_array($result))
    {
    echo « ‘ ».$val[‘name_file’]. »‘: { caption: ‘ ».$val[‘txt_img’]. »‘ , thumbnail : ‘ ».$val[‘name_file’]. »‘, href: ‘ ».$val[‘url_img’]. »‘} , »;
    }
    $i++;

    ?>
    };
    var myShow = new Slideshow.KenBurns(‘show’, data, {delay : 2500,controller: true, height: 600,hu:’images/’, thumbnails: true, width: 800,captions : true, pan: 100, zoom: [0, 25]});
    });
    //]]>

    et pour créer ta table, je te passe la requette SQL à importer sur ton serveur SQL:

    SET SQL_MODE= »NO_AUTO_VALUE_ON_ZERO »;
    CREATE TABLE IF NOT EXISTS `diaporama` (
    `id` INT(4) NOT NULL AUTO_INCREMENT,
    `name_file` text NOT NULL,
    `txt_img` text NOT NULL,
    `url_img` text NOT NULL,
    PRIMARY KEY (`id`)
    ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=70 ;

    INSERT INTO `diaporama` (`id`, `name_file`, `txt_img`, `url_img`) VALUES
    (2, ‘image1.jpg’, ‘texte de l’image 1.jpg’, ‘http://lienimage1.fr’),
    (3, ‘image2.jpg’, ‘texte de l’image 2.jpg’, ‘http://lienimage2.fr’),;

    et ensuite il faut que tu fasses une page d’administration pour importer tes images automatique dans ta table sans être obliger de le faire manuellement, sinon ça n’a aucun interet d’utiliser une base.

    Mais sans vouloir offusquer le développeur, le slide ne fonctionne pas sous IE9 et IE10, et donc je me dis qu’il faut que tu essayes d’en trouver un autre.
    Si tu veux me contacter pour plus d’info :)

  20. Olivier PEREZ dit :

    En effet, le diaporama a l’air d’avoir des problèmes avec certains navigateurs (ou avec certaines versions de navigateurs).

    @Christophe, si tu as des liens à partager je suis également preneur.
    En tout cas, merci pour ton explication.

  21. Alan dit :

    Bonjour, je cherche aussi à générer les images dynamiquement.

    J’ai repris le code de Christophe, seulement cette ligne plante :

    « echo « ‘ ».$val[‘name_file’]. »‘: { caption: ‘ ».$val[‘txt_img’]. »‘ , thumbnail : ‘ ».$val[‘name_file’]. »‘, href: ‘ ».$val[‘url_img’]. »‘} , »; »

    Voici l’erreur que j’ai : Parse error: syntax error, unexpected ‘:’, expecting ‘,’ or ‘;’ in C:\wamp\www\FlamencSevillanas\index.php on line 51

    Que faire ?

  22. Olivier PEREZ dit :

    Dans ce code, les apostrophes et guillemets sont pas les bons. Voici la bonne ligne :
    echo "'" .$val['name_file']. "': { caption: '" .addslashes($val['txt_img']). "', thumbnail : '".$val['name_file']. "', href: '".$val['url_img']. "'}, ";

    J’en ai profité pour ajouter un appel à « addslashes » au cas où tu ais des apostrophes dans les textes d’images.

  23. christophe dit :

    hello

    je n’avais pas vus que l’envoi du code avait été modifié surement par le script de cette page

    désolé, je n’ai pas vérifier après l’envoi

  24. Alan dit :

    Aucun moyen de faire fonctionner sur IE ou d’avoir quelque chose d’équivalent ?

  25. Altesse dit :

    Merci pour le tuto. trés explicite!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*