In Bootstrap open Enlarge image in modal

Question

How do I open / enlarge an image in a modal using jquery / js and not data attributes?

Anytime a user inserts an image into a content editor I need it to be clickable to expand in a modal with js, so I cannot rely on the user to input data attributes they don't know how to use.

I tried:-

<a href="/myImage.png" id="pop">
    <img src="/myImage.png" style="width: 400px; height: 264px;">
    Click to Enlarge
</a>

jQuery :-

$("#pop").on("click", function() {
   $(this).modal();
});

Do I need to add info to the jquery to pass the image source to appear in the modal?

Thank you!!!

on the pop click set modal image source = image source they want to enlarge — Jordan.J.D, Jul 29 '14 at 19:16
@JordanD Thanks for reply! How exactly would that look like in code? — Jibes, Jul 29 '14 at 19:23
"Anytime a user inserts an image into a content editor" you need the image displays when the user click the image that is inserted into the editor? — martinezjc, Jul 29 '14 at 19:42
@martinezjc Yes, using a content management system and looking to have this functionality anytime an image is inserted onto a page through the content editor. — Jibes, Jul 29 '14 at 19:53
Is there a way to achieve this without JQuery and JS? Only with CSS? — Paula, Feb 17 '21 at 16:01

score 151 · Accepted Answer · edited Dec 24 '22 at 00:02

151

You can try this code if you are using bootstrap 3:

HTML

<a href="#" id="pop">
    <img id="imageresource" src="http://patyshibuya.com.br/wp-content/uploads/2014/04/04.jpg" style="width: 400px; height: 264px;">
    Click to Enlarge
</a>
    
<!-- Creates the bootstrap modal where the image will appear -->
<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-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Image preview</h4>
      </div>
      <div class="modal-body">
        <img src="" id="imagepreview" style="width: 400px; height: 264px;" >
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

JavaScript:

$("#pop").on("click", function() {
   $('#imagepreview').attr('src', $('#imageresource').attr('src')); // here asign the image to the modal when the user click the enlarge link
   $('#imagemodal').modal('show'); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function
});

This is the working fiddle.

edited Dec 24 '22 at 00:02

starball

20,030
7
43
238

answered Jul 29 '14 at 19:55

martinezjc

3,415
3
21
29

Thank you this worked! But for some reason when I have multiple images on a page it only opens a modal for the first image. The rest of the images do no open a modal, only jump to the top of the page. Is there something I am missing? Thank you!!! – Jibes Jul 30 '14 at 14:19
1

I figured out why other images wouldn't open in modal, because the id of pop is unique so I changed it to a class. Only issue now is the image source in other modals show the first image, not the image that is clicked! – Jibes Jul 30 '14 at 14:26
Replace `$('##imagepreview').attr('src', $('.pop img').attr('src'));` for this: `$('.imagepreview').attr('src', $('.pop img').attr('src'));` don't forget to change the id for the class attribute for `imagepreview` in the modal window and remove the extra # in `$('##imagemodal').modal('show');` should look like this `$('#imagemodal').modal('show');` – martinezjc Jul 30 '14 at 14:35
Hi! I created an updated fiddle example to show you what I mean here http://jsfiddle.net/6CR2H/ I am trying to follow your comments to add to the fiddle but not sure it is working Thanks!! – Jibes Jul 30 '14 at 14:48
2

I made an update, now is working, the problem was the `.pop img` always will take the first image with the class `.pop` asigned, i just did a `$('.imagepreview').attr('src', $(this).find('img').attr('src'));` to take the actual image (``) inside the current `` tag and assign to the image attribute `src` inside the modal. Please mark my answer as the solution. Here is your fiddle now working http://jsfiddle.net/6CR2H/1/ :) – martinezjc Jul 30 '14 at 14:55
1

