1

I am using bootstrap lightbox, now I got stuck where I need to achieve that when I click on image then certain content/text displayed on the popup after the click of an image.

this is the link i am using for as a reference https://bbbootstrap.com/snippets/lightbox-gallery-38774499

I am using bootstrap 4

this is code below,

<div class="row photos">
  <div class="col-sm-6 col-md-4 col-lg-3 item">
    <a href="https://i.imgur.com/zmzERpe.jpg" data-lightbox="photos">
    <img class="img-fluid" src="https://i.imgur.com/zmzERpe.jpg"></a>
  </div>
      
  <div class="col-sm-6 col-md-4 col-lg-3 item">
     <a href="https://i.imgur.com/gX11Vt5.jpg" data-lightbox="photos">
     <img class="img-fluid" src="https://i.imgur.com/gX11Vt5.jpg"></a>
  </div>
</div>

Little help will be highly appreciated

Hopefully to hear positive from you soon Thank You

Regards,

Abdul Rafay
  • 47
  • 7
  • Are you including all of the files in the example for Boostrap and Lightbox? Please post your full code. – Danielle Hoopes Dec 27 '22 at 05:36
  • yes This is the full code for lightbox. I want to to add text instead of images. So when I click on thumbnail that text need to be displayed instead of images. Hopefully you get understanding – Abdul Rafay Dec 29 '22 at 15:18
  • Lightbox is only tailored to open images, not text. If I am understanding you. This means, you will need to build a more custom solution that will open a box with text in it instead of an image or even both if that is your end goal. FancyBox is a good option. http://fancybox.net/howto – Danielle Hoopes Dec 29 '22 at 17:48

1 Answers1

0

You probably need to use a modal setup. Lightbox won't work for text as you intend. Only images.

    $('#galleryModal').on('show.bs.modal', function (e) {
       $('#galleryImage').attr("src",$(e.relatedTarget).data("large-src"));
    });
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
 
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container">
    <div class="row py-3">
        <div class="col-md-3 col-sm-4 col-6 py-2">
            <a href="#galleryModal" data-large-src="https://unsplash.it/1200/768.jpg?image=251" data-toggle="modal">
                <img src="https://unsplash.it/300.jpg?image=251" class="img-fluid img-thumbnail">
            </a>
        </div>
        <div class="col-md-3 col-sm-4 col-6 py-2">
            <a href="#galleryModal2" data-large-src="https://unsplash.it/1200/768.jpg?image=256" data-toggle="modal">
                <img src="https://unsplash.it/300.jpg?image=256" class="img-fluid img-thumbnail">
            </a>
        </div>
      
    </div>
</div>
<div id="galleryModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="text-center mb-0"></h3>
                <button type="button" class="close float-right" aria-label="Close" data-dismiss="modal">
                  <span aria-hidden="true">&#xD7;</span>
                </button>
            </div>
            <div class="modal-body p-0 text-center bg-alt">
            <h2>
            Text goes here
            </h2>
              
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">OK</button>
            </div>
        </div>
    </div>
</div>
<div id="galleryModal2" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="text-center mb-0"></h3>
                <button type="button" class="close float-right" aria-label="Close" data-dismiss="modal">
                  <span aria-hidden="true">&#xD7;</span>
                </button>
            </div>
            <div class="modal-body p-0 text-center bg-alt">
            <h2>
            Text goes here 2nd modal
            </h2>
              
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">OK</button>
            </div>
        </div>
    </div>
</div>
  </body>
</html>
Danielle Hoopes
  • 151
  • 8