Slicing Doors

À quoi sert-il ?

Affichez vos réalisations, photos, infographie, etc. dans un unique bloc. Au survol ou au ciblage (navigation clavier) la légende d'une image sera révélée laissant place à un contenu plutôt libre.

Voir la démonstration

Comme le montre la démonstration, vous pouvez choisir entre 1, 2 et 4 volets.

Utilisation

Ce type d'outil est très simple à mettre en place puisqu'il s'agit d'un plugin de la bibliothèque jQuery. Il est aussi très léger (6,87 Ko) et peut même encore être réduit grâce à la compression Gzip à environ 1,6 ko.

  1. La structure HTML de votre document devra ressembler à cela :
    <div class="juizCaption">
    	<a href="#">
    		<img src="img/photo1.png" 
    		alt="" class="juiz-thumbnail" />
    	</a>
    
    	<div class="caption">
    		<h2>Snow snow snow</h2>
    		<p>If you jump, you jumped !</p>
    	</div>
    </div>
    Si vos classes sont différentes vous devrez adapter le fichier CSS.
  2. Chargez le fichier des styles du plugin. Ce code d'appel au fichier CSS doit être placé avant la balise </head> :
    <link href="css/juizSlicingDoors.css" rel="stylesheet"
    type="text/css" media="screen, projection" />
    Ces styles sont personnalisables, bien entendu.
  3. Téléchargez la bibliothèque jQuery, ou faites un lien depuis l'API Google.
    Placez cet appel du fichier javascript juste avant la balise </body> :
    <script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">
    </script>
  4. Chargez le fichier du plugin de la même manière en le plaçant après la ligne d'appel de la bibliothèque.
    Ici nous imaginons que vos scripts se trouvent à la racine de votre site, dans un dossier nommé "scripts".
    A vous de modifier ce chemin si besoin :
    <script type="text/javascript"
    src="/scripts/juizSlicingDoors.min.js"></script>
  5. Appelez la fonction en ciblant précisément les éléments à placer dans les Slicing Doors.
    Placez ce code à la suite des deux précédentes lignes :
    <script type="text/javascript">
    	$(document).ready(function() {
    		$(".juizCaption").juizSlicingDoors();
    	});
    </script>

Personnalisation

Ce plugin vous offre pas mal de personnalisations qui seront peut-être encore étendues par la suite. Pour le moment voici celles proposées et leurs paramètres par défaut.

Nom Description Valeur / "Défaut"
nbDoors Le nombre de volets dans l'animation Le nombre 1, 2 ou 4
Défaut : "4"
animOrientation L'orientation de l'animation. Option inutile si le nombre de volets est de quatre Un mot parmi : "top", "bottom", "left" ou "right" (pour 1 volet), "vertical" ou "horizontal" (pour 2 volets)
Défaut : "vertical"
showEffect L'effet d'animation d'ouverture Un nom d'effet jQuery Easing
Défaut : "jswing"
hideEffect L'effet d'animation de fermeture Un nom d'effet jQuery Easing
Défaut : "easeOutBounce"
showDuration Durée de l'animation d'ouverture Un nombre (millisecondes)
Défaut : "300"
hideDuration Durée de l'animation de fermeture Un nombre (millisecondes)
Défaut : "800"

Afficher la liste des valeurs de jQuery Easing

  • jswing
  • def
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInSine
  • easeOutSine
  • easeInOutSine
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInCirc
  • easeOutCirc
  • easeInOutCirc
  • easeInElastic
  • easeOutElastic
  • easeInOutElastic
  • easeInBack
  • easeOutBack
  • easeInOutBack
  • easeInBounce
  • easeOutBounce
  • easeInOutBounce

Si vous le souhaitez nous en parlons sur le blog, alors n'hésitez pas à poser vos questions !

Lorsque vous souhaitez modifier un style, il vous suffit de compléter la fonction ainsi :

$(".juizCaption").juizSlicingDoors({
	'nbDoors'	:	"2",
	'animOrientation'	:	"horizontal"
});

Amusez-vous bien !

* jQ.CreativeJuiz.fr *