How to use bootstrap modal on multiple images on same page on image click?
Solution 1
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);
});
});
});
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);
});
});
Solution 2
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
Kirstin Walsh
Updated on December 27, 2020Comments
-
Kirstin Walsh over 3 years
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'); }); });