You are an absolute savior! Thank you for taking the time to help me out, very generous of you! – Jibes Jul 30 '14 at 15:07
thank you so much, at last this helped me to show light box effect, but after model open site layout use to jump right and on close to left , but [this](http://stackoverflow.com/questions/21604674/bootstrap-modal-background-jumps-to-top-on-toggle) fixed , but can we take the actual image `()` inside the current `
` instead of ``, like [this](http://stackoverflow.com/questions/8440315/using-jquery-how-can-i-select-an-image-inside-of-a-div-to-change-its-source) ?
– Shaiju T Jun 25 '15 at 13:12
1

You mean fire the event from the image not from the link? or fire the event from the div that contains the image @stom ? – martinezjc Aug 31 '15 at 16:12
@martinezjc, yes, can you show both example, i mean fire the event from the image and fire the event from the div that contains the image ? – Shaiju T Sep 01 '15 at 07:11
3

@stom the idea is basically the same. The click event works based on the element `class` attribute not in the html tag ``. Here is the fiddle....http://jsfiddle.net/oLwzepfc/ – martinezjc Sep 01 '15 at 20:05
To resize the modal after the image has been loaded add an 'onload' handler to the image like so: – pizzamonster Mar 07 '19 at 14:36

score 14 · Answer 2 · edited Dec 10 '18 at 15:53

I have change it little bit but still can not do few things.

I added that clicking on it close it - it was easy but very functional.

 <div class="modal-dialog" data-dismiss="modal">

I also need different description under each photo. I added description in footer just to show what I need. It need to change with every photo.

HTML

<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>

JavaScript:

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

Also it would be nice if this window will open only on 100% of screen. Here picture inside with description have more than 100% and in become scrollable... and if screen in much bigger than pictures it shoud stop only on orginal size. for ex. 900 px and no bigger in height.

http://jsfiddle.net/2ve4hbmm/

score 6 · Answer 3 · answered Aug 07 '15 at 20:30

6

This plugin works great for me.

Bootstrap 3 lightbox plugin

answered Aug 07 '15 at 20:30

Justin

17,670
38
132
201

score 6 · Answer 4 · edited Nov 22 '21 at 17:04

I know your question is tagged as bootstrap-modal (although you didn't mention Bootstrap explicity either), but I love to see the simple way W3.CSS solved this and I think it is good to share it.

  <img src="/myImage.png" style="width:30%;cursor:zoom-in"
  onclick="document.getElementById('modal01').style.display='block'">

  <div id="modal01" class="w3-modal" onclick="this.style.display='none'">
    <div class="w3-modal-content w3-animate-zoom">
      <img src="/myImage.png" style="width:100%">
    </div>
  </div>

Here is a link to the W3Schools modal image example to see the headers to make W3.CSS work.

score 2 · Answer 5 · answered Jul 11 '22 at 17:31

Here is a solution I'm using for Bootstrap 5.

<!-- a link that triggers modal -->
<a href="#myModal" type="" class="" data-bs-toggle="modal" data-bs-target="#myModal">More details</a>

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Image Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!--        include image here-->
        <img src="images/img_example_8.png" alt="Image Title" class="img-fluid">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

The top-voted solution did not work for me as it uses Bootstrap 3 and my app does not. Basically I just followed the bootstrap 5 modal documentation. I made the modal size large so the image is larger.

score 1 · Answer 6 · answered Jul 29 '14 at 20:03

So I have put together a very rough modal in jsfiddle for you to take hints from.

JSFiddle

$("#pop").on("click", function(e) {
  // e.preventDefault() this is stopping the redirect to the image its self
  e.preventDefault();
  // #the-modal is the img tag that I use as the modal.
  $('#the-modal').modal('toggle');
});

The part that you are missing is the hidden modal that you want to display when the link is clicked. In the example I used a second image as the modal and added the Bootstap classes.

score 1 · Answer 7 · answered Feb 02 '19 at 08:32

    <div class="row" style="display:inline-block">

    <div class="col-lg-12">
        <h1 class="page-header">Thumbnail Gallery</h1>

            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title" data-caption="Some lovely red flowers" data-image="http://onelive.us/wp-content/uploads/2014/08/flower-delivery-online.jpg" data-target="#image-gallery">
                <img class="img-responsive" src="http://onelive.us/wp-content/uploads/2014/08/flower-delivery-online.jpg" alt="Short alt text">
            </a>
        </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="If you sponsor me, I can drive this car" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
                <img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="A alt text">
            </a>
        </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Im so nice" data-caption="And if there is money left, my girlfriend will receive this car" data-image="http://upload.wikimedia.org/wikipedia/commons/7/78/1997_Fiat_Panda.JPG" data-target="#image-gallery">
                <img class="img-responsive" src="http://upload.wikimedia.org/wikipedia/commons/7/78/1997_Fiat_Panda.JPG" alt="Another alt text">
            </a>
        </div>
</div>


<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="image-gallery-title"></h4>
            </div>
            <div class="modal-body">
                <img id="image-gallery-image" class="img-responsive" src="">
            </div>
            <div class="modal-footer">

                <div class="col-md-2">
                    <button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
                </div>

                <div class="col-md-8 text-justify" id="image-gallery-caption">
                    This text will be overwritten by jQuery
                </div>

                <div class="col-md-2">
                    <button type="button" id="show-next-image" class="btn btn-default">Next</button>
                </div>
            </div>
        </div>
    </div>
</div>



<script>
$(document).ready(function(){

    loadGallery(true, 'a.thumbnail');

    //This function disables buttons when needed
    function disableButtons(counter_max, counter_current){
        $('#show-previous-image, #show-next-image').show();
        if(counter_max == counter_current){
            $('#show-next-image').hide();
        } else if (counter_current == 1){
            $('#show-previous-image').hide();
        }
    }

    /**
     *
     * @param setIDs        Sets IDs when DOM is loaded. If using a PHP counter, set to false.
     * @param setClickAttr  Sets the attribute for the click handler.
     */

    function loadGallery(setIDs, setClickAttr){
        var current_image,
            selector,
            counter = 0;

        $('#show-next-image, #show-previous-image').click(function(){
            if($(this).attr('id') == 'show-previous-image'){
                current_image--;
            } else {
                current_image++;
            }

            selector = $('[data-image-id="' + current_image + '"]');
            updateGallery(selector);
        });

        function updateGallery(selector) {
            var $sel = selector;
            current_image = $sel.data('image-id');
            $('#image-gallery-caption').text($sel.data('caption'));
            $('#image-gallery-title').text($sel.data('title'));
            $('#image-gallery-image').attr('src', $sel.data('image'));
            disableButtons(counter, $sel.data('image-id'));
        }

        if(setIDs == true){
            $('[data-image-id]').each(function(){
                counter++;
                $(this).attr('data-image-id',counter);
            });
        }
        $(setClickAttr).on('click',function(){
            updateGallery($(this));
        });
    }
});
</script>

score 0 · Answer 8 · answered Nov 08 '16 at 15:40

css:

img.modal-img {
  cursor: pointer;
  transition: 0.3s;
}
img.modal-img:hover {
  opacity: 0.7;
}
.img-modal {
  display: none;
  position: fixed;
  z-index: 99999;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}
.img-modal img {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700%;
}
.img-modal div {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}
.img-modal img, .img-modal div {
  animation: zoom 0.6s;
}
.img-modal span {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
}
@media only screen and (max-width: 700px) {
  .img-modal img {
    width: 100%;
  }
}
@keyframes zoom {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

Javascript:

$('img.modal-img').each(function() {
    var modal = $('<div class="img-modal"><span>&times;</span><img /><div></div></div>');
    modal.find('img').attr('src', $(this).attr('src'));
    if($(this).attr('alt'))
      modal.find('div').text($(this).attr('alt'));
    $(this).after(modal);
    modal = $(this).next();
    $(this).click(function(event) {
      modal.show(300);
      modal.find('span').show(0.3);
    });
    modal.find('span').click(function(event) {
      modal.hide(300);
    });
  });
  $(document).keyup(function(event) {
    if(event.which==27)
      $('.img-modal>span').click();
  });

img.modal-img {
  cursor: pointer;
  transition: 0.3s;
}
img.modal-img:hover {
  opacity: 0.7;
}
.img-modal {
  display: none;
  position: fixed;
  z-index: 99999;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}
.img-modal img {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700%;
}
.img-modal div {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}
.img-modal img, .img-modal div {
  animation: zoom 0.6s;
}
.img-modal span {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
}
@media only screen and (max-width: 700px) {
  .img-modal img {
    width: 100%;
  }
}
@keyframes zoom {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
Javascript:

$('img.modal-img').each(function() {
    var modal = $('<div class="img-modal"><span>&times;</span><img /><div></div></div>');
    modal.find('img').attr('src', $(this).attr('src'));
    if($(this).attr('alt'))
      modal.find('div').text($(this).attr('alt'));
    $(this).after(modal);
    modal = $(this).next();
    $(this).click(function(event) {
      modal.show(300);
      modal.find('span').show(0.3);
    });
    modal.find('span').click(function(event) {
      modal.hide(300);
    });
  });
  $(document).keyup(function(event) {
    if(event.which==27)
      $('.img-modal>span').click();
  });

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<img src="http://www.google.com/favicon.ico" class="modal-img">

style="display:inline-block" – mirazimi Feb 02 '19 at 08:32 — mirazimi, Feb 02 '19 at 08:32

score 0 · Answer 9 · answered Sep 30 '22 at 06:52

If you have an editor, this mean the images are dynamically added by Javascript, so when using jQuery you need to select the image tag starting from an object that is already in page.

My answer will work for both cases: images displayed when page load and images dynamically added after by Javascript.

I am using a class that can be added and will open the image in modal.

The image:

<img src='/assets/image.png' style='width:100px;' class='imageViewBig'/>

The modal:

<div class="modal fade" id="modalImgageView" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-body text-center">
            <button type="button" class="btn-close bg-dark" data-bs-dismiss="modal" aria-label="Close" style="position:absolute; top:5px;right:5px;"></button>
            <img src="assets/images/nophoto.png" alt="Image Title" class="img-fluid" id="modalImgageViewIMG">
        </div>
    </div>
</div></div>

the modal header and footer are removed
the "close" button is moved over the image in right corner
image from modal have id "modalImgageViewIMG" and is needed to change the "src" attribute

The jQuery:

$(document).on("click", ".imageViewBig", function() {
    let url = $(this).attr('src');
    $('#modalImgageViewIMG').attr('src', url);
    $('#modalImgageView').modal('toggle');

});

click event is set on $(document)
class "imageViewBig" have a listener for "click" event and will take the "src" from the clicked image and putted to image from modal

score -1 · Answer 10 · edited May 18 '19 at 15:25

The two above it is not run.

The table edit button:

<a data-toggle="modal" type="edit" id="{{$b->id}}" data-id="{{$b->id}}"  data-target="#form_edit_masterbank" data-bank_nama="{{ $b->bank_nama }}" data-bank_accnama="{{ $b->bank_accnama }}" data-bank_accnum="{{ $b->bank_accnum }}" data-active="{{ $b->active }}" data-logobank="{{asset('components/images/user/masterbank/')}}/{{$b->images}}" href="#"  class="edit edit-masterbank"   ><i class="fa fa-edit" ></i></a>

and then in JavaScript:

$('.imagepreview555').attr('src', logobank);

and then in HTML:

<img src="" class="imagepreview555"  style="width: 100%;" />

Not it runs.

In Bootstrap open Enlarge image in modal

10 Answers10

Linked

Related