The lightboxes are driven by Magnific Popup script.
Simple popups with different styles.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
<div class="row"> <div class="col-md-3"> <a class="lightbox" href="/portals/2/img/projects/project.jpg" data-plugin-options="{'type':'image'}"> <img class="img-responsive" src="/portals/2/img/projects/project.jpg" alt="Project Image" /> </a> </div> <div class="col-md-3"> <a class="img-thumbnail lightbox" href="/portals/2/img/projects/project.jpg" data-plugin-options="{'type':'image'}"> <img class="img-responsive" src="/portals/2/img/projects/project.jpg" alt="Project Image" /> </a> </div> <div class="col-md-3"> <a class="img-thumbnail lightbox" href="/portals/2/img/projects/project-4.jpg" data-plugin-options="{'type':'image'}"> <img class="img-responsive" src="/portals/2/img/projects/project-4.jpg" alt="Project Image" /> <span class="zoom"> <em class="fa fa-search"></em> </span> </a> </div> <div class="col-md-3"> <a class="img-thumbnail img-thumbnail-hover-icon lightbox" href="/portals/2/img/projects/project-4.jpg" data-plugin-options="{'type':'image'}"> <img class="img-responsive" src="/portals/2/img/projects/project-4.jpg" alt="Project Image" /> </a> </div> </div>
Animations are added with simple CSS transitions, you can make them look however you wish.
This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.
In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.