jQuery Plugins Plugins 

MetroBox – Unique Responsive Lightbox jQuery

SONHLAB , , , , , , , ,

MetroBox is a Responsive LightBox jQuery plugin for displaying photos/videos or anything you want with visitor/user comments ( like social network features ). With this plugin you can show photos/video with their comments and other information. Additional, the responsive design and swipe feature make this plugin can work well on almost platforms.

 

Buy Now

 

 

Demos:

MetroBox Responsive Lightbox jQuery Demo

 

MetroBox Features:

  • Responsive Design.
  • Swipe to move next/prev content.
  • Support all HTML content ( Text, images, video, iframe … ).
  • Show Comment For Each Content.
  • Show Custom Content For Each Content.
  • Easy Make Infinite Gallery with Content Group.
  • Custom Content Box for Text, HTML , PHP…
  • Many Options to Customize Colors, Background, Content, Comments.
  • Ajax load.

 

Change Logs:

26 Sep 2014: Version 1.4:

  • Improve Scrolling Feature in Content Zone for mobile.
05 May 2014: Version 1.3:
  • Fix bugs.
  • Change CSS file structure.
  • Optimize souce code.
  • Add HTML demo version.
20 Apr 2013: Version 1.2:
  • Support ESC key to close MetroBox.
  • Support Left and Right Arrow keys to move next/prev boxes.
  • Add a javascript param to change content file extension ( ext ).
  • Update new versions of  jQuery Library and jQuery UI.
03 Oct 2012: Version 1.1:
  • Add new custom content zone.
  • Support swipe to move content in group.
  • Fix some display bugs on mobile devices.
  • Support infinite gallery.
20 Aug 2012: First Version.

 

Credits:

  • jQuery Library.
  • jQuery UI.
  • Touch Punch Plugin.
  • jScrollPane Plugin.
  • MouseWheel Plugin.

 

Table of Contents:

  1. Setup MetroBox Plugin.
  2. Call MetroBox Plugin.
  3. Content Package Structure.
  4. Comment Package Structure.
  5. Parameters.

 

[ga_res]

 

Section 1: Setup MetroBox Plugin.

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

Include the following code into HEAD section of the page.

Include CSS files:

<link rel="stylesheet" href="css/sonhlab-base.css" type="text/css" />
<link rel="stylesheet" href="css/metrobox.css" type="text/css" />
<meta name="viewport" content="width=device-width, user-scalable=no" />

<!-- IE 8 -->
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/metrobox-ie.css" type="text/css" />
<link rel="stylesheet" href="css/sonhlab-fix-ie8.css" type="text/css" />
<![endif]-->

 

Include Javascript files:

<!-- Start jQuery Library -->
<!--[if !IE]> -->
<script type="text/javascript" src="js/jquery/jquery.min.2.1.1.js"></script>
<!-- <![endif]-->
<!--[if gte IE 9]>
<script type="text/javascript" src="js/jquery/jquery.min.2.1.1.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/jquery/jquery.min.1.11.1.js"></script>
<![endif]-->
<!-- End jQuery Library -->

<!-- jQuery UI -->
<script type="text/javascript" src="js/jquery/jquery-ui.1.11.1.min.js"></script>

<!-- mousewheel plugin -->
<script type="text/javascript" src="js/jscrollpane/jquery.mousewheel.min.js"></script>

<!-- jScrollPane script -->
<script type="text/javascript" src="js/jscrollpane/jquery.jscrollpane.min.js"></script>

<!-- Touch Punch -->
<script type="text/javascript" src="js/touchpunch.min.js"></script>

<!-- MetroBox plugin -->
<script type="text/javascript" src="js/metrobox.min.js"></script>

Setup is done.

 

Section 2: Call MetroBox Plugin.

This section should be read along with the example file ( “metrobox.php” file ) also contained in the download package.

To call the plugin we need to add a script like bellow into the <head> tag

