twitter-bootstrap Bootstrap 点击照片放大
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41499942/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Click photos to zoom in
提问by Pui.F
I want to click a photo, then it will zoom in.
我想点击一张照片，然后它会放大。
Like this website --> https://mobirise.com/bootstrap-gallery/
喜欢这个网站 --> https://mobirise.com/bootstrap-gallery/
But I just need one photo to zoom in only. Not a photo gallery. Please help.
但我只需要一张照片就可以放大。不是照片库。请帮忙。
<img src="images/uploads/phs.jpg"></img>
回答by Ankit
in my last project, i have used this i hope its help you try this demo: http://jsfiddle.net/6CR2H/1/
在我的上一个项目中，我使用了这个我希望它可以帮助您尝试这个演示：http: //jsfiddle.net/6CR2H/1/
<a href="#" class="pop">
<img src="http://patyshibuya.com.br/wp-content/uploads/2014/04/04.jpg" style="width: 400px; height: 264px;" class="img-responsive">
</a>
<a href="#" class="pop">
<img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" style="width: 400px; height: 264px;">
</a>
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" data-dismiss="modal">
<div class="modal-content" >
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<img src="" class="imagepreview" style="width: 100%;" >
</div>
<div class="modal-footer">
<div class="col-xs-12">
<p class="text-left">1. line of description<br>2. line of description <br>3. line of description</p>
</div>
</div>
</div>
</div>
</div>
javascript code:
javascript代码：
$(function() {
$('.pop').on('click', function() {
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
});
});
