How to use bootstrap modal on multiple images on same page on image click?

Question

I have about 18 images on the page that I am trying to display larger in a modal upon clicking the image, but it only displays the first image every time.

I have tried traversing the DOM with $(this).find('img') and I tried it with children also I have tried setting the images to different ids and setting these as a variable.

My current attempt was to set the small image's path to the same id as the larger image's path and then using find. I only have the first two images "set up" for now, since I can't get it working right yet.

BTW, I have tried other methods of zooming in and popovers and plug-ins with no success either, this is the closest I've come to something that works.

Note: There is another question which shows pretty much the same issue, but the answer there didn't work for me.

<img  height="100" width="80" id="1" data-toggle="modal" data-target="#myModal" data-dismiss="modal" src='~/Content/MyPics/TextDollarPart1.JPG' alt='Text dollar code part one.' />  
<div id="myModal" class="modal fade" >
    <div class=" modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <img id="1"src="~/Content/MyPics/TextDollarPart1.JPG" class="img-responsive" height="1500" width="1000">
            </div>
        </div>
    </div>
</div>   
<img  height="100" width="80" id="2" data-toggle="modal" data-target="#myModal" data-dismiss="modal" src="~/Content/MyPics/TextDollarPart2.JPG" alt="Text dollar code part two." />
<div id="myModal" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <img id="2" src="~/Content/MyPics/TextDollarPart2.JPG" class="img-responsive" height="1500" width="1000">
            </div>
        </div>
    </div>
</div>

Script

$(document).ready(function () {       
    $('img').on('click', function () {
        var picID = $(this).attr('id');
         $(this).find('picID');
        $('picID').modal('toggle');      
    });
});

you cannot use an id more than once. also, it's better to be more descriptive with ids. e.g., image-2, modal-2. The ids you have (myModal, 1, 2) should be used one and only once on your elements. — Clay, Nov 21 '15 at 02:41
I tried unique IDs, it didn't work, so out of sheer desperation I tried making them the same for the matching small and large images. I am only using one modal, so according to the other solution I saw, naming the data-target all the same is the correct way to go. Of course, that solution didn't work for me. After working on this for 10 hours, descriptive names is not a priority. Maybe you have some helpful suggestions. — Kirstin Walsh, Nov 21 '15 at 05:32
@KirstinWalsh, if you haven't figure out yet, check answer below — Shehary, Nov 21 '15 at 20:24

Shehary · Accepted Answer · 2015-11-21T20:32:19.737

You are very close to your goal, you have 2 images

<img height="100" width="80" id="1" data-toggle="modal" data-target="#myModal" src='http://tympanus.net/Tutorials/CaptionHoverEffects/images/1.png' alt='Text dollar code part one.' />
<img height="100" width="80" id="2" data-toggle="modal" data-target="#myModal" src='http://tympanus.net/Tutorials/CaptionHoverEffects/images/2.png' alt='Text dollar code part one.' />

One Modal

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <img class="img-responsive" src="" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

If you want to show image in modal with your approach using click function

$(document).ready(function () {
    $('img').on('click', function () {
        var image = $(this).attr('src');
        $('#myModal').on('show.bs.modal', function () {
            $(".img-responsive").attr("src", image);
        });
    });
});

Fiddle

Or you can use bootstrap modal event function only, less complicated and better approach (recommended solution)

$(document).ready(function () {
        $('#myModal').on('show.bs.modal', function (e) {
            var image = $(e.relatedTarget).attr('src');
            $(".img-responsive").attr("src", image);
        });
});

Fiddle

I have tried the second approach as per your answer to a similar question. The modal comes up blank (outline shown of where image would be, and I can adjust the outline size with width and height, but no image). Additionally, I commented out the js, and the modal continued to pop up anyway. How is that even possible? BUT, I tried the new js you suggested, and so far my first group of pictures are coming up beautifully. Don't know what I was doing wrong, but thank you so much! — Kirstin Walsh, Nov 21 '15 at 22:09

score 1 · Answer 2 · answered Nov 21 '15 at 02:45

You mean you have 18 images, when you click on a image , website will open a open to show a larger image?

So why don't you use another plugin such as Nivo lightbox, which allow you open a popup to show image, and even though put all your image in a gallery when open a popup

score 1 · Answer 3 · answered Nov 21 '15 at 04:28

I am learning English, so I'm not sure if I fully understand but if you want is show different images in a modal by clicking on each thumbnail image. I think that this code can help you.

here is an Jsfiddle example: How to show multiple images on the same modal

And the code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="bootstrap.css">
    <script type="text/javascript" src="jquery-1.11.2.js"></script>
    <script type="text/javascript" src="bootstrap.js"></script>
    <style type="text/css">
      .my-img a {
        display: inline-block;
        margin: 10px;
        border: 2px solid #CCC;
      }
      .my-img a:hover {
        border: 2px solid #45AFFF;
      }    
      .modal-lg {
        width: 86%;
      }
      .modal-body {
        overflow: auto;
        max-height: auto;
      }
    </style>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <div class="row">
    <div class="col-xs-12 my-img">
      <a href="#" id="link1" data-toggle="modal" data-target="#myModal">
        <img src="1.png" id="img1" class="img-responsive" width="250px">
      </a>
      <a href="#" id="link1" data-toggle="modal" data-target="#myModal">
        <img src="2.png" id="img2" class="img-responsive" width="250px">
      </a>
      <a href="#" id="link1" data-toggle="modal" data-target="#myModal">
        <img src="3.png" id="img3" class="img-responsive" width="250px">
      </a>
      <a href="#" id="link1" data-toggle="modal" data-target="#myModal">
        <img src="4.png" id="img4" class="img-responsive" width="250px">
      </a>          
  </div>  

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">your image title here (can be dynamic) </h4>
        </div>
        <div class="modal-body" id="showImg">

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>
<script type="text/javascript">
      $(document).ready(function() {
        $('img').on('click', function() {
          $("#showImg").empty();
          var image = $(this).attr("src");
          $("#showImg").append("<img class='img-responsive' src='" + image + "' />")
          //alert(image);
        })
      });
</script>

</body>
</html>

Thank you, but I do not want to display all my pictures in one modal, just one unique picture at a time — Kirstin Walsh, Nov 21 '15 at 05:33
Yeah, I catch the idea, this script can display one unique image at a time in a modal. sorry if doesn't explain me the first time. — Quethzel Diaz, Nov 21 '15 at 06:06

score 0 · Answer 4 · edited Dec 26 '18 at 10:55

0

It is Work Fine For Normal image Path But I have base64 image so not work this javascript.

<img src="<?php echo 'data:image/'.$imageFileType.';base64,'.$fetch_expance['expance_image'];?>" style="cursor: pointer;" data-toggle="modal" data-target="#myModal" width="100px" height="100px" /><br>

edited Dec 26 '18 at 10:55

Suraj Rao

29,388
11
94
103

answered Dec 26 '18 at 10:23

Manish Patel

25
3

How to use bootstrap modal on multiple images on same page on image click?

4 Answers4

Linked