<script type="text/javascript">
   $(element).metrobox({
      metroboxBg: 'img-purtywood',
      mbHeaderBg: 'transparent-black',
      mbFooterBg: 'transparent-black',
      mbContentBg: 'transparent-black',
      mbContentTypo: 'light',
      mbCommentState: 1,
      mbCommentBg: 'solid-smoke',
      mbCommentTypo: 'dark',
      mbAuthorBg: 'solid-blue',
      mbBreaklineColor: 'transparent-smoke',
      mbContentScrollbar: 'transparent-black',
      mbCommentScrollbar: 'solid-black',
      mbAnimEffect: 'fade',
      mbAnimDuration: 400,
      mbcontentAnimEffect: 'fade', 
      mbcontentDuration:400,
      ext: 'php'
   });
 </script>

 

HTML:

To determine which content will be shown We need to add a data-mbid attribute into the element.

<span id="demo" data-mbid="demo-content">Demo MetroBox</span>

With HTML code above when we click on “Demo MetroBox” the plugin will get content in link:
“content/metrobox/mb-content.php?mbid=demo-content”
And comments will be loaded from link:
“content/metrobox/mb-comment.php?mbid=demo-content”

To group many content we need to add a data-mbgid with the same value for all content you want them in a group.

<div class="thumbnails" data-mbgid="mb-contentgroup-1" data-mbid="mb-content-4">
    <img src="content/metrobox/mb-demo-img/pic-2.jpg" />
  </div>
  <div class="thumbnails" data-mbgid="mb-contentgroup-1" data-mbid="mb-content-5">
    <img src="content/metrobox/mb-demo-img/pic-3.jpg" />
  </div>
  <div class="thumbnails" data-mbgid="mb-contentgroup-1" data-mbid="mb-content-6">
    <img src="content/metrobox/mb-demo-img/pic-4.jpg" />
  </div>
  <div class="thumbnails" data-mbgid="mb-contentgroup-1" data-mbid="mb-content-6">
    <img src="content/metrobox/mb-demo-img/pic-5.jpg" />
  </div>
  <div class="thumbnails" data-mbgid="mb-contentgroup-1" data-mbid="mb-content-7">
    <img src="content/metrobox/mb-demo-img/pic-6.jpg" />
  </div>
  <div class="thumbnails" data-mbgid="mb-contentgroup-1" data-mbid="mb-content-9">
    <img src="content/metrobox/mb-demo-img/pic-7.jpg" />
  </div>

When we click on an image in HTML above ( example: we click on pic-2.jgp ). The plugin will get content in the link:
“content/metrobox/mb-content.php?mbgid=mb-contentgroup-1&mbid=mb-content-4“.

End Section 2.

 

Section 3: Content Package Structure.

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

A content package will has a structure like below (You need to follow the structure to make sure the content will be displayed correctly):

<div id="mbid-value" class="mbgid-value">
    <div class="mb-content">
        // Add Content Here
    </div>
  </div>

mbid-value: This is the value of data-mbid in the HTML element.
mbgid-value: This is the value of data-mbgid in the HTML element. If the element does not have data-mbgid value we can ignore this class.

Example:
1. Content with paragraph:

<div id="mb-content-1">
    <div class="mb-content">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
  </div>

2. Image Content (we use “mb-imgholder” and “mb-reponsive-img” classes for responsive design):

<div id="mb-content-2">
    <div>
       <div>
       <img src="content/metrobox/mb-demo-img/pic-1.jpg" alt="" class="mb-responsive-img" />
       </div>
    </div>
  </div>

3. Video/Iframe ( we use “mb-videoholder” and “mb-responsive-video” for responsive design ):

<div id="mb-content-3">
    <div class="mb-content">
       <div class="mb-videoholder">
       <iframe src="youtube-link/vimeo-link" class="mb-responsive-video"></iframe>
       </div>
    </div>
  </div>

4. Content Group:

<div id="mb-content-4" class="mb-contentgroup-1">
    <div class="mb-content">
       <div class="mb-imgholder">
       <img src="content/metrobox/mb-demo-img/pic-2.jpg" alt="" class="mb-responsive-img mb-swipe" />
       </div>
    </div>
  </div>

  <div id="mb-content-5" class="mb-contentgroup-1">
    <div class="mb-content">
       <div class="mb-imgholder">
       <img src="content/metrobox/mb-demo-img/pic-3.jpg" alt="" class="mb-responsive-img mb-swipe" />
       </div>
    </div>
  </div>

  <div id="mb-content-6" class="mb-contentgroup-1">
    <div class="mb-content">
       <div class="mb-imgholder">
       <img src="content/metrobox/mb-demo-img/pic-4.jpg" alt="" class="mb-responsive-img mb-swipe" />
       </div>
    </div>
  </div>

