CODEWITHSUNDEEP
imagelightbox2
Cri2z
Cri2z

Reputation: 1

Can I use lightbox2 in a <img> tag?

I'm new so I hope you can bare with me and help a newbie out.

I'm trying to apply the lightbox2 in a carousel. I want to be able to click on an image in my carousel and have that popping up in large in a lightbox. I followed all the steps (https://lokeshdhakar.com/projects/lightbox2/) but to apply the lightbox, it gives the example of using it in a a tag, but my images are inside a img tag.

I don't understand how I'm going to make it work, I've tried for hours now and I'm starting to give up. I think I'm confusing myself more than necessary.. Heres my carousel code:

<section class="page-section" id="portfolio">
<div class="container-fluid px-0">
<div class="row no-gutters">
    <div class="col-md-8">
            <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img class="d-block w-100" src="assets/img/portfolio/display-bw.jpg" alt="First slide"></div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="assets/img/portfolio/display-bw.jpg" alt="Second slide"></div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="assets/img/portfolio/display-bw.jpg" alt="Third slide"></div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
    </div>

Thanks for your help,

Cris

Upvotes: 0

Views: 567

Answers (1)

Mukul Kedia
Mukul Kedia

Reputation: 11

I was able to get a kinda hacky solution.

You could do it like this. Replace "Image" in quotations with your image, and replace "data-lightbox" in quotations with what you want

<a href="Image" data-lightbox="data-lightbox"><img id="minecraft" src="Image"></a>

I don't think this is a good way but it works perfectly on my site. Also, I don't know if it will work on a carousel because I am also new but you can try.

Upvotes: 1

Related Questions