How could I create a modal image with an image in it, and a modal link is the image itself (in a smaller version))

Question

I want to show some image in the thumbnail gallery, in which, if you click on the image, it will be larger in a modal format.

If I save the modal link as an image, then it does not show anything in the header or footer, other than the closing sign in the upper right corner.

I am using bootstrap. I also want to know if I can replace the img tag with the <a> tag to open the modal section. Please, help.

Here is the code:

 <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <img id="image-modal" class="img-responsive img-rounded" src="<?php echo base_url();?>img/Desert.jpg" data-target="#myModal" data-toggle="modal" alt=""> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <img class="img-responsive" src="<?php echo base_url();?>img/Desert.jpg" alt=""> </div> <div class="modal-footer"> <p>This is footer</p> </div> </div> </div> </div> </div> 

Answer 1

Use a modal event listener and pass the image to a modal

Script

 $(document).ready(function () { $('#myModal').on('show.bs.modal', function (e) { var img = $(e.relatedTarget).attr('src'); // get image $('#showimg').attr('src' , img); //load image in modal }); }); 

add id="showimg" to the image tag <img> in the modular body

 <div class="modal-body"> <img class="img-responsive" src="" alt="" id="showimg"> </div> 

Script tag <img>

Yes, you can also do this with the <a> tag

<a> tag

 <a class="btn btn-primary btn-xs" href="imagepath" data-target="#myModal" data-toggle="modal">Open Image</a> 

and the script event listener will

 $(document).ready(function () { $('#myModal').on('show.bs.modal', function (e) { var img = $(e.relatedTarget).attr('href'); // get image with <a> tag $('#showimg').attr('src' , img); //load image in modal }); }); 

Script tag <a>

Answer 2

You can only do this with Bootstrap, but it looks like it will help you in what you want to do: https://blueimp.imtqy.com/Bootstrap-Image-Gallery/

I use it on several of my sites for this particular case.

Answer 3

try this bootstrap-image-gallery plugin to help you. check out the demo .