MixSlide - Documentation

Code informations

Author
NKOUANANG KEPSEU Vivian Porel
Languages
HTML - CSS - JavaScript (JQuery)
Details A plug-in developped to make slideshow implementation easy in web sites and web applications

Summary

  1. Code HTML
  2. Style CSS
  3. Script d'insertion
  4. Options du plug-in
  5. Transitions
#mixSlide

Code HTML

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)

Exemple
				transition : {
					name : "slices",
					count : 10
				}
			

Transitions

Nom transition Description Propriétés
nom :
-description
-valeur par defaut
-autres valeurs
Exemple
random Laisser le script choisir la transition à utiliser
  • constant
    • Une meme transition durant tout le diaporama ou changement pour chaque image
    • false
    • true | false
	transition : {
		name : "random",
		constant : true
	}
fade variation opacité Aucune
	transition : {
		name : "fade"
	}
slide Déplacement image entiere
  • direction
    • Direction du déplacement
    • "horizontal"
    • "horizontal" | "vertical"
	transition : {
		name : "slide",
		direction : "vertical"
	}
slices Découpage de l'image en lamelles et deplacement des lamelles
  • direction
    • Direction du déplacement
    • "horizontal"
    • "horizontal" | "vertical"
  • count
    • Nombre de lamelles
    • 4
    • un entier (un nombre trop grand (> 50) peut ralentir le script)
	transition : {
		name : "slices",
		direction : "horizontal",
		count : 20
	}
tiles Découpage de l'image en carreaux et deplacement des carreaux
  • random
    • Deplacement aléatoire pour chaque carreau
    • false
    • true | false
  • count
    • Nombre de carreaux
    • 16
    • un carré parfait[4, 9, 16, ...] (un nombre trop grand (> 64) peut ralentir le script)
	transition : {
		name : "tiles",
		random : true,
		count : 25
	}
circle Transition en cercle
  • origin
    • Centre du cercle
    • "center"
    • "center" | "top-left" | "top-right" | "bottom-left" | "bottom-right"
	transition : {
		name : "circle",
		origin : "top-left"
	}
square Transition en carré
  • origin
    • Centre du carré
    • "center"
    • "center" | "top-left" | "top-right" | "bottom-left" | "bottom-right"
	transition : {
		name : "square",
		origin : "bottom-left"
	}