Popup image in Bootsrap Carousel

Question

Here is what I'm trying to do. I'm trying to have the image popup if the user clicks on the image in the carousel. How can it be done?

<div id="myCarousel" class="carousel slide" data-interval="false" >
    <ul class="carousel-indicators">
        <?php foreach ($repairPics as $ind => $pics) {  ?>
                <li data-target="#myCarousel" data-slide-to="<?php echo $ind;?>" <?php echo (($ind == 0) ? 'class="active"' : '');?>></li>
        <?php } ?>
    </ul>

    <div class="carousel-inner" role="listbox" style="margin-left: 10%;height: 100%;">

        <?php foreach ($repairPics as $ind => $pics) {  ?>
                <div class="item <?php echo (($ind == 0) ? 'active' : '');?>" style="height: 100%;">
                    <img style="height: 100%;" class="d-inline-block w-100" src="https://earthsky.org/upl/2017/06/Interplanetary-Transport-System-SpaceX-Elon-Musk-300x158.jpg" alt="Starship">
                </div>
        <?php } ?>

    </div>

    <a class="carousel-nav-controls carousel-control-prev" href="#myCarousel" data-slide="prev" style="left: -1%">
        <span class="fa fa-chevron-left"></span><span class="sr-only">Previous</span>
    </a>
    <a class="carousel-nav-controls carousel-control-next" href="#myCarousel" data-slide="next" style="right: 0%;">
        <span class="fa fa-chevron-right"></span><span class="sr-only">Next</span>
    </a>
</div>

score 1 · Accepted Answer · answered Aug 25 '20 at 23:17

You need an extension such as Featherlight, which is a very lightweight jQuery lightbox.

I created a fiddle (click here) and added featherlight as a resource and modified your code slightly to work without php. Basically you put a <a href="YOUR_HREF" data-featherlight="image"> around your images, which will make your images clickable and showing on a popup.

Hint: Please note that the lightbox will only be as large as your defined image is!

<div id="myCarousel" class="carousel slide" >
    <ul class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ul>
    <div class="carousel-inner" role="listbox" style="margin-left: 10%;height: 100%;">
      <div class="carousel-item active">
          <a href="http://labs.jensimmons.com/2016/examples/images/testscreen-large.jpg" data-featherlight="image">
              <img style="height: 100%;" class="d-inline-block w-100" src="http://labs.jensimmons.com/2016/examples/images/testscreen-large.jpg" alt="Starship">
           </a>
       </div>
       <div class="carousel-item">
           <a href="http://labs.jensimmons.com/2016/examples/images/testscreen-large.jpg" data-featherlight="image">
              <img style="height: 100%;" class="d-inline-block w-100" src="http://labs.jensimmons.com/2016/examples/images/testscreen-large.jpg" alt="Starship">
           </a>
       </div>
       <div class="carousel-item">
         <a href="http://labs.jensimmons.com/2016/examples/images/testscreen-large.jpg" data-featherlight="image">
              <img style="height: 100%;" class="d-inline-block w-100" src="http://labs.jensimmons.com/2016/examples/images/testscreen-large.jpg" alt="Starship">
           </a>
       </div>
    </div>
    <a class="carousel-nav-controls carousel-control-prev" href="#myCarousel" data-slide="prev">
        <span class="fa fa-chevron-left"></span><span class="sr-only">Previous</span>
    </a>
    <a class="carousel-nav-controls carousel-control-next" href="#myCarousel" data-slide="next" style="right: 0%;">
        <span class="fa fa-chevron-right"></span><span class="sr-only">Next</span>
    </a>
</div>

This result looks something like this:

There is also an iframe example how to open a 100% width and 100% height lightbox, which you will find in this section.

Good luck! I hope that this will answer your question.

Popup image in Bootsrap Carousel

1 Answers1