使用html-css引导程序(lightbox）的小项目

small project with html css bootstrap (lightbox)

本文关键字：小项目 lightbox html-css 引导程序 使用      更新时间：2023-09-26

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script src="js/main.js"></script>
    <script src="js/ekko-lightbox.js"></script>
    <script src="js/bootstrap.js"></script>
    <script>
     $(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
    event.preventDefault();
    $(this).ekkoLightbox();
}); 
     $(function () {
  $('[data-hover="tooltip"]').tooltip()
})
    </script>

大家好，我正在用bootstrap（灯箱）做一个小项目，我希望我的照片在点击后大小相同，即使它们都是不同的大小。下面是html&css代码谢谢。。。

.photos{
	margin: 0;
	padding: 0;
}
.photos li{
	list-style: none;
	float: left;
	margin: 5px;
	width: 23%;
}
.photos img{
	width: 100%;
}
<section>
   <section id="clients" class="content-section text-center">
      <div class="container">
        <h2>My gallery</h2>
            <ul class="photos gallery-parent">
<li><a href="img/intro-bggg.jpg" data-title="Baha’i Gardens" data-footer="Hanging Baha’i Gardens and Golden Dome (Haifa)"  data-toggle="lightbox" data-gallery="My gallery" data-parent=".gallery-parent"data-hover="tooltip" data-placement="top" title="Baha’i Gardens" ><img src="img/intro-bggg.jpg" class="img-thumbnail"></a></li>
<li><a href="img/bahais sad.jpg" data-title="bahais sad" data-footer="bahais sad"  data-toggle="lightbox" data-gallery="My gallery" data-parent=".gallery-parent" data-hover="tooltip" data-placement="top" title="bahais sad" ><img src="img/bahais sad.jpg" class="img-thumbnail"></a></li>
             </ul>
   </div>
</section>

您是否尝试过通过CSS指示图像的固定宽度？标签将选择您打开的图像。示例：

Url:http://www.jasonbutz.info/bootstrap-lightbox/

#demoLightbox img {
width: 500px ;
}
相关文章：