Tilebox CSS
CSS Plugins Plugins 

TileBox – Modern Responsive LightBox CSS

SONHLAB , , , ,

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.

 

Buy Now

 

 

Demos:

TileBox – Modern Responsive LightBox CSS Demo

 

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. Installing TileBox CSS Plugin.
  2. TileBox CSS HTML Structure.
  3. CSS3 Animation Classes.

[ga_res]

 

Section 1: Installing 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 installation is done.

 

Section 2: TileBox CSS 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.

 

 

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

 

 

Same plugins that you may be interested in: