Bootstrap Carousel 中的弹出图像

Question

这就是我想要做的。如果用户单击轮播中的图像，我会尝试弹出图像。怎么做到的？

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

Answer 1

您需要一个扩展程序，例如 Featherlight，这是一个非常轻量级的 jQuery 灯箱。

我创建了 a fiddle (click here) 并添加了 featherlight 作为资源，并稍微修改了您的代码以在没有 php 的情况下工作。基本上你在你的图像周围放置一个 <a href="YOUR_HREF" data-featherlight="image">，这将使你的图像可点击并显示在弹出窗口中。

提示：请注意，灯箱只会与您定义的图片一样大！

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

这个结果看起来像这样：

还有一个 iframe 示例如何打开 100% width 和 100% height 灯箱，您可以在 this section.

中找到

祝你好运！我希望这会回答你的问题。

Bootstrap Carousel 中的弹出图像

Popup image in Bootsrap Carousel

bootstrap-modal

bootstrap-image-gallery

bootstrap-4