The lightboxes are driven by Magnific Popup script.
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 26 27 28 29 30 31
<div class="row"> <div class="col-md-3"> <h5 class="text-semibold text-uppercase mt-lg">Default</h5> <a class="lightbox" href="/portals/22/img/projects/project.jpg" data-plugin-options="{'type':'image'}"> <img class="img-fluid" src="/portals/22/img/projects/project.jpg" alt="Project Image" /> <span class="btn-text-indent">Lightbox</span> </a> </div> <div class="col-md-3"> <h5 class="text-semibold text-uppercase mt-lg">Default with Border</h5> <a class="img-thumbnail lightbox d-block" href="/portals/22/img/projects/project.jpg" data-plugin-options="{'type':'image'}"> <img class="img-fluid" src="/portals/22/img/projects/project.jpg" alt="Project Image" /> <span class="btn-text-indent">Lightbox</span> </a> </div> <div class="col-md-3"> <h5 class="text-semibold text-uppercase mt-lg">With Icon</h5> <a class="img-thumbnail lightbox d-block" href="/portals/22/img/projects/project-4.jpg" data-plugin-options="{'type':'image'}"> <img class="img-fluid" src="/portals/22/img/projects/project-4.jpg" alt="Project Image" /> <span class="zoom"><em class="fas fa-search"></em></span> <span class="btn-text-indent">Lightbox</span> </a> </div> <div class="col-md-3"> <h5 class="text-semibold text-uppercase mt-lg">Hover Effect</h5> <a class="img-thumbnail img-thumbnail-hover-icon lightbox d-block" href="/portals/22/img/projects/project-4.jpg" data-plugin-options="{'type':'image'}"> <img class="img-fluid" src="/portals/22/img/projects/project-4.jpg" alt="Project Image" /> <span class="btn-text-indent">Lightbox</span> </a> </div> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<div class="lightbox mb-lg" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}}"> <a class="img-thumbnail d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project.jpg" title="Project 1"> <img class="img-fluid" src="/portals/22/img/projects/project.jpg" width="110" height="110" alt="Project" /> <span class="btn-text-indent">Lightbox</span> </a> <a class="img-thumbnail d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project-1.jpg" title="Project 2"> <img class="img-fluid" src="/portals/22/img/projects/project-1.jpg" width="110" height="110" alt="Project" /> <span class="btn-text-indent">Lightbox</span> </a> <a class="img-thumbnail d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project-2.jpg" title="Project 3"> <img class="img-fluid" src="/portals/22/img/projects/project-2.jpg" width="110" height="110" alt="Project" /> <span class="btn-text-indent">Lightbox</span> </a> </div>
<div class="lightbox" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}, 'mainClass': 'mfp-with-zoom', 'zoom': {'enabled': true, 'duration': 300}}"> <a class="img-thumbnail img-thumbnail-hover-icon d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project-4.jpg"> <img class="img-fluid" src="/portals/22/img/projects/project-4.jpg" alt="Project Image" width="110" height="110" /> <span class="btn-text-indent">Lightbox</span> </a> <a class="img-thumbnail img-thumbnail-hover-icon d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project-5.jpg"> <img class="img-fluid" src="/portals/22/img/projects/project-5.jpg" alt="Project Image" width="110" height="110" /> <span class="btn-text-indent">Lightbox</span> </a> <a class="img-thumbnail img-thumbnail-hover-icon d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project-6.jpg"> <img class="img-fluid" src="/portals/22/img/projects/project-6.jpg" alt="Project Image" width="110" height="110" /> <span class="btn-text-indent">Lightbox</span> </a> </div>
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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
<div class="lightbox" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}, 'mainClass': 'mfp-with-zoom', 'zoom': {'enabled': true, 'duration': 300}}"> <div class="owl-carousel stage-margin" data-plugin-options="{'items': 6, 'margin': 10, 'loop': false, 'nav': true, 'dots': false, 'stagePadding': 40}"> <div> <a class="img-thumbnail img-thumbnail-hover-icon d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project-1.jpg"> <img class="img-fluid" src="/portals/22/img/projects/project-1.jpg" alt="Project Image" /> <span class="btn-text-indent">Zoom Image</span> </a> </div> <div> <a class="img-thumbnail img-thumbnail-hover-icon d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project-2.jpg"> <img class="img-fluid" src="/portals/22/img/projects/project-2.jpg" alt="Project Image" /> <span class="btn-text-indent">Zoom Image</span> </a> </div> <div> <a class="img-thumbnail img-thumbnail-hover-icon d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project-3.jpg"> <img class="img-fluid" src="/portals/22/img/projects/project-3.jpg" alt="Project Image" /> <span class="btn-text-indent">Zoom Image</span> </a> </div> <div> <a class="img-thumbnail img-thumbnail-hover-icon d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project-4.jpg"> <img class="img-fluid" src="/portals/22/img/projects/project-4.jpg" alt="Project Image" /> <span class="btn-text-indent">Zoom Image</span> </a> </div> <div> <a class="img-thumbnail img-thumbnail-hover-icon d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project-5.jpg"> <img class="img-fluid" src="/portals/22/img/projects/project-5.jpg" alt="Project Image" /> <span class="btn-text-indent">Zoom Image</span> </a> </div> <div> <a class="img-thumbnail img-thumbnail-hover-icon d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project-6.jpg"> <img class="img-fluid" src="/portals/22/img/projects/project-6.jpg" alt="Project Image" /> <span class="btn-text-indent">Zoom Image</span> </a> </div> <div> <a class="img-thumbnail img-thumbnail-hover-icon d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project-7.jpg"> <img class="img-fluid" src="/portals/22/img/projects/project-7.jpg" alt="Project Image" /> <span class="btn-text-indent">Zoom Image</span> </a> </div> <div> <a class="img-thumbnail img-thumbnail-hover-icon d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project.jpg"> <img class="img-fluid" src="/portals/22/img/projects/project.jpg" alt="Project Image" /> <span class="btn-text-indent">Zoom Image</span> </a> </div> </div> </div>
In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.
1 2 3 4 5 6 7
<a class="mt-xs mb-xs mr-xs popup-youtube btn btn-primary" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube Video</a> <a class="mt-xs mb-xs mr-xs popup-vimeo btn btn-primary" href="https://vimeo.com/45830194">Open Vimeo Video</a> <a class="mt-xs mb-xs popup-gmaps btn btn-primary" href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&hl=en&t=v&hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom">Open Google Map</a> <hr /> <a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube Video</a> <a class="popup-vimeo" href="https://vimeo.com/45830194">Open Vimeo Video</a> <a class="popup-gmaps" href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&hl=en&t=v&hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom">Open Google Map</a>
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.
<a class="mt-xs mb-xs mr-xs popup-with-zoom-anim btn btn-primary" href="#small-dialog">Open with fade-zoom animation</a> <a class="mt-xs mb-xs popup-with-move-anim btn btn-primary" href="#small-dialog">Open with fade-slide animation</a> <!-- Dialog --> <div id="small-dialog" class="dialog dialog-sm zoom-anim-dialog mfp-hide"> <h1>Dialog example</h1> <p>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.</p> </div>
Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button.
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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
<a class="popup-with-form btn btn-primary" href="#demo-form">Open Form</a> <div id="demo-form" class="white-popup-block mfp-hide form-horizontal"> <div class="row"> <div class="col-sm-12"> <h4>Basic Form</h4> <p class="mb-lg">Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button.</p> </div> </div> <div class="form-group mt-lg"> <div class="row"> <div class="col-sm-12"> <label for="name" class="control-label">Name</label> <input type="text" id="name" name="name" class="form-control" placeholder="Type your name..." /> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-sm-12"> <label for="email" class="control-label">Email</label> <input type="email" id="email" name="email" class="form-control" placeholder="Type your email..." /> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-sm-12"> <label for="url" class="control-label">URL</label> <input type="url" id="url" name="url" class="form-control" placeholder="Type an URL..." /> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-sm-12"> <label for="textarea" class="control-label">Comment</label> <textarea rows="5" id="textarea" name="textarea" class="form-control" placeholder="Type your comment..."></textarea> </div> </div> </div> <div class="row mb-lg"> <div class="col-sm-12"> <button class="btn btn-primary">Submit</button> <button type="reset" class="btn btn-primary">Reset</button> </div> </div> </div>