Slicing Doors : Display images and captions in one block JQuery

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.

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.

DOWNLOADDEMONSTRATIONPLUGIN HOMEPAGE

• IMPLEMENTATION
• OPTIONS
• SCREENSHOTS

IMPLEMENTATION: 

1. First, include CSS & jQuery files

1 2 3 4 5 6

<!-- CSS files --> <link href="juizSlicingDoors.css" rel="stylesheet" type="text/css" media="screen, projection" />   <!-- Js Files --> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="juizSlicingDoors.min.js"></script>

2. Write your HTML

1 2 3 4 5 6 7 8 9 10 11

<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>

3. Finnaly, call the plugin

1 2 3 4 5 6 7 8 9 10 11 12

<script type="text/javascript">         $(document).ready(function() {                 /* simple call */                 $(".juizCaption").juizSlicingDoors();                               /* more complex call*/                 $(".juizCaption").juizSlicingDoors({                      'nbDoors'       :       "2",                      'animOrientation'       :       "horizontal"                 });         }); </script>

OPTIONS: 

nbDoors

Integer

Default : 4 - The number of doors in the animation. Can be set to "1", "2" or "4"

animOrientation

String

Default : vertical - 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)

showEffect

String

Default : jswing - Effect of opening animation (jQuery easing effect)

hideEffect

String

Default : easeOutBounce - Effect of closing animation (jQuery easing effect)

showDuration

Integer

Default : 300 - In ms, duration of the opening animation

hideDuration

Integer

Default : 800 - In ms, duration of the closing animation

SCREENSHOTS

• 
  Exemple with 4 parts
• 
  Exemple with 1 part
•