TileBox jQuery : Modern Responsive LightBox

Mar 26, 2014 in Lightbox 3120 views

Download

Overview
Documents

User Rating: 4.7/5 ( 1 votes)

Your Rating:

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:

JS Tutorial

TileBox jQuery : Modern Responsive LightBox

SECTION 1: INSTALLING TILEBOX JQUERY PLUGIN.

SECTION 2: TILEBOX JQUERY HTML STRUCTURE.

SECTION 3: CALL TILEBOX JQUERY PLUGIN.

SECTION 4: PARAMETERS AND ANIMATION EFFECTS.

Related Articles