PRESENTATION
- • Structure
- • ID and classes
- • style.css
- • skin.inc
- • confskin
- • jqstyle.css
- • mobstyle.css
- • tabstyle.css

BOXES
- • Central boxes
- • Free box
- • Menu box (articles)
-
Standard boxes
- • Generalities
- • Breadcrumb
- • Calendar
- • Cryptogrammes
- • Dropdown menus
- • Keywords
- • Logo - Banners
- • Menu
- • Newsletter
- • Preferences
- • Printing
- • Search
- • Social networks
- • Thinks
- • Webmaster infos
- • What's new ?

SERVICES
- • Advanced contact
- • Blog
- • FAQ, links, downloads
- • Forum
- • Guestbook
- • News
- • Photos
- • Planner

JQUERY
BULK
EXAMPLES
Currently...
132339 visitors
1 visitor online
Diaporama (slideshow)
Pour créer un diaporama (slideshow).
- Mise en place
- Code dans la boîte
- style.css
On peut créer un diaporama, soit dans une boîte libre, soit dans un article.
Pour simplifier, même si vous souhaitez le mettre dans un article, il est préférable de le créer dans une boîte libre avant.
CRÉATION DU DIAPORAMA DANS UNE BOÎTE LIBRE :
- Dans IMG, copier-coller le dossier DEMO
- Le renommer (pour l'exemple ici, on conserve le nom DEMO)
- Ajouter vos images dans le dossier (important : elles doivent toutes avoir la même taille)
- Créer une boîte libre
- Copier les lignes qui sont dans ce fichier
- Aller dans
de la boîte libre
- Coller les lignes
- Cliquer à nouveau sur SOURCE pour sortir
- Les images sont l'une en-dessous de l'autre
- Cliquer sur ENREGISTRER
Il faut ensuite remplacer les images existantes par les vôtres :
- Sélectionner l'image
- Cliquer sur l'icône
de l'éditeur
- Choisir votre image dans le dossier DEMO
- Indiquer la taille correspondant à vos images
- Recommencer pour chaque image
► Si vous avez plus ou moins de 6 images : dans SOURCE, copier-coller ou supprimer les lignes correspondant à chaque image (en rouge ci-dessous)
CRÉATION DU DIAPORAMA DANS UN ARTICLE :
- Dans la boîte libre, dans SOURCE, copier le code
- Dans l'article, créer un tableau avec une largeur et une hauteur supérieures à celles du diaporama
- Aller dans SOURCE de l'article et repérer les lignes suivantes :
>table align="center" border="0" cellpadding="0" cellspacing="0" style="height:350px;width:300px;"> COLLER ICI |
>/td> >/tr> >/tbody> >/table> |
► Enregistrer l'article
EXPLICATION DU CODE
(la balise < a été remplacée par > pour éviter l'activation du code)
>div id="container2"> |
ID du conteneur (images + flèches + numéros) |
Ici, c'est le container n°2, ce qui permet de distinguer ce diaporama d'un autre. Dans style.css, ce sont les lignes : #container2 #example #ribbon2 #slides .slides_container |
>div id="example">>img alt="new-ribbon.png" id="ribbon2" src="img/demo/new-ribbon.png" style="width: 56px; height: 56px; border-width: 0px; border-style: solid;" /> |
ID du conteneur du ruban "NEW" ID du ruban Supprimer cette ligne s'il n'y a pas de ruban |
|
>div id="slides"> |
ID des Images | |
>div class="slides_container">
|
Classe du conteneur d'images (mouvement de l'image) | |
>div class="slide">>img alt="1livres.png" src="img/demo/1livres.png" style="width: 200px; height: 200px; border-width: 0px; border-style: solid;" /> >div class="caption" style="bottom:0"> >p>1livres>/p> |
dossier et nom de l'image largeur de l'image hauteur de l'image "caption" : texte qui apparait sur l'image |
Dans style.css : .slide .caption 1ère image |
>div class="slide">>img alt="2parapluie.png" src="img/demo/2parapluie.png" style="width: 200px; height: 200px; border-width: 0px; border-style: solid;" /> >div class="caption"> >p>2parapluie>/p> |
2ème image | |
>div class="slide">>img alt="3masque.png" src="img/demo/3masque.png" style="width: 200px; height: 200px; border-width: 0px; border-style: solid;" /> >div class="caption"> >p>3masque>/p> |
3ème image | |
>div class="slide">>img alt="4bateau.png" src="img/demo/4bateau.png" style="width: 200px; height: 200px; border-width: 0px; border-style: solid;" /> >div class="caption"> >p>4bateau>/p> |
4ème image | |
>div class="slide">>img alt="5orange.png" src="img/demo/5orange.png" style="width: 200px; height: 200px; border-width: 0px; border-style: solid;" /> >div class="caption"> >p>5orange>/p> |
5ème image | |
>div class="slide">>img alt="6coquillages.png" src="img/demo/6coquillages.png" style="width: 200px; height: 200px; border-width: 0px; border-style: solid;" /> >div class="caption"> >p>6coquillages>/p> |
6ème image | |
>a class="prev" href="#">>img alt="arrow-prev.png" src="img/demo/arrow-prev.png" style="width: 24px; height: 43px; border-width: 0px; border-style: solid;" />>/a> >a class="next" href="#">>img alt="Arrow Next" height="43" src="img/demo/arrow-next.png" width="24" />>/a>>/div> |
arrow-prev : flèche à gauche "précédent" arrow-next : flèche à droite "suivant" width : largeur de l'image height : hauteur de l'image |
Dans style.css : .prev .next |
>img alt="Cadre" height="240" id="frame2" src="img/demo/cadre.png" width="286" />>/div> | Cadre du diaporama. Supprimer cette ligne s'il n'y a pas d'image pour le cadre. |
Dans style.css : #frame2 |
Le fichier original du style du diaporama est dans INC / CSSHEAD / slidesjs.css
Pour simplifier, surtout si vous avez plusieurs diaporamas, recopier le contenu de ce fichier à la fin du fichier style.css de la skin (pour chaque diaporama).
#container2 { width:290px; height:280px; text-align: center; margin: auto; position:relative; z-index:0; } |
N'oubliez pas de modifier le numéro ! Conteneur du diaporama |
|
#container2 #example { width:200px; height:200px; position:relative; } |
Taille des images pour fixer la position du ruban | |
#ribbon2 { /*ruban New*/ position:absolute; top:-3px; left:-15px; z-index:500; } |
Position du ruban | |
#frame2 { position:absolute; z-index:0; width:286px; height:240px; top:0px; left:-39px; } |
Cadre des images : L'image est dans le code de la boîte |
|
#container2 #slides { height:200px; width: 200px; background: #f2f2f2; border: 0px solid #f2f2f2; } |
Taille des images du diaporama S'il n'y a pas d'image pour le cadre (#frame2), c'est ici qu'on indique la couleur de fond (background) et la bordure (border) |
|
#container2 .slides_container { width:200px; height:200px; position:relative; } |
Taille de l'ensemble des images + les boutons suivant et précédent | |
#container2 .slide { height:200px; width: 200px; } |
Taille des images | |
#container2 #slides .next, #container2 #slides .prev { position:absolute; top: 85px; left:-40px;/*position prev à gauche*/ width:24px; height:43px; display:block; z-index:101; background: transparent; } |
Position des boutons suivant et précédent | |
#container2 #slides .next { left:215px; } |
Position du bouton suivant | |
#container2 ul.pagination { margin-top: 15px; width: 160px; height: 20px; text-align: center; } |
Position et taille de la boîte de numéros, en bas du diaporama
|
|
#container2 .pagination li a, #container2 .pagination0 li a, #container2 .pagination1 li a { background: transparent; } |
Couleur de fond du lien de chaque numéro | |
#container2 ul.pagination li { float:left; list-style:none; background: #404040; width:20px; height: 20px; border-radius: 14px; border: 2px solid #fff; padding: 0px; } |
Attributs des numéros | |
#container2 .pagination li a { width: 20px; height: 20px; padding-top: 3px; color: #fff; } |
Attributs des numéros (le lien) | |
#container2 ul.pagination li.current { background: #c70f72; width:20px; height: 20px; } |
Attributs du numéro quand l'image est affichée | |
#container2 .caption { position:absolute; bottom:-35px; left:0; height:28px; padding:0px 1px 0px 1px; background: #f2f2f2; background:rgba(0,0,0,.3); width:198px; font-size:1.3em; line-height: 0.7; color:#000; text-shadow:none; border: 0px; } |
Boîte qui contient le texte qui apparaît sur l'image ► la transparence de la couleur de fond est définie par : background:rgba(0,0,0,.3); |
|
#container2 .caption p { background: transparent; padding: 4px 0px; margin: 4px 0px; } |
Position du texte qui apparaît sur l'image | |
#container2 #leftslides .slides_container div { width:180px; height:100px; display:block; } |
Taille du "mouvement" de l'image qui arrive de la gauche |
Last update : 23/07/2014 21:02
Page read 12717 times