TileBox – Modern Responsive LightBox CSS is a small CSS plugin that is used to create modern lightbox with CSS3 Animation Effects for modern browsers. TileBox is very light, it’s absolute 100% HTML and CSS so it can be customized easily.

 

 TileBox - Modern Responsive LightBox CSS


 

TileBox CSS Features:

  • Responsive Design.
  • CSS3 Animation Effects.
  • Switch between two view sizes.
  • Easy to Set Auto Display at initial load.
  • Customize Easily.
  • Simple HTML Structure.

 

Change Logs:

  •  Jun 2013: First Version.

 

Credits:

 

Table of Contents:

  1. Setup TileBox CSS Plugin.
  2. TileBox HTML Structure.
  3. CSS3 Animation Classes.

 

 

 

Section 1: Setup TileBox CSS Plugin.

First of all, to ensure everything works correctly, please use <!DOCTYPE html>.

Include the following code into HEAD section of the page.

Include CSS files:

<meta name="viewport" content="width=device-width, user-scalable=no" />

<!-- CSS3 Animation -->
<link rel="stylesheet" href="css/animate-custom.css" type="text/css" />

<!-- TileBox CSS Pack -->
<link rel="stylesheet" href="css/tilebox-css.css" type="text/css" />

TileBox setup is done.

 

Section 2: TileBox HTML Structure.

This section should be read along with the example files also contained in the download package.

In this plugin, each TileBox is controlled by a hidden checkbox ( id=”box-id” ) that is checked or unchecked by a label ( for=”box-id” ). When this checkbox is checked a TileBox will be displayed.

Create a simple label to check or uncheck a hidden checkbox:

<label for="box-id">
  // Add some text or image here
</label>

Then create the hidden checkbox and TileBox structure:

<input type="checkbox" id="box-id" class="tliebox">
<div class="box-content">

  <!-- Start Control Buttons -->
  <div>

    <!-- Start Close Button -->
    <label for="box-id" class="box-closebt solid-red">
      <img src="images/demo/close.png" alt="close" />
    </label>
    <!-- End Close Button -->

    <!-- Start Fitsize Button -->
    <label for="fitsize-box-id" class="box-fitsizebt solid-green">
      <img src="images/demo/fit-size.png" alt="fit-size" />
    </label>
    <!-- End Fitsize Button -->

    <!-- Start Info Button -->
    <label for="box-id-info" class="box-infobt solid-blue-2">
      <span class="light-text">i</span>
    </label>
    <!-- End Info Button -->

  </div>    
  <!-- End Control Buttons -->

  <!-- Start Image Zone -->
  <input type="checkbox" id="fitsize-box-id" class="fitsize">
  <article class="box-img">

    <!-- Start Main Image -->
    <div class="main-img">
      <img src="image-link" alt="" />
    </div>
    <!-- End Main Image -->

  </article>
  <!-- End Image Zone -->

  <!-- Start Info Zone -->
  <input type="checkbox" id="box-id-info" class="box-info">
  <article class="box-info-content">

    <!-- Start Close Button -->
    <label for="metrotab-info" class="info-closebt solid-red">
      <img src="images/demo/down.png" alt="close" />
    </label>
    <!-- End Close Button -->

    <p class="info-title light-text">
      <p class="light-text">
        // Add some content here
      </p>
    </p>
  </article>
  <!-- End Info Zone -->

</div>

Each TileBox has three main parts: Button Block, Main Image Block and Info Box Block.

In Button Block we have three buttons: one to close the TileBox, one to switch the main image size, one to open/close the Info Box Block.

The Close Button will control the TileBox and it has the “for” value is same the “for” value of label we use to open TileBox.

The Switch Button is used to change the main image size so we need a hidden checkbox to control this function ( see it in the Image Zone ).

The Info Box button is used to open/close the info box block. Like the Switch Button we need a hidden checkbox to control this function ( see it in Info Zone ).

 

Finally, to manage all TileBox easily we will put them into a TileBox Station block ( in demo file it has id=”box-station” ).

 

Section 3: CSS3 Animation Classes.

box-flip | box-flipInX | box-flipInY | box-fadeIn | box-fadeInUp | box-fadeInDown | box-fadeInLeft | box-fadeInRight | box-fadeInUpBig | box-fadeInDownBig | box-fadeInLeftBig | box-fadeInRightBig | box-bounceIn | box-bounceInUp | box-bounceInDown | box-bounceInLeft | box-bounceInRight | box-rotateIn | box-rotateInUpLeft | box-rotateInDownLeft | box-rotateInUpRight | box-rotateInDownRight | box-lightSpeedIn | box-rollIn.

To use CSS3 Animation Classes you just add an “animated” class and an animation class above into Image Box and Info Box. Please see demo files for more detail.

 

 

That’s it. If you have any questions that are beyond the scope of this plugin, please feel free to email me via Contact Form. No guarantees, but I’ll do my best to assist you. Thanks so much!

 

 

LEAVE A COMMENT
Set your Twitter account name in your settings to use the TwitterBar Section.