How to show image on popup on click of that image?
Question
I have created multiple images in div. if any image is clicked then that image will show in another div.(i have got this).but if i clicked image then it will show in popup. how to show image in popup on click of that image.
<div style="height:65px;border:solid 1px #999;"> <img src="images/startdesign images/img7.png" id="fabric" height="63" width="401"/> </div>
1 answers
solution1
0 2015-10-05 10:49:08
<!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" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
<script language="javascript">
$(document).ready(function(){
$("#img").on('click',function(){
var src = $("#img").attr('src');
$("#modalImg").attr('src',src);
});
});
</script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<img src="http://images.forbes.com/media/lists/companies/google_416x416.jpg" id="img" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"></a>
<!-- Modal -->
<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 id="modalImg">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
solution2
-2 2015-10-05 07:53:17
This is a snippet written beside my work. It is untested and is just an idea how to solve this situation.
-> http://jsfiddle.net/rsfw0w7e/2/
<div style="height:65px;border:solid 1px #999;">
<img class="thumbnail" src="https://zapperlapapp.files.wordpress.com/2011/03/bla_bla_bla_by_explosiv22.jpg" id="fabric" height="63" width="401"/>
</div>
<div style="height:65px;border:solid 1px #999;">
<img class="thumbnail" src="http://www.geileaufkleber.com/images/aufklber-bla-bla-bla-77110-schwarz.jpg" id="fabric" height="63" width="401"/>
</div>
window.onclick = function(e){
if (e.target.className == "thumbnail"){
//Make a "popup":
var popup = document.createElement("div");
popup.style.cssText = "background: rgb(255, 0, 0); position: absolute; height: 100%; width: 100%; left: 0; top: 0";
//Make the image:
var new_image = document.createElement("img"); //create a new img
new_image.src = e.target.src; //simply get the source from the thumbnail and give it to the new image
popup.appendChild(new_image); //add it to the parent
document.body.appendChild(popup); //add it to the element tree
}
}
Yeah I know - Is boring answer because no jquery.
Okay, I got 5 minutes, so let me give you a hint:
This snippet above is very very "casual". You should create "thumbnails" (I mean low resolution images -> 1.min.jpg).
Just get source replace ".min" with "" and load your high resolution image. This is the optimized way to create a gallery.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.