TileBox jQuery – Modern Responsive Lightbox

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. Please check demos below to see how it works.

 

[tile_bt btstyle=”tile-bt-2 solid-orange-2 hovershadow-orange left-2 margin-10″ icon=”demo-white-circle-48″ title=”Demo”]http://demo.sonhlab.com/biz/js-plugins/tilebox/demo.php[/tile_bt][tile_bt btstyle=”tile-bt-2 solid-green hovershadow-green” icon=”shopping-white-circle-48″ title=”Buy Now”]http://codecanyon.net/item/tilebox-jquery-modern-responsive-lightbox/5951621?ref=SOHN[/tile_bt][clearspace][/clearspace]

 

 

TileBox jQuery Features:

  • Support 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.

 

Change Logs:

October 2013: First Version.

 

Credits:

  • jQuery Library.
  • jQuery Mobile.

 

Table of Contents:

  1. Installing TileBox jQuery Plugin.
  2. TileBox jQuery HTML Structure.
  3. Call TileBox jQuery Plugin.
  4. Parameters and Animation Effects.

 

[ga_res]

 

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.

 

 

[endedwords product=””]http://talk.sonhlab.com/room/tilebox-jquery-plugin[/endedwords]