2017-01-06 3 views
0

Я хочу, чтобы нажать на фотографию, то она будет увеличиватьBootstrap Нажмите фото для увеличения

Как этот сайт -.>https://mobirise.com/bootstrap-gallery/

Но мне просто нужно одну фотографию, чтобы увеличить только. Не фотогалерея. Пожалуйста помоги.

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

Добро пожаловать в StackOverflow. Ваш вопрос в настоящее время не объясняет, что вы пытались решить вашу проблему. См. [Как задать хороший вопрос] (https://stackoverflow.com/help/how-to-ask) для получения справки. – FriendFX

ответ

0

в моем последнем проекте, я использовал это я надеюсь, что его помощь вам попробовать это демо:

<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'); 
      });  
    }); 
+0

Этот плагин также отлично подходит для меня. Bootstrap 3 lightbox plugin: http: //ashleydw.github.io/lightbox/ – Ankit

Смежные вопросы