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.

Buy Now

Demos:

TileBox jQuery Plugin Demo

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.

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

Effects to Hide:

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