*mb-swipe class: use to enable swipe feature. This feature just work when it is used in a content group.

End Section 3.

 

Section 4: Comment Package Structure.

This section should be read along with the content file ( “content/metrobox/mb-comment.php” file ) also contained in the download package.

A comment package has structure like below:

<div class="mb-comments">
    <div class="mb-cmmes">
      <!-- Author Info -->
      <div class="mb-author">
        <div class="mb-useravatar"><img src="images/metrobox/avatar/demo.jpg" alt="" /></div>
        <div class="mb-meszone">
          <span class="mb-cmuser">Author's Name</span>
          <span class="mb-cmdate">Created date</span>
        </div>
        <div class="clearspace"></div>
      </div>
      <!-- End Author Info -->

      <!-- Comment 1 -->
      <div class="mb-commentpackage">
        <div class="mb-useravatar"><img src="images/metrobox/avatar/demo.jpg" alt="" /></div>
        <div class="mb-meszone">
          <span class="mb-cmuser">Username</span>
          <span class="mb-cmmessage">Message</span>
          <span class="mb-cmdate">Comment date</span>
        </div>
        <div class="clearspace"></div>
      </div>
      <div class="breakline"></div>
      <!-- End Comment 1 -->

      <!-- Comment 2 -->
      <div class="mb-commentpackage">
        <div class="mb-useravatar"><img src="images/metrobox/avatar/demo.jpg" alt="" /></div>
        <div class="mb-meszone">
          <span class="mb-cmuser">Username</span>
          <span class="mb-cmmessage">Message</span>
          <span class="mb-cmdate">Comment date</span>
        </div>
        <div class="clearspace"></div>
      </div>
      <div class="breakline"></div>
      <!-- End Comment 2 -->

    </div>
  </div>

End Section 4.

 

Section 5: Parameters.

Javascript Parameters:

Parameters Properties Description
metroboxBg string This param is used to set background for MetroBox.
Use Color classes in CSS file.
mbHeaderBg string This param is used to set background for MetroBox Header panel.
Use Color classes in CSS file.
mbFooterBg string This param is used to set background for MetroBox Footer panel.
Use Color classes in CSS file.
mbContentBg string This param is used to set background for MetroBox Content.
Use Color classes in CSS file.
mbContentTypo string This param is used to set font, color for Content.
Use Color classes in CSS file.
mbCommentState boolean This param is used to enable/disable Comment box.
Value: 1: enable, 0: disable.
Default: 1.
mbCustomState boolean This param is used to enable/disable Custom Content box
Value: 1: enable, 0: disable
Default: 1
mbCommentBg string This param is used to set background for Comment Box.
Use Color classes in CSS file.
mbCommentTypo string This param is used to set font, color for Comment Box.
Use Color classes in CSS file.
mbContentScrollbar string This param is used to set scrollbar color for Content Box.
Use Color classes in CSS file.
mbCommentScrollbar string This param is used to set scrollbar color for Comment Box.
Use Color classes in CSS file.
mbAuthorBg string This param is used to set background for Author in Comment Box.
Use Color classes in CSS file.
mbBreaklineColor string This param is used to set breakline color in Comment Box.
Use Color classes in CSS file.
mbAnimEffect string This param is used to set animation effect to open and close MetroBox.
Value: none, fade.
Default: fade.
mbAnimDuration integer This param is used to set duration for mbAnimEffect.
Default: 400.
mbcontentAnimEffect string This param is used to set animation effect to show and hide MetroBox Content.
Value: none, fade.
Default: fade.
mbcontentDuration integer This param is used to set duration for mbcontentAnimEffect.
Default: 400.
EnableKeys boolean This param is used to enable/disable key functions.
Value: true | false.
ext string This param is used to set content file extension.
Default Value: ‘php’.
mbCustomBg string This param is used to set background for Custom Content box.
Value: Use background classes in CSS file.
mbCustomTypo string This param is used to set text font, color for Custom Content box.
Value: CSS classes.
mbCustomScrollbar string This param is used to set scrollbar color for Custom Content box.
Value: CSS classes.

 

 

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