En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour vous proposer des contenus et services adaptés. Mentions légales.

TUTO SKINS

Centre d'Aide GuppY


PRÉSENTATION

BOÎTES

SERVICES

JQUERY

EN VRAC

EXEMPLES

En ce moment...

 128950 visiteurs

 6 visiteurs en ligne

Diaporama simple ou texte animé

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

Pour créer un diaporama simple ou un texte animé dans une boîte libre.

  • Mise en place
  • Code dans la boîte
  • style.css

On peut créer un diaporama simple dans un article mais sa simplicité le rend un peu rigide quand il s'agit de "l'habiller". Alors que dans une boîte libre, c'est beaucoup plus souple (voir les 2 exemples en bas du site, dans la boîte EXEMPLES).

Diaporama simple - DÉFILEMENT RAPIDE :

  1. Créer une boîte libre
  2. Copier les lignes qui sont dans ce fichier
  3. Aller dans  iconeSOURCE.png  de la boîte libre
  4. Coller les lignes
  5. Cliquer à nouveau sur SOURCE pour sortir

► ENREGISTRER

Il suffit ensuite d'écrire votre texte et/ou de mettre vos images.

Dans SOURCE, chaque diapositive est délimitée par [ div ] et [ /div ]

► Si vous avez plus ou moins de 3 diapositives : dans SOURCE, copier-coller ou supprimer les lignes correspondant à chaque diapo :

img/jQuery/diapoSimpleLignes.png

► ENREGISTRER

Diaporama simple - DÉFILEMENT LENT :

  1. Créer une boîte libre
  2. Copier les lignes qui sont dans ce fichier
  3. Aller dans  iconeSOURCE.png  de la boîte libre
  4. Coller les lignes
  5. Cliquer à nouveau sur SOURCE pour sortir

► ENREGISTRER

Il suffit ensuite d'écrire votre texte et/ou de mettre vos images.

Dans SOURCE, chaque diapositive est délimitée par [ div ] et [ /div ]

Ajout ou suppression de diapositive : même méthode que pour le défilement rapide.

EXPLICATION DU CODE

(la balise < a été remplacée par [  pour éviter l'activation du code)

Diaporama simple - DÉFILEMENT RAPIDE

[div id="leftslides">

[div class="slides_container">

ID du défilement rapide

Classe du conteneur de diapositives

Dans style.css :

#leftslides

.slides_container

[div>

[h2>Titre optionnel[/h2>

[p>Texte ou image ou ....[/p>

[/div>

h2 = dans FORMAT de l'éditeur : titre 2

Ce texte peut être enlevé

 1ère image

[div>

[h2>Titre optionnel[/h2>

[p>Texte ou image ou ....[/p>

[/div>

 2ème image

[div>

[h2>Titre optionnel[/h2>

[p>Texte ou image ou ....[/p>

[/div>

[/div>

[/div>

 Dernière image
Diaporama simple - DÉFILEMENT LENT

[div id="leftslides1">

[div class="slides_container">

 ID du défilement lent

Dans style.css :

#leftslides1

.slides_container

[div>

[h2>Titre optionnel[/h2>

[p>Texte ou image ou ....[/p>

[/div>

 1ère image

[div>

[h2>Titre optionnel[/h2>

[p>Texte ou image ou ....[/p>

[/div>

 2ème image

[div>

[h2>Titre optionnel[/h2>

[p>Texte ou image ou ....[/p>

[/div>

[/div>

[/div>

 Dernière image

Diaporama simple - DÉFILEMENT RAPIDE ( #leftslides - .pagination0 )
Ajouter les lignes de ce fichier dans style.cssimg/telecharger.png
.FB75 {
    margin: 5px;
    width: 305px;
    background: #81a511;
    padding: 5px;
    border-radius: 18px;
}

boîte qui contient le diaporama simple (rapide)

Ne pas oublier de changer le numéro de la boîte !
.FB75 #leftslides {
    display:block;
    width: 290px;
    height: 160px;
}		 Ensemble diapositives + pagination du diaporama
.FB75 #leftslides p {
    width: 285px;
    height: 130px;
}		 Largeur et hauteur de l'espace pour le texte ou l'image
.FB75 .slides_container {
    width: 290px;
    height: 130px;
    background: transparent;
    padding: 5px;
}		 Conteneur des diapositives
.FB75 .slides_container p {
    color: #fff;
}		 Attributs du texte
.FB75 ul.pagination0 {
    width: 60px;
    height: 16px;
    margin: 4px;
    margin-left: 110px;
}

Boîte de la pagination

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

.FB75 ul.pagination0 {
    display: none;
}

.FB75 .pagination0 li { /**/
    float:left;
    width: 12px;
    height: 12px;
    list-style:none;
    background: #fff;
    background-position: 0 0;
    border-radius: 8px;
}		 Pagination (petits carrés ou ronds ou image)
.FB75 .pagination0 li.current {
    background: #ae0de7;
    background-position:0 0px;
}		 Pagination de la diapositive active

Diaporama simple - DÉFILEMENT LENT ( #leftslides1 - .pagination1 )
Ajouter les lignes de ce fichier dans style.css img/telecharger.png
.FB76 {
    margin: 5px;
    width: 205px;
    background: #1091a6;
    padding: 5px;
    border-radius: 18px;
}

Boîte qui contient le diaporama simple (lent)

Ne pas oublier de changer le numéro de la boîte !
.FB76 #leftslides1 {
    display:block;
    width: 200px;
    height: 170px;
}		 Ensemble diapositives + pagination du diaporama
.FB76 #leftslides1 p {
    width: 185px;
    height: 130px;
}		 Largeur et hauteur de l'espace de la diapositive
.FB76 .slides_container {
    width: 190px;
    height: 130px;
    background: transparent;
    padding: 5px;
}		 Conteneur des diapositives
.FB76 .slides_container p {
    color: #fff;
}		 Attributs du texte
.FB76 ul.pagination1 {
    width: 60px;
    height: 25px;
    margin: 4px;
    margin-left: 70px;
}

Boîte de la pagination

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

.FB76 ul.pagination1 {
    display: none;
}

.FB76 .pagination1 li {
    float:left;
    width: 16px;
    height: 16px;
    list-style:none;
    background: #0f6773;
    background-position: 0 0;
    border-radius: 0px;
}		 Pagination (petits carrés ou ronds ou image)
.FB76 .pagination1 li.current {
    background: #f1e523;
}		 Pagination de la diapositive active

Mots-clés associés
Date de création : 06/04/2013 16:26
Dernière modification : 23/07/2014 21:09
Page lue 7330 fois
Précédent  
  Suivant
Prévisualiser... Prévisualiser...   Imprimer... Imprimer...

Vous êtes ici :   Accueil » Diaporama simple ou texte animé