Fullscreen Lightbox Gallery With Thumbnail Navigation - jQuery lightboxed

lightboxed is a jQuery plugin for displaying any content (images, videos, text, galleries) in a fullscreen lightbox.

• Lightweight and easy.
• Fully responsive.
• Navigation arrows.
• Thumbnail navigation.
• Custom captions.

See Also:

• 10 Best Lightbox Gallery Plugins In JavaScript & CSS

How to use it:

1. Import the lightboxed plugin's files into the document.

<link href="js/lightboxed/lightboxed.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="js/lightboxed/lightboxed.js"></script>

2. Just add the CSS class lightboxed to the media link and the plugin will do the rest.

<a href="image.jpg" class="lightboxed">Text Link</a>

3. You can also load inline content to the lightbox as follows:

<a href="#inline" class="lightboxed">Inline content</a>
<div id="inline" style="display: none;">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff;">
    Some inline content
  </div>
</div>

4. To create a lightbox gallery, group your medias using the rel attribute:

<img class="lightboxed" 
     rel="group1" 
     src="small-1.jpg" 
     data-link="large-1.jpg" 
     alt="Image Alt 1" 
     data-caption="Caption 1" />
<img class="lightboxed" 
     rel="group1" 
     src="small-2.jpg" 
     data-link="large-2.jpg" 
     alt="Image Alt 2" 
     data-caption="Caption 2" />
<img class="lightboxed" 
     rel="group3" 
     src="small-3.jpg" 
     data-link="http://www.youtube.com/embed/Rix_3b9ThLI?list=PL8zglt-LDl-iwBHEl3Pw1IhWGp9cfgMrc"
     data-width="560"
     data-height="315" />

Features:

---

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