我试过使用这个贡献者的例子:http://www.bootply.com/alcaraz/QxGeDFsS8G
但是,当我尝试将它应用到我的场景时,“图像类别”链接在我单击它们时只会将我带回页面顶部。这是我的 HTML:
<div class="container">
<div class="col-md-6 col-md-offset-3 text-center wrap_title">
<h2>Photographer Photography</h2>
</div>
<div class="row">
<div class="col-12 col-md-4 col-sm-6 wow fadeInDown text-center">
<a title="New Life" href="#"><h3>NEWLIFE</h3>
<img class="thumbnail img-responsive newb"></a>
</div>
<div class="col-12 col-md-4 col-sm-6 wow fadeInDown text-center">
<a title="Still Growing" href="#"><h3>STILL GROWING</h3>
<div class="kid"></div></a>
</div>
<div class="col-12 col-md-4 col-sm-6 wow fadeInDown text-center">
<a title="Family" href="#"><h3>FAMILY</h3>
<div class="fam"></div></a>
</div>
</div>
<div class="row tworow">
<div class="col-12 col-md-4 col-sm-6 wow fadeInDown text-center">
<a title="Seniors" href="#"><h3>SENIOR</h3>
<div class="milestone"></div></a>
</div>
<div class="col-12 col-md-4 col-sm-6 wow fadeInDown text-center">
<a title="YOU + ME" href="#"><h3>YOU + ME</h3>
<div class="unme"></div></a>
</div>
<div class="col-12 col-md-4 col-sm-6 wow fadeInDown text-center">
<a title="I DO" href="#"><h3>I DO</h3>
<div class="marriage"></div></a>
</div>
</div>
</div>
</div>
<div class="hidden" id="img-repo">
<!--#image-1 -->
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="1" src="img/galleries/baby/1.png" alt="">
</div>
<div class="item" id="image-1" >
<img class="thumbnail img-responsive" title="2" src="img/galleries/baby/2.png" alt="">
</div>
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="3" src="img/galleries/baby/3.png" alt="">
</div>
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="4" src="img/galleries/baby/4.png" alt="">
</div>
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="5" src="img/galleries/baby/5.png" alt="">
</div>
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="6" src="img/galleries/baby/6.png" alt="">
</div>
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="7" src="img/galleries/baby/7.png" alt="">
</div>
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="8" src="img/galleries/baby/8.png" alt="">
</div>
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="9" src="img/galleries/baby/9.png" alt="">
</div>
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="10" src="img/galleries/baby/10.png" alt="">
</div>
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="11" src="img/galleries/baby/11.png" alt="">
</div>
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="12" src="img/galleries/baby/12.png" alt="">
</div>
</div>
</div>
<!-- MODAL CODE -->
<div class="modal" id="modal-gallery" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
<div id="modal-carousel" class="carousel">
<div class="carousel-inner">
</div>
<a class="carousel-control left" href="#modal-carousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="carousel-control right" href="#modal-carousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
在我看来,图库类别的 href 应该指向其他内容。在我给出的示例中,它们指向“#”。我无法弄清楚为什么这适用于示例但不适用于我的情况。目前我只为第一类图像创建了 HTML。一旦我可以让它工作,我将添加额外的类别图像。我忽略了一些简单的事情吗?
谢谢。
最佳答案
这解决了问题。
在 jQuery $(document).ready(function(){ .. js code here.. }();
中包装来自 Bootply 的 JS,以便在加载 DOM 后正确绑定(bind)。
关于javascript - 如何将图片库放入 Bootstrap Modal 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29758283/