TUTO SKINS

Centre d'Aide GuppY


PRÉSENTATION
SERVICES
JQUERY
EN VRAC
EXEMPLES
En ce moment...

 98840 visiteurs

 3 visiteurs en ligne

Pour créer un diaporama (slideshow).

ATTENTION : on ne peut afficher qu'UN SEUL diaporama par boite ou document.

new-ribbon.png
1livres.png

1livres

2parapluie.png

2parapluie

3masque.png

3masque

4bateau.png

4bateau

5orange.png

5orange

6coquillages.png

6coquillages

Cadre

  • 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 :

  1. Dans IMG, copier-coller le dossier DEMO
  2. Le renommer (pour l'exemple ici, on conserve le nom DEMO)
  3. Ajouter vos images dans le dossier (important : elles doivent toutes avoir la même taille)
  4. Créer une boîte libre
  5. Copier les lignes qui sont dans ce fichier
  6. Aller dans  iconeSOURCE.png  de la boîte libre
  7. Coller les lignes
  8. Cliquer à nouveau sur SOURCE pour sortir
  9. Les images sont l'une en-dessous de l'autre
  10. Cliquer sur ENREGISTRER

Il faut ensuite remplacer les images existantes par les vôtres :

  1. Sélectionner l'image
  2. Cliquer sur l'icône iconeIMG.png de l'éditeur
  3. Choisir votre image dans le dossier DEMO
  4. Indiquer la taille correspondant à vos images
  5. 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)

img/jQuery/diapoLignes.png

CRÉATION DU DIAPORAMA DANS UN ARTICLE :

  1. Dans la boîte libre, dans SOURCE, copier le code
  2. Dans l'article, créer un tableau avec une largeur et une hauteur supérieures à celles du diaporama
  3. 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;">
    >tbody>
        >tr>
            >td>

           

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

Pour enlever la pagination, remplacer ces lignes par celles-ci :

#container2 ul.pagination {
   display: none;
}

#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

Mots-clés associés

Date de création : 04/04/2013 16:43
Dernière modification : 23/07/2014 21:02
Page lue 10237 fois


Vous êtes ici :   Accueil » Diaporama (slideshow)