Question

我想点击一张照片，然后它会放大。

喜欢这个网站 - ＆gt; https://mobirise.com/bootstrap-gallery/

但我只需要一张照片放大。不是照片库。请帮忙。

<img src="images/uploads/phs.jpg"></img>

Answer 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">&times;</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代码：

 $(function() {
            $('.pop').on('click', function() {
                $('.imagepreview').attr('src', $(this).find('img').attr('src'));
                $('#imagemodal').modal('show');   
            });     
    });

Bootstrap单击照片放大

1 个答案: