Code HTML
- First
Vous devez inclure dans votre document les fichiers du plug-in (mixSlide.css & mixSlide.js). Sans oublier la librairie javascript qui est dans le dossier src si vous ne l'avez pas - Second
La division contenant les images doit avoir un structure particulière pour pouvoir être gérée par le Plug-in.- Chaque image doit etre dans un division comme le montre l'image ci-dessus
- A côté de l'image une balise "p" pour le label. Ceci est facultatif si vous n'en avez pas besoin
Style CSS
Vous pouvez personnaliser le plug-in en changeant son apparence. Voici les selecteurs CSS à utiliser pour ce faire
Selecteur | Element | Propriétés changeables |
---|---|---|
.mixSlide-frame.fullscreen | L'overlay dans le mode fullscreen | background:rgba(0,0,0,.7) |
.mixSlide-container | Container | background:black |
.mixSlide-images p | Labels des images | Toutes les propriétés pour du texte (font, color, ...) |
Script d'insertion
Ceci est un exemple. Il est bien sûr possible d'ajouter dd'autres options. Celles-ci sont présentées dans la partie qui suit;
Options
Options simples
Option | Description | valeurs |
---|---|---|
fullscreen | charger le slide en plein écran | true | false |
autoplay | charger le slide en avec le diaporama lancé | true | false |
Options complexes (en objets)
Exempletransition : { name : "slices", count : 10 }
-
Labels : Textes associées aux images si vous les avez mis dans le code HTML
- active (true | false)
- position ("top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right")
-
Controls : Les boutons de control (next, prev, pause, play, fullscreen)
- active (true | false)
- position ("top-left" | "top-right" | "bottom-left" | "bottom-right")
-
thumbs : Les images en miniature
- active (true | false)
- position ("top-left" | "top-right" | "bottom-left" | "bottom-right")
-
transition : Définir la transition à utiliser. LEs attributs ici dépendent de la transition choisie
- name : nom_de_la_transition (la liste dans le section d'après)
- ... autres propriétés ....
Transitions
Nom transition | Description | Propriétés nom : -description -valeur par defaut -autres valeurs |
Exemple |
---|---|---|---|
random | Laisser le script choisir la transition à utiliser |
|
transition : { name : "random", constant : true } |
fade | variation opacité | Aucune |
transition : { name : "fade" } |
slide | Déplacement image entiere |
|
transition : { name : "slide", direction : "vertical" } |
slices | Découpage de l'image en lamelles et deplacement des lamelles |
|
transition : { name : "slices", direction : "horizontal", count : 20 } |
tiles | Découpage de l'image en carreaux et deplacement des carreaux |
|
transition : { name : "tiles", random : true, count : 25 } |
circle | Transition en cercle |
|
transition : { name : "circle", origin : "top-left" } |
square | Transition en carré |
|
transition : { name : "square", origin : "bottom-left" } |