Multi-content jQuery Image Lightbox Plugin - Portfolio Lightbox

Portfolio Lightbox is a simple-to-use jQuery plugin which displays the large version of your thumbnail image with descriptions and links in a responsive modal popup. It features a large image on the left and a content area containing details about the image on the right. A little similar to the Facebook's photo viewing box.

See also:

• Facebook Like jQuery Responsiv Modal Box Plugin - Mike's Modal Library
• Creating A Image Viewer with Descriptions Like Facebook - jQuery FBPhotoBox
• Facebook Like jQuery Image Gallery Lightbox Plugin - AM2 SimpleSlider

How to use it:

1. Add a thumbnail image to your webpage.

<img src="small.jpg" class="demo">

2. Load jQuery library and the jQuery Portfolio Lightbox plugin at the bottom of the webpage.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.portfoliolightbox.js"></script>

3. Call the function on the thumbnail and specify the source of your large image.

$(".demo").lightBox({
  imgpath: 'large.jpg'
});  

4. Specify the image details displayed in the content area.

$(".demo").lightBox({
  imgpath: 'large.jpg',
  title: 'Your Title',
  text: 'Enter any text',
  link: ['http://www.link1.com', 'http://www.link2.com'],
  linkText: ['Site 1 Text', 'Link 2 text']
});  

5. Style the image lightbox.

#lightboxBackground {
  display: none;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

#displayContainer {
  display: none;
  position: fixed;
  background: rgba(0,0,0,0.85);
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  /* next two settings set the div centered vertically */
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  padding: 30px;
  box-shadow: 0 10px 25px #202020;
  color: #fff;
}

#displayContainer a {
  color: #fff;
  text-decoration: none;
}

#imgContainer {
  width: 60%;
  float: left;
}

#imgContainer img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.break { clear: both; }

#textContainer {
  float: left;
  width: 35%;
  height: 100%;
  margin-left: 10px;
  padding-left: 10px;
}

#textContainer h2 { margin-top: 0; }

---

This awesome jQuery plugin is developed by pwellsau. For more Advanced Usages, please check the demo page or visit the official website.