Lightweight Plugin For Responsive Image & Video Lightbox – photobox

Photobox is a very lightweight jQuery plugin for image and video lightbox gallery. It is highly customizable and can be completely controlled and themed directly from the CSS. Animation effect of the plugin is very smooth which uses CSS3 transition.

Photobox is only provided styling for the lightbox gallery so you will need to style the appearance of the thumbnail yourself through CSS.

Features:

• Lightweight and easy to use.
• Fully responsive.
• Supports keyboard & mouse navigation
• Smooth CSS3 transition.
• Supports video embedding via iframe.

How to use it:

1. Include the Javascript jquery.photobox.js at the bottom of the web page.

<script src="/path/to/jquery.photobox.js"></script>

2. Include the CSS photobox.css in the header of the page.

<link rel="stylesheet" href="/path/to/photobox.css">

3. Add the basic HTML to the page.

<div id="gallery">
  <ul>
    <li><a href="/path/to/demo-1.jpg"><img src="/path/to/demo-1.jpg" alt=""></a></li>
    <li><a href="/path/to/demo-2.jpg"><img src="/path/to/demo-2.jpg" alt=""></a></li>
    <li><a href="/path/to/demo-3.jpg"><img src="/path/to/demo-3.jpg" alt=""></a></li>
  </ul>
</div>

4. Initialize the plugin and we’re ready to go.

$('#gallery').photobox('a',{
   time:0
 });

Videos

<div id="gallery">
    ...
    <a href="http://www.youtube.com/embed/W3OQgh_h4U4" rel="video">
        <img src="http://img.youtube.com/vi/W3OQgh_h4U4/0.jpg"
            title="PEOPLE ARE AWESOME 2013 FULL HD ">
    </a>
    ...
</div>

– Using a callback and a fancier selector

$('#gallery').photobox('li > a.family',{ time:0 }, callback);
function callback(){
   console.log('image has been loaded');
}

– Destroy the plugin on a certain gallery:

$('#gallery').photobox('destroy');

– Re-initialize the photbox DOM (does what Document ready does)

$('#gallery').photobox('prepareDOM');

Changing transition effects

.pbHide .pbWrapper > *,
.pbHide .pbWrapper > .prepare{ opacity:0; transition:.2s ease-in; }

.pbWrapper > div,
.pbWrapper > img{
    transition:.2s ease-out;
    opacity: 1;
}

/*** when going to the next slide ***/
/* prepare next slide which will be shown */
.pbWrapper > *,
.pbHide.next .pbWrapper > .prepare{ transform:translatex(40%); }
/* prepare current slide which will "go away" */
.pbHide.next .pbWrapper > *{ transform:translatex(-40%);  }

/* when going to the previous slide */
.pbWrapper > *,
.pbHide.prev .pbWrapper > .prepare{ transform:translatex(-40%); }
.pbHide.prev .pbWrapper > *{ transform:translatex(40%); }

Plugin’s default options: