- Overview
- Documents
TileBox jQuery – Modern Responsive LightBox is a small jQuery plugin that is used to create modern lightbox with CSS3 Animation Effects and customizing options for modern browsers.
Features:
- Responsive Design.
- CSS3 Animation Effects.
- Size Switcher.
- Combine Inline and AJAX content.
- Support Touch Swipe and Left, Right Keys to move prev/next box.
- Full Screen Custom Content.
- Show/Hide Thumbnail Ribbon.
SECTION 1: INSTALLING TILEBOX JQUERY PLUGIN.
First of all, to ensure everything works correctly, please use <!DOCTYPE html>.
Include the following code into HEAD section of the page.
Includes required CSS files:
<meta name="viewport" content="width=device-width, user-scalable=no" /> <!-- Style For Animation Effects --> <link rel="stylesheet" href="css/animation-effects.css" type="text/css" /> <!-- SONHLAB Style --> <link rel="stylesheet" href="css/sonhlab-base.css" type="text/css" /> <!-- Fix IE 8 --> <!--[if lt IE 9]> <link rel="stylesheet" href="css/sonhlab-fix-ie8.css" type="text/css" /> <![endif]--> <!-- TileBox jQuery Style --> <link rel="stylesheet" href="css/tilebox-js.css" type="text/css" />
Includes Javascript files:
<!-- Start jQuery Library --> <!--[if !IE]> --> <script type="text/javascript" src="js/jquery/jquery.min.2.0.3.js"></script> <!-- <![endif]--> <!--[if gte IE 9]> <script type="text/javascript" src="js/jquery/jquery.min.2.0.3.js"></script> <![endif]--> <!--[if lt IE 9]> <script type="text/javascript" src="js/jquery/jquery.min.1.10.2.js"></script> <![endif]--> <!-- End jQuery Library --> <!-- jQuery Mobile --> <script type="text/javascript" src="js/jquery/jquery.mobile.touch.min.1.3.2.js"></script> <!-- Tabion jQuery Plugin --> <script type="text/javascript" src="js/tilebox.min.js"></script>
Done. TileBox jQuery plugins is now ready to use.
SECTION 2: TILEBOX JQUERY HTML STRUCTURE.
This section should be read along with the example files also contained in the download package.
A simple TileBox HTML structure includes three parts: Control Buttons – Buttons to control TileBox, TileBox Content Holder – Place to add TileBox Package and Thumbnail Ribbon – each gallery can have one Thumbnail Ribbon.
The structure:
<div id="tilebox-station"> <!-- START CONTROL BUTTONS --> <div class="tb-ctrler"> <!-- Start Close Button --> <span class="tb-closebt light-border solid-red"> <img src="images/demo/close.png" alt="close button" /> </span> <!-- End Close Button --> <!-- Start Fitsize Button --> <span class="tb-fitsizebt light-border solid-green"> <img src="images/demo/fit-size.png" alt="fitsize button" /> </span> <!-- End Fitsize Button --> <!-- Start Info Button --> <span class="tb-infobt light-border solid-blue-2"> <img src="images/demo/info.png" alt="info button" /> </span> <!-- End Info Button --> <!-- Start Thumbnail Button --> <span class="tb-thumbbt light-border solid-jade"> <img src="images/demo/thumbs.png" alt="thumbnail button" /> </span> <!-- End Thumbnail Button --> <!-- Start Prev Button --> <span class="tb-prevbt transparent-black"> <img src="images/demo/prev.png" alt="prev button" /> </span> <!-- End Prev Button --> <!-- Start Next Button --> <span class="tb-nextbt transparent-black"> <img src="images/demo/next.png" alt="prev button" /> </span> <!-- End Next Button --> </div> <!-- END CONTROL BUTTONS --> <!-- START TILEBOX CONTENT --> <div class="tilebox-contentholder"> // Add TileBox Package Here </div> <!-- END TILEBOX CONTENT --> <!-- START A PHOTO THUMBNAIL RIBBON --> <div class="tb-thumbnail-ribbon" data-tbgid="gallery-id"> <!-- Start a demo thumbnail in Thumbnail Ribbon --> <span data-tbid="tilebox-id" class="tb-thumbnail"> <img src="thumbnail-image-path" alt="" /> </span> <!-- End a demo thumbnail in Thumbnail Ribbon --> <!-- Start a demo thumbnail in Thumbnail Ribbon --> <span data-tbid="tilebox-id" class="tb-thumbnail"> <img src="thumbnail-image-path" alt="" /> </span> <!-- End a demo thumbnail in Thumbnail Ribbon --> </div> <!-- END A PHOTO THUMBNAIL RIBBON --> </div>
A simpe TileBox package:
<!-- Start a simple TileBox package --> <div data-tbid="tilebox-id" data-animIn="fadeIn" data-animOut="vanishOut" class="tilebox-content"> <!-- Start Image Zone --> <article class="tilebox-img"> <!-- Start Main Image --> <div class="main-img"> <img src="main-image-path" alt="" /> </div> <!-- End Main Image --> </article> <!-- End Image Zone --> <!-- Start InfoBox - Custom Content Box --> <article class="tilebox-info transparent-darknight top-red-border"> <span class="info-ctrlbt solid-red"> <i class="info-expandbt"></i> <i class="info-collapsebt"></i> </span> <div class="tb-infocontent"> <p class="info-title light-text"> Box Title </p> <p class="light-text"> // Add some text or HTML code here. </p> </div> </article> <!-- End InfoBox --> </div> <!-- End a simple TileBox package -->
You can place TileBox packages and Thumbnail Ribbons in the TileBox station (when you want to use inline content) or place them in “content/tilebox/content.php” file (when you want to use AJAX method to load TileBox Content).
SECTION 3: CALL TILEBOX JQUERY PLUGIN.
To call TileBox jQuery plugin you just add this code below into the Head section:
<script type="text/javascript"> $(window).load(function() { $('body').tilebox({ enableSwipe: true, enableKeys: true }); }) </script>
At the element you want to open TileBox when clicking on it you just add “data-tbid” and “data-tbgid” (if you want to group many TileBox to make Gallery) and a “tilebox-button” class.
SECTION 4: PARAMETERS AND ANIMATION EFFECTS.
Javascript Parameters:
Parameters | Properties | Description |
enableSwipe | boolean |
This param is used to enable or disable Swipe feature to move next/prev TileBox. Value: true | false |
enableKeys | boolean |
This param is used to enable or disable Left and Right key to move next/prev TileBoxt. Value: true | false. |
HTML Parameters:
Parameters | Positions | Description |
data-tbid |
tilebox-button tilebox-content tb-thumbnail |
This param is used to set ID for TileBox buttons, TileBox Packages and Thumbnails. |
data-tbgid |
tilebox-button tb-thumbnail-ribbon |
This param is used to set Group ID for TileBox buttons and Thumbnail Ribbons. |
data-animIn | tilebox-content |
This param is used to set CSS3 animation effects to show TileBox. Check Animation List below. |
data-animOut | tilebox-content |
This param is used to set CSS3 animation effects to hide TileBox. Check Animation List below. |
CSS3 Animation Effect List:
Effects to Show:
flipInX | flipInY | fadeIn | fadeInUp | fadeInDown } fadeInLeft | fadeInRight | fadeInUpBig | fadeInDownBig | fadeInLeftBig | fadeInRightBig | bounceIn | | bounceInDown | bounceInUp | bounceInLeft | bounceInRight | rotateIn | rotateInDownLeft | rotateInDownRight | rotateInUpLeft | rotateInUpRight | lightSpeedIn | twisterInDown | twisterInUp | swap | puffIn | vanishIn | swashIn | foolishIn | tinRightIn | tinLeftIn | tinUpIn | tinDownIn.
Effects to Hide:
flipOutX | flipOutY | fadeOut | fadeOutUp | fadeOutDown | fadeOutLeft | fadeOutRight | fadeOutUpBig | fadeOutDownBig | fadeOutLeftBig | fadeOutRightBig | bounceOut | bounceOutDown | bounceOutUp | bounceOutLeft | bounceOutRight | rotateOut | rotateOutDownLeft | rotateOutDownRight | rotateOutUpLeft | rotateOutUpRight | lightSpeedOut | magic | puffOut | vanishOut | swashOut | foolishOut | holeOut | tinRightOut | tinLeftOut | tinUpOut | tinDownOut | bombRightOut | bombLeftOut.