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.

 

 

 

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.

 

 

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.

 

 

That’s it. If you have any questions that are beyond the scope of this plugin, please feel free to open tickets in Support Zone. No guarantees, but I’ll do my best to assist you. Thanks so much!