0

I am using bootstrap and angularjs, I want to show large image on. I clicked image but its not working. How do this? Any built-in library of bootstrap when I show large image.

<html>
<head>

  <script type="text/javascript">
$(function() {
        $('.pop').on('click', function() {
            $('.imagepreview').attr('src', $(this).find('img').attr('src'));
            $('#imagemodal').modal('show');   
        });     
});
 </script>
 </head>
<body>
<a href="#" class="pop">
    <img src="http://patyshibuya.com.br/wp-content/uploads/2014/04/04.jpg" style="width: 400px; height: 264px;">
</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">
    <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>
  </div>
</div>
</body>
</html>
Improve this question
4
  • Do you mean a gallery widget that expands to show a full-size image when a thumbnail is clicked? Commented Jan 11, 2017 at 19:20
  • yes...i want .... Commented Jan 11, 2017 at 19:22
  • OK, so you have one installed currently, but it does not work? Is modal() a plugin or a built-in device? What happens when you click it? Do you get errors in your browser console? Commented Jan 11, 2017 at 19:24
  • not working...not error Commented Jan 11, 2017 at 20:19
Related questions
1
Display Images in AngularJS Modal inside ng-repeat
1
displaying bootstrap thumbnails in angularjs
5
Fit different sized images to specific format
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.