Skins for GuppY 5.0 - Tutorial - Diaporama (slideshow)

SKINS TUTO

GuppY Help Center

Presentation

PRÉSENTATION

Nouveau :

Boxes

BOÎTES

Boîtes Menu (articles)

Boîtes libres

Boîtes standards (généralités)

Boîtes standards (personnalisation) :

- Lettre d'information

Services

SERVICES

jQuery
- jQuery
  
  Accordéon vertical
  
  Diaporama complet
  
  Diaporama simple (texte animé)
  
  Fenêtre modale
  
  Onglets

Bulk

VRAC

- Dossiers de la skin

- Fonts (polices de caractères)

- Les lignes et les colonnes

Propriétés CSS :

background, padding, margin, color, border, etc...

Comment ça marche ?

Infos

Publication programmée : si aucune, la date de début sera celle de la création de l'article ou de la boîte.

Pseudo du rédacteur : section obligatoire.

NOTE : si vous n'utilisez pas la fonction "membre", c'est le nom du webmestre (indiqué dans Config Services) qui va s'afficher par défaut.

Exemple : Prénom Nom. Ceci va générer un message d'erreur quand la boîte sera validée, il est donc nécessaire de corriger en indiquant un pseudo sans espace ni caractères accentués (ex. : Prenom)... ou de modifier le nom du webmestre...

Courriel du rédacteur : section obligatoire. S'affiche par défaut le courriel du membre ou du webmestre.

Si vous souhaitez que le titre soit invisible, mettez le caractère § au début.

Si ce caractère n'est pas sur votre clavier, faites :

CTRL + ALT + O (la lettre O)

Dans Config Boîtes, seuls seront visibles les emplacements qui ont été cochés.

The site will be translated into the primary language: fr

PRESENTATION

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

JQUERY

BULK

EXAMPLES

Currently...

121886 visitors

Diaporama (slideshow)

Pour créer un diaporama (slideshow).

1livres

2parapluie

3masque

4bateau

5orange

6coquillages

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)

img/jQuery/diapoLignes.png

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;">
    >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

Associated keywords

jquery
- Simple diaporama
  Vertical accordion
  Tabs

Creation date : 04/04/2013 16:43
Last update : 23/07/2014 21:02
Page read 12299 times

Preview

Print...

You are here : Home » Diaporama (slideshow)