Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.
THE MOST COMPLETE HTML TEMPLATE
<div class="masonry-gallery columns-5 clearfix lightbox" data-img-big="1" data-plugin-options='{"delegate": "a", "gallery": {"enabled": true}}'> <a class="image-hover" href="demo_files/images/1200x800/24-min.jpg"> <img src="demo_files/images/600x400/24-min.jpg" alt="..."> </a> <a class="image-hover" href="demo_files/images/1200x800/25-min.jpg"> <img src="demo_files/images/600x400/25-min.jpg" alt="..."> </a> <a class="image-hover" href="demo_files/images/1200x800/26-min.jpg"> <img src="demo_files/images/600x400/26-min.jpg" alt="..."> </a> <a class="image-hover" href="demo_files/images/1200x800/27-min.jpg"> <img src="demo_files/images/600x400/27-min.jpg" alt="..."> </a> <a class="image-hover" href="demo_files/images/1200x800/28-min.jpg"> <img src="demo_files/images/600x400/28-min.jpg" alt="..."> </a> <a class="image-hover" href="demo_files/images/1200x800/29-min.jpg"> <img src="demo_files/images/600x400/29-min.jpg" alt="..."> </a> <a class="image-hover" href="demo_files/images/1200x800/30-min.jpg"> <img src="demo_files/images/600x400/30-min.jpg" alt="..."> </a> <a class="image-hover" href="demo_files/images/1200x800/31-min.jpg"> <img src="demo_files/images/600x400/31-min.jpg" alt="..."> </a> <a class="image-hover" href="demo_files/images/1200x800/32-min.jpg"> <img src="demo_files/images/600x400/32-min.jpg" alt="..."> </a> <a class="image-hover" href="demo_files/images/1200x800/33-min.jpg"> <img src="demo_files/images/600x400/33-min.jpg" alt="..."> </a> <a class="image-hover" href="demo_files/images/1200x800/34-min.jpg"> <img src="demo_files/images/600x400/34-min.jpg" alt="..."> </a> <a class="image-hover" href="demo_files/images/1200x800/35-min.jpg"> <img src="demo_files/images/600x400/35-min.jpg" alt="..."> </a> </div>
<!-- image-hover-icon supports two classes: image-hover-dark - dark hover background image-hover-light - light hover background --> <div class="masonry-gallery columns-5 clearfix"> <a class="image-hover lightbox" href="demo_files/images/1200x800/28-min.jpg" data-plugin-options='{"type":"image"}'> <span class="image-hover-icon image-hover-dark"> <i class="fa fa-search-plus"></i> </span> <img src="demo_files/images/600x400/28-min.jpg" alt="..."> </a> <a class="image-hover lightbox" href="demo_files/images/1200x800/25-min.jpg" data-plugin-options='{"type":"image"}'> <span class="image-hover-icon image-hover-dark"> <i class="fa fa-search-plus"></i> </span> <img src="demo_files/images/600x400/25-min.jpg" alt="..."> </a> <a class="image-hover lightbox" href="demo_files/images/1200x800/36-min.jpg" data-plugin-options='{"type":"image"}'> <span class="image-hover-icon image-hover-dark"> <i class="fa fa-search-plus"></i> </span> <img src="demo_files/images/600x400/36-min.jpg" alt="..."> </a> <a class="image-hover lightbox" href="demo_files/images/1200x800/13-min.jpg" data-plugin-options='{"type":"image"}'> <span class="image-hover-icon image-hover-dark"> <i class="fa fa-search-plus"></i> </span> <img src="demo_files/images/600x400/13-min.jpg" alt="..."> </a> <a class="image-hover lightbox" href="demo_files/images/1200x800/14-min.jpg" data-plugin-options='{"type":"image"}'> <span class="image-hover-icon image-hover-dark"> <i class="fa fa-search-plus"></i> </span> <img src="demo_files/images/600x400/14-min.jpg" alt="..."> </a> </div>
<!-- image-hover-icon supports two classes: image-hover-dark - dark hover background image-hover-light - light hover background --> <div class="masonry-gallery columns-2 clearfix"> <!-- Vimeo --> <a class="image-hover lightbox" href="http://vimeo.com/56624256" data-plugin-options='{"type":"iframe"}'> <span class="image-hover-icon image-hover-light"> <i class="fa fa-vimeo-square"></i> </span> <img src="demo_files/images/600x400/4-min.jpg" alt="..."> </a> <!-- Youtube --> <a class="image-hover lightbox" href="http://www.youtube.com/watch?v=s0MDY9fl-IA" data-plugin-options='{"type":"iframe"}'> <span class="image-hover-icon image-hover-dark"> <i class="fa fa-youtube-play"></i> </span> <img src="demo_files/images/600x400/3-min.jpg" alt="..."> </a> </div>
<!-- Ajax --> <a class="btn btn-default btn-lg lightbox" href="ajax/dummy-lightbox.html" data-lightbox="iframe" data-plugin-options='{"type":"ajax", "closeOnBgClick":false}'>Ajax Lightbox</a> <!-- GoogleMap --> <a class="btn btn-primary btn-lg lightbox" href="https://maps.google.com/maps?q=Silicon+Valley,+CA,+USA&hl=en" data-lightbox="iframe" data-plugin-options='{"type":"iframe"}'>GoogleMap Lightbox</a>
