Multi-content jQuery Image Lightbox Plugin - Portfolio Lightbox
File Size: | 4.45 KB |
---|---|
Views Total: | 2457 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.