[英]How can I put an image gallery inside of a Bootstrap Modal?
I have tried using the example from this contributor: http://www.bootply.com/alcaraz/QxGeDFsS8G 我尝试使用此贡献者提供的示例: http : //www.bootply.com/alcaraz/QxGeDFsS8G
However, when I try to apply it to my scenario, the "image category" links just take me back to the top of my page when I click them. 但是,当我尝试将其应用于场景时,单击“图像类别”链接只会使我回到页面顶部。 Here is my HTML: 这是我的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>
To me it looks like the href of the gallery categories should point to something else. 在我看来,图库类别的href应该指向其他内容。 In the example I gave though, they point to "#". 在我给出的示例中,它们指向“#”。 I cannot figure out why this works on the example but not in my situation. 我无法弄清楚为什么此方法适用于示例,但不适用于我的情况。 At the moment I have only created the HTML for the first category's images. 目前,我只为第一类图像创建了HTML。 Once I can get this to work I will add the additional category images. 一旦可以使它正常工作,我将添加其他类别的图像。 Is there something simple I am overlooking? 有什么我可以忽略的简单事情吗?
Thanks. 谢谢。
This resolved the issue. 这解决了问题。
wrap the JS from Bootply in jQuery $(document).ready(function(){ .. js code here.. }();
so that is binds properly after the DOM is loaded. 将来自Bootply的JS包装在jQuery $(document).ready(function(){ .. js code here.. }();
以便在加载DOM之后正确绑定。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.