Glightbox
GLightbox is a pure javascript lightbox. It can display images, iframes, inline content and videos with optional autoplay for YouTube, Vimeo and even self hosted videos.
Requires JS.
assets/js/vendors/glight.js
Note that this component requires the use of the third-party
glightbox
plugin.
Gllightbox
<div class="row gy-4">
<div class="col-lg-4 col-md-4 col-12">
<a href="../../assets/images/about-img/about-img-1.jpg" class="glightbox rounded-3">
<div
class="rounded-3 card-lift"
style="
background-image: url(../../assets/images/about-img/about-img-1.jpg);
background-repeat: no-repeat;
height: 350px;
background-size: cover;
"></div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-12">
<a href="../../assets/images/about-img/about-img-2.jpg" class="glightbox rounded-3">
<div
class="rounded-3 card-lift"
style="
background-image: url(../../assets/images/about-img/about-img-2.jpg);
background-repeat: no-repeat;
height: 350px;
background-size: cover;
"></div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-12">
<a href="../../assets/images/about-img/about-img-3.jpg" class="glightbox rounded-3">
<div
class="rounded-3 card-lift"
style="
background-image: url(../../assets/images/about-img/about-img-3.jpg);
background-repeat: no-repeat;
height: 350px;
background-size: cover;
"></div>
</a>
</div>
</div>Gllightbox with discription
<div class="row gy-4">
<div class="col-lg-4 col-md-4 col-12">
<a
href="../../assets/images/about-img/about-img-1.jpg"
class="glightbox rounded-3"
data-glightbox="title:Description Bottom; description: You can set the position of the description">
<div
class="rounded-3 card-lift"
style="
background-image: url(../../assets/images/about-img/about-img-1.jpg);
background-repeat: no-repeat;
height: 350px;
background-size: cover;
"></div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-12">
<a
href="../../assets/images/about-img/about-img-2.jpg"
class="glightbox rounded-3"
data-glightbox="title:Description Right; descPosition: right; description: You can set the position of the description">
<div
class="rounded-3 card-lift"
style="
background-image: url(../../assets/images/about-img/about-img-2.jpg);
background-repeat: no-repeat;
height: 350px;
background-size: cover;
"></div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-12">
<a
href="../../assets/images/about-img/about-img-3.jpg"
class="glightbox rounded-3"
data-glightbox="title:Description left; descPosition: left; description: You can set the position of the description">
<div
class="rounded-3 card-lift"
style="
background-image: url(../../assets/images/about-img/about-img-3.jpg);
background-repeat: no-repeat;
height: 350px;
background-size: cover;
"></div>
</a>
</div>
</div>Video gallery
<div class="row gy-4">
<div class="col-lg-4 col-md-4 col-12">
<a href="https://youtu.be/CivuutI6lXY" class="glightbox rounded-3">
<div
class="rounded-3 card-lift"
style="
background-image: url(../../assets/images/about-img/about-img-1.jpg);
background-repeat: no-repeat;
height: 350px;
background-size: cover;
"></div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-12">
<a href="https://youtu.be/CivuutI6lXY" class="glightbox rounded-3">
<div
class="rounded-3 card-lift"
style="
background-image: url(../../assets/images/about-img/about-img-2.jpg);
background-repeat: no-repeat;
height: 350px;
background-size: cover;
"></div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-12">
<a href="https://youtu.be/CivuutI6lXY" class="glightbox rounded-3">
<div
class="rounded-3 card-lift"
style="
background-image: url(../../assets/images/about-img/about-img-3.jpg);
background-repeat: no-repeat;
height: 350px;
background-size: cover;
"></div>
</a>
</div>
</div>Iframes and Inline Elements
<div class="row gy-4">
<div class="col-lg-4 col-md-4 col-12">
<a href="#inline-example" class="glightbox rounded-3 text-reset">
<div
class="rounded-3 card-lift"
style="
background-image: url(../../assets/images/about-img/about-img-1.jpg);
background-repeat: no-repeat;
height: 350px;
background-size: cover;
"></div>
<div id="inline-example" style="display: none">
<div class="inline-inner p-6 d-flex align-items-center flex-column">
<h3 class="text-center mb-4">Example of inline content</h3>
<div class="text-center">
<p class="lead text-body">
Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec nec
sollicitudin felis. Donec vel nulla vel leo varius tempor. Duis suscipit pharetra quam id imperdiet. Praesent vitae eros metus. Donec placerat
sagittis rhoncus. In condimentum eleifend ante et ornare. Curabitur pharetra nibh non purus gravida.
</p>
</div>
<a class="btn btn-warning inline-close-btn" href="#">Close Box</a>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-12">
<a
href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12085.977306439116!2d-73.96648875371474!3d40.77314541916876!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c258bf08488f6b%3A0x618706a9142daa0d!2sUpper+East+Side%2C+Nueva+York%2C+EE.+UU.!5e0!3m2!1ses-419!2smx!4v1511830027642"
class="glightbox rounded-3">
<div
class="rounded-3 card-lift"
style="
background-image: url(../../assets/images/about-img/about-img-2.jpg);
background-repeat: no-repeat;
height: 350px;
background-size: cover;
"></div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-12">
<a href="https://youtu.be/CivuutI6lXY" class="glightbox rounded-3">
<div
class="rounded-3 card-lift"
style="
background-image: url(../../assets/images/about-img/about-img-3.jpg);
background-repeat: no-repeat;
height: 350px;
background-size: cover;
"></div>
</a>
</div>
</div>