Slicing Doors

For what ?

Show your realizations, photos, etc. in a only block. In the hovering or in the targeting (keyboard navigation), the legend of an image will be revealed leaving place with a rather free contents.

See the demonstration

As show it the demo, you can chose among 1, 2 and 4 doors.

Usage

This type of tool is very simple to set up because it is a plugin of the jQuery library. It's also very light (6,87 Ko) and can be reduced thanks to the Gzip compression in approximately 1,6 ko.

  1. The HTML structure of your document will have to look like it:
    <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>
    If your classes are different you will have to adapt the file CSS.
  2. Load the file of the styles of the plugin. This code for calling the CSS file must be placed before the </head> tag:
    <link href="css/juizSlicingDoors.css" rel="stylesheet"
    type="text/css" media="screen, projection" />
    These styles are customizable, naturally.
  3. Download the jQuery library, or make a link from the Google API .
    Place this call of the javascript file just before the </body> tag:
    <script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">
    </script>
  4. Load the file of the plugin in the same way by placing it after the line of call of the library. Here we imagine that your scripts are in the root of your site, in a directory named "scripts". To you to modify this road if need:
    <script type="text/javascript"
    src="/scripts/juizSlicingDoors.min.js"></script>
  5. Call the function by targeting exactly the elements to be placed in the Slicing Doors.
    Place this code following the previous two lines:
    <script type="text/javascript">
    	$(document).ready(function() {
    		$(".juizCaption").juizSlicingDoors();
    	});
    </script>

Customization

This plugin offers you quite a lot of customizations which will maybe be still widened afterward. For the moment here are those proposed and their default parameters.

Name Description Value / "Default"
nbDoors The number of doors in the animation Le nombre 1, 2 or 4
Default : "4"
animOrientation The orientation of the animation. Useless option if the number A word among: "top", "bottom", "left" or "right" (for 1 door), "vertical" or "horizontal" (for 2 doors)
Default : "vertical"
showEffect Effect of opening animation A name of jQuery Easing effect
Default : "jswing"
hideEffect Effect of closing animation A name of jQuery Easing effect
Default : "easeOutBounce"
showDuration Duration of the opening animation An integer (milliseconds)
Default : "300"
hideDuration Duration of the closing animation An integer (milliseconds)
Default : "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

If you wish it we speak about it on the blog, so don't hesitate to ask your questions!

When you wish to modify a style, you just have to complete the function like that:

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

Enjoy!

* jQ.CreativeJuiz.fr *