如何在单击图像时在同一页面上的多个图像上使用引导模式？
我在页面上有大约18张图片，我试图在点击图片后以一种模式显示更大的图片，但每次它只显示第一张图片。
我已经尝试过使用$（这个）遍历DOM。查找（'img'），我在孩子们身上尝试过，我也尝试过将图像设置为不同的ID，并将它们设置为变量。
我目前的尝试是将小图像的路径设置为与大图像的路径相同的id，然后使用查找。我现在只“设置”了前两个图像，因为我还不能让它正常工作。
顺便说一句，我已经尝试了其他放大和弹出窗口和插件的方法，但没有成功，这是我最接近工作的东西。
注意：还有一个问题显示了几乎相同的问题，但那里的答案对我来说并不适用。
<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>
剧本
$(document).ready(function () {
$('img').on('click', function () {
var picID = $(this).attr('id');
$(this).find('picID');
$('picID').modal('toggle');
});
});
共有3个答案
我正在学习英语，所以我不确定我是否完全理解，但如果你想通过点击每个缩略图在模态中显示不同的图像。我认为这个代码可以帮助你。
下面是一个Jsfiddle示例：如何在同一个模态上显示多个图像
以及守则：
<!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">×</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>
你的意思是你有18张图片，当你点击一张图片时，网站会打开一张打开的图片来显示一张更大的图片？
所以，为什么不使用另一个插件，比如Nivo lightbox，它允许您打开一个弹出窗口来显示图像，即使在打开弹出窗口时将所有图像都放在一个图库中
你离目标很近了你有2张图
<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.' />
一个模态
<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>
如果您想使用功能以模式显示您的方法中的图像，请单击功能
$(document).ready(function () {
$('img').on('click', function () {
var image = $(this).attr('src');
$('#myModal').on('show.bs.modal', function () {
$(".img-responsive").attr("src", image);
});
});
});
不停摆弄
或者，您也可以只使用引导模式事件函数，这是一种更简单、更好的方法（推荐的解决方案）
$(document).ready(function () {
$('#myModal').on('show.bs.modal', function (e) {
var image = $(e.relatedTarget).attr('src');
$(".img-responsive").attr("src", image);
});
});
不停摆弄
-
我想要多个图像滑块在相同的页面与相同的类名使用JavaScript。我已经做了一个图像滑块。 问题是当我使用多个图像滑块时，它不能正常工作。我尝试了childNodes，但它也不能工作。我该如何解决这个问题呢？ 并且我正在尝试使滑动动画也（左和右）的图像滑块。 如果你需要更多的解释，让我知道。 我给出了下面的代码； HTML CSS JavaScript
-
问题内容： 我只想使用swift在firebase上上传多个图像。我现在正在上传一张图片，但无法上传多张图片。这是我的代码 问题答案： 当前没有直接API可以批量上传/下载文件。我们不能使用循环，因为所有任务都执行。我们可以做的是使用递归函数。 核心逻辑 完整代码示例 1.我创建了一个自定义类来上传文件 2.在这里我们如何使用 首先，为主要功能创建一个完成块，当您成功上传所有图像时，它将通知您。
-
使用matplotlib时，我可以使用{importmatplotlib.pyplotas plt}因为我使用Tkinter，所以我也会使用PicreCanvasTkAgg来做同样的事情 有人能帮我在如何实现matplotlib的停顿效果在菲格勒CanvasTkAgg。
-
问题内容： 我编写的代码可以一次打开16位数字。目前，它们都以单独的图形打开。我希望他们在同一页面上全部打开。不一样的图。我希望在单个页面/窗口上有16个独立的图形。同样由于某种原因，numbins和defaultreallimits的格式也无法保存在图1之前。我是否需要使用subplot命令？我不明白为什么我必须这样做，但不知道我还要做什么？ 问题答案： 要回答您的主要问题，您想使用subplo
-
问题内容： 我试图在数据库表的一行中上传多个图像并在显示页面中访问它们。我已经尝试过本教程： laraveldaily.com/upload-multiple- files-laravel-5-4/， 但是有两个不同的表建立关系。 我希望这在单个表中发生。 问题答案： 这是最适合我的： 首先以您的形式执行此操作： 这是多项选择： 现在在您的控制器中执行以下操作： 希望这行得通
-
问题内容： 我是Rails编程的初学者，试图在页面上显示许多图像。有些图像要放在其他图像之上。为简单起见，假设我要一个蓝色正方形，在蓝色正方形的右上角有一个红色正方形（但在角落不紧）。由于性能问题，我试图避免进行合成（使用ImageMagick等）。 我只想相对于彼此放置重叠的图像。 举一个更困难的例子，想象一下将里程表放在更大的图像中。对于六位数字，我将需要合成一百万个不同的图像，或者即时进行处