PRÉSENTATION
- • Structure
- • ID et classes
- • style.css
- • skin.inc
- • confskin
- • jqstyle.css
- • mobstyle.css
- • tabstyle.css

BOÎTES
- • Boîte libre
- • Boîte menu (articles)
- • Boîtes centrales
-
Boîtes standards

SERVICES
- • Agenda
- • Blog
- • Contact avancé
- • FAQ, liens, téléchargements
- • Forum
- • Livre d'or
- • Nouvelles
- • Photos

JQUERY
EN VRAC
EXEMPLES
En ce moment...
132564 visiteurs
1 visiteur 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 :
- 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
► 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 :
► ENREGISTRER
Diaporama simple - DÉFILEMENT LENT :
- 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
► 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 2Ce 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 |
Dernière modification : 23/07/2014 21:09
Page lue 7430 fois