# 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

### Example of inline content

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.

Close Box

     <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>