I have the following 3 thumbnail images on an HTML page. When the user clicks on any of these images, I want to show that particular image in a modal.
How can I dynamically pass the image name inside the modal-body, on every image click?
<a href="images/Picture1.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
<img src="images/Picture1.jpg" alt="image not available" onclick=check(this)>
</a>
<a href="images/Picture2.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
<img src="images/Picture2.jpg" alt="image not available" onclick=check(this)>
</a>
<a href="images/Picture3.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
<img src="images/Picture3.jpg" alt="image not available" onclick=check(this)>
</a>
Modal
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Image</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img src="images/Picture1.jpg" alt="image not available" id="imagepreview" style="width: 100%; height: 100%;">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Js function which tells, which image is clicked
function check(img) {
var src = img.src.replace(/^.*[\\\/]/, "");
console.log(src);
}
You can replace the src attribute of the image in your modal-body with the one of the image which was clicked.
Each image has onclick=check(this). It means that the function check will receive as a parameter the img element that was clicked.
You can select the image in your modal thanks to its id by using document.getElementById() and update the src of the modal image with the src of the img element in parameter.
function check(img) {
document.getElementById("imagepreview").src = img.src;
}
Related
On my page I loaded images into a carousel. The images are loading from the data model. The inspected view of the image shows the data-img-url has a complete url. When I click on the image the modal will open but there is no image. What correction should I make so the image renders in the modal window? Below is the html...
<ul id="sync1">
<li class="item">
#*This is the primary image*#
<a href="#myModal" data-toggle="modal" data-img-url="#Model.ImageLargePath">
<img src="#Model.ImageLargePath" data-src="#Model.ImageLargePath" alt="#(Model.Attributes?.Value("SEODescription"))" title="#Model.SEODescription" class="carousel-img" />
</a>
<a class="carouselImageText">#(Model.SEODescription.ToString())</a>
</li>
#if (Model.AlternateImages != null && Model.AlternateImages.Any())
{
//This is where we load all the images into the primary carousel IF we have alternate images
foreach (var image in Model.AlternateImages)
{
<li class="item">
<a href="#myModal" data-toggle="modal" data-img-url="#Model.ImageLargePath">
<img src="#image.ImageLargePath" class="carousel-img" />
</a>
</li>
}
}
</ul>
Here is the modal...
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body text-center">
<img class="" src="#" />
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
Below is the javascript...
$('#sync1 img').click(function (e) {
$('#myModal img').attr('src', $(this).attr('data-img-url'));
});
I have a page of photos where I want to allow the user to click to enlarge that specific image into a bootstrap modal. How can I dynamically add each specific image to the modal on click..my html looks like this:
<div class="container fishing-picture-container">
<div ng-repeat="picture in fishingPictures" ng-if="$index % 3 == 0" class="row row-buffer">
<div class="col-md-4" ng-if="fishingPictures[$index].name">
<figure>
<img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index].name}}" ng-click="showModal(fishingPictures[$index].name)" />
</figure>
</div>
<div class="col-md-4" ng-if="fishingPictures[$index + 1].name">
<figure>
<img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index + 1].name}}" ng-click="showModal(fishingPictures[$index + 1].name)" />
</figure>
</div>
<div class="col-md-4" ng-if="fishingPictures[$index + 2].name">
<figure>
<img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index + 2].name}}" ng-click="showModal(fishingPictures[$index + 2].name)" />
</figure>
</div>
</div>
</div>
<!-- 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">×</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">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
I was thinking I would call a function that would pass in the name of the image and then add that to the modal but doesn't seem to work. Does that seem to be the best way to go about it? Ideally, I would prefer to get a look similar to what it looks like when you click on the image in this link:
http://www.w3schools.com/howto/howto_css_modal_images.asp
Angular script
$scope.showModal = function (imageName) {
angular.element("#imagemodal").modal("show");
$scope.ImageName = "Path here...."+ imageName;
}
Html
<div class="modal-body">
<img ng-src="{{ImageName}}" id="imagepreview">
</div>
--------------------------------------or-------------------------------------
Html
<figure>
<img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index + 2].name}}" data-target="#imagemodal" data-imgname="{{fishingPictures[$index + 2].name}}" data-toggle="modal"/>
</figure>
<div class="modal-body">
<img ng-src="{{ImageName}}" id="imagepreview">
</div>
Angular script
$("#imagemodal").on("shown.bs.modal", function (event) {
var imgName= $(event.relatedTarget).data('imgname');
$scope.ImageName = "Path here...."+ imageName;
});
I've been trying to get this bootstrap modal to work without any luck. Been looking at similar problem here as well but none has helped me.
My problem is that the images does not show. The window is there but no image inside it.
Anyway here's the code.
Edit: I have looked at Need to load image as modal on click in bootstrap css, I even tried the code and did not get that to work either for me. There for a new question, my bad if that was wrong. :/
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-2">
<h4>Tidningen City Malmö</h4>
</div>
<div class="col-md-4">
<!-- Button trigger modal -->
<a class="tumbnail" href="#" data-image="citymalmo_frontpage.png" data-toggle="modal" data-target="#myModal"><img class="img-responsive center-block" src="citymalmo_frontpage_thumbnail.png" alt="City Malmö Förstasida"></a>
</div>
<div class="col-md-4">
<!-- Button trigger modal -->
<a class="tumbnail" href="#" data-image="citymalmo_page.png" data-toggle="modal" data-target="#myModal"><img class="img-responsive center-block" src="citymalmo_page_thumbnail.png" alt="City Malmö sida"></a>
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-2">
<h4>Sveriges Radio P4</h4>
</div>
<div class="col-md-4">
<!-- Button trigger modal -->
<a class="tumbnail" href="#" data-image="srp4_page.png" data-toggle="modal" data-target="#myModal"><img class="img-responsive center-block" src="srp4_page_thumbnail.png" alt="SR P4"></a>
</div>
</div>
<script type="text/javascript">
$('.getSrc').click(function() {
var src =$(this).attr('src');
$('.showPic').attr('src', src);
});
</script>
<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="image-gallery-title"></h4>
</div>
<div class="modal-body">
<img class="img-responsive" src="" class="showPic">
</div>
</div>
</div>
</div>
I have bootstrap.min.js loaded.
Add "getSrc" class to tag
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-2">
<h4>Tidningen City Malmö</h4>
</div>
<div class="col-md-4">
<!-- Button trigger modal -->
<a class="tumbnail" href="#" data-image="citymalmo_frontpage.png" data-toggle="modal" data-target="#myModal">
<img class="img-responsive center-block getSrc" src="flag.png" alt="City Malmö Förstasida">
</a>
</div>
<div class="col-md-4">
<!-- Button trigger modal -->
<a class="tumbnail" href="#" data-image="citymalmo_page.png" data-toggle="modal" data-target="#myModal">
<img class="img-responsive center-block getSrc" src="flag.png" alt="City Malmö sida"></a>
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-2">
<h4>Sveriges Radio P4</h4>
</div>
<div class="col-md-4">
<!-- Button trigger modal -->
<a class="tumbnail" href="#" data-image="srp4_page.png" data-toggle="modal" data-target="#myModal">
<img class="img-responsive center-block getSrc" src="flag.png" alt="SR P4"></a>
</div>
</div>
Next put both classes img-responsive showPic in same class = ""
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="image-gallery-title"></h4>
</div>
<div class="modal-body">
<img class="img-responsive showPic" src="" >
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function()
{
console.log( "ready!" );
$('.getSrc').click(function() {
console.log("hello");
var src =$(this).attr('src');
$('.showPic').attr('src', src);
});
});
</script>
Please note: You need to load jquery javascript, bootstrap css and javascript libraries
Here is a working example
https://jsfiddle.net/mkfLmLx1/
Three issues - first you are trying to get the src on an onclick of ".getSrc" - but you have not designated that class in the code. You will need to add it as below:
Second you have a typo with the "tumbnail" and third you are using "this" to get the src of the image but the image is nested within an <a> element - so the "this" will refer to the <a> and not the image within it..
<!-- Button trigger modal -->
<a class="thumbnail getSrc" href="#" data-image="citymalmo_page.png" data-toggle="modal" data-target="#myModal"><img class="img-responsive center-block" src="citymalmo_page_thumbnail.png" alt="City Malmö sida"></a>
You need to find the image within the a element and get that src (or use a data attribute on the a like the one that already there.:
<script type="text/javascript">
$('.getSrc').click(function() {
var src =$(this).find('img').attr('src');
$('.showPic').attr('src', src);
});
</script>
if you want to use the data attribute on the a then it would be:
<a class="thumbnail getSrc" href="#" data-source="citymalmo_page_thumbnail.png" data-image="citymalmo_page.png" data-toggle="modal" data-target="#myModal"><img class="img-responsive center-block" src="citymalmo_page_thumbnail.png" alt="City Malmö sida"></a>
<script type="text/javascript">
$('.getSrc').click(function() {
var src =$(this).attr('data-source');
$('.showPic').attr('src', src);
});
</script>
I want to show some image in a thumbnail gallery in which if you click an image then it will appear larger in a modal.
If i keep the link of the modal as an image then it does not show anything at header or footer other than the close sign in top right corner.
I am using bootstrap. I also want to know if i could replace the img tag to <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">×</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>
Use modal event listener and pass the image to 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 image tag <img> in Modal Body
<div class="modal-body">
<img class="img-responsive" src="" alt="" id="showimg">
</div>
Fiddle with <img> tag
Yes you can also do it with <a> tag
<a> tag
<a class="btn btn-primary btn-xs" href="imagepath" data-target="#myModal" data-toggle="modal">Open Image</a>
and event listener script will be
$(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
});
});
Fiddle with <a> tag
You can do it with Bootstrap only, but this is what seems like it'd help for what you want to do:
https://blueimp.github.io/Bootstrap-Image-Gallery/
I use it on a few websites of mine exactly for this case.
try this Bootstrap-Image-Gallery plugin will help you.
check Demo.
I have a gallery inside my modal window done via Bootstrap.
I want to be able to horizontally scroll within it using this: http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/.
The problem is, it scrolls the page behind it, not the actual modal window. When I don't have the Horizontal Scrolling script on, I can scroll in the modal with shift+mousewheel, which is what I want to do width the script(just without using shift ofcourse).
My JSFiddle: http://jsfiddle.net/8XdVt/22/
HTML:
<head>
<script type="text/javascript" src="http://yandex.st/jquery/mousewheel/3.0.6/jquery.mousewheel.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<h2>Modal Gallery</h2>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div id="gallery-modal">
<img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
<img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
<img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<h2>Normal Gallery</h2>
<div id="gallery">
<img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
<img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
<img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
</div>
</body>
Okay, made it work! All I did was change the scrolling script, so it doesn't scroll in html and body, but on .modal, which is the main class of the modal window!
Updated JSFiddle: http://jsfiddle.net/8XdVt/28/.
Changed
$("html,body").mousewheel(function(event, delta)
To
$(".modal").mousewheel(function(event, delta)