[英]How to show image on popup on click of that image?
我在 div 中创建了多个图像。 如果单击任何图像,则该图像将显示在另一个 div 中。(我有这个)。但如果我单击图像,则它将显示在弹出窗口中。 如何在单击该图像时在弹出窗口中显示图像。
<div style="height:65px;border:solid 1px #999;"> <img src="images/startdesign images/img7.png" id="fabric" height="63" width="401"/> </div>
<!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>
这是我工作旁边写的一段代码 。 这是未经测试 ,只是一个想法如何解决这种情况。
-> 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
}
}
是的,我知道-答案很无聊,因为没有jquery。
好的,我有5分钟的时间,所以让我给你一个提示:
上面的这段代码非常“随意”。 您应该创建“缩略图”(我的意思是低分辨率图像-> 1.min.jpg)。
只需获取源代码即可将“ .min”替换为“”,然后加载高分辨率图片。 这是创建画廊的优化方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.