Accéder au contenu

Intégration d'un diaporama

Tout d'abord vous devez soit créer une nouvelle page, soit modifier une page déjà existante sur laquelle vous souhaitez insérer le diaporama. Vous utilisez les "4 flèches" pour agrandir la fenêtre et allez sur le mode  "Source". 



Premièrement, copier le code suivant : 
 

<div class="pnl-caroussel" height="350px">

<div><img alt="" src="http://boutique.potagerdepaulette.com/media/A1469723368548/image1.jpg" /></div>

<div><img alt="" src="http://boutique.potagerdepaulette.com/media/A1469723368548/image2.jpg" /></div>

<div><img alt="" src="http://boutique.potagerdepaulette.com/media/A1469723368548/image3.jpg" /></div>

<div><img alt="" src="http://boutique.potagerdepaulette.com/media/A1469723368548/image4.jpg" /></div>

</div>

Par défaut, le diaporama occupera toute la largeur disponible dans le cadre où il est inséré. Vous devez par contre définir une hauteur dans l'attribut "height", dans l'exemple "350px".

Différents attributs peuvent être insérer : 

- control="true" : permet d'afficher le nombre d'images dans le diapo et donne la possibilité de mettre le diaporama en pause. Si cet attribut n'est pas inséré dans le code, alors seulement la photo apparaît. (cf.1 sur l'image ci-dessous)

- interval="5" : par défaut le temps de défilement entre les photos est de 3 secondes mais il est possible de le paramétrer comme vous le souhaitez en ajoutant cet attribut. Le chiffre que vous indiquez entre guillemet correspond au temps de défilement que vous souhaitez. (cf.2 sur l'image ci-dessous)

- <h1>Titre<h1> : il est également possible d'ajouter un titre sur une photo, avant le </div> de la photo en question il faut ajouter <h1>Titre</h1>. Remplacez "Titre" par le texte que vous voulez (cf.3 sur l'image ci-dessous) 



Aperçu final : 


Ensuite cliquez à nouveau sur "Source", vous apercevez alors les images du diapo. Double cliquez sur chacune d'entre elles pour les modifier et les remplacer par une de vos photos en allant sur "Parcourir le serveur" dans la fenêtre "Propriétés de l'image" qui s'ouvre. 




Si vous souhaitez plus d'images à votre diapo, vous pouvez dupliquer une ou plusieurs fois le type de ligne de code suivant dans "Source" à la suite des autres et avant le dernier </div> : 
 
<div><img alt="" src="http://boutique.potagerdepaulette.com/media/A1469723368548/image2.jpg" /></div>


Pour finir, cliquez sur les 4 flèches pour diminuer la fenêtre et pouvoir enregistrer votre page.