我已经创建了图像缩略图并使用以下代码链接了该缩略图。
现在我想在模态窗口中添加导航按钮(上一个和下一个),该窗口将显示图像以及描述该图像的段落。这样,一旦显示模态窗口,我就不必一遍又一遍地关闭窗口并返回缩略图图像了。一旦通过添加导航按钮显示模态窗口,我希望能够浏览所需的图像及其描述。有什么方法可以实现这个功能?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel='stylesheet' type='text/css' />
</head>
<body>
<!--thumbnail section-->
<section class="container">
<div class="row add-bottom text-center">
<a href="#migrant" class="thumbnail" data-toggle="modal">
<img src=".." alt="Project Image" class="img-responsive center-block">
</a>
<br />
<br />
<a href="#water" class="thumbnail" data-toggle="modal">
<img src=".." alt="Project Image1" class="img-responsive center-block">
</a>
</div>
</section>
<!--Modal Content-->
<div class="modal fade" id="migrant" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Migrants</h3>
<button type="button" class="close" data-dismiss="modal">x</button>
</div>
<div class="modal-body">
<div class="modal-footer txt_center">
<p>
<img src=".." alt="migrant01" class="pull-right">The Grapes of Wrath is an Amer list novel written by John Steinbeck and published in 1939. The book won the National Book Award and Pulitzer Prize for fiction, and it was cited prominently when Steinbeck was awarded the Nobel Prize in 1962
</p>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="water" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Water</h3>
<button type="button" class="close" data-dismiss="modal">x</button>
</div>
<div class="modal-body">
<div class="modal-footer txt_center">
<p>
<img src=".." alt="water01" class="pull-right">The Orchidaceae are a diverse and widespread family of flowering plants, with blooms that are often colourful and often fragrant, commonly known as the orchid family. Along with the Asteraceae, they are one of the two largest families of flowering
plants. The Orchidaceae have about 27,800 currently accepted species, distributed in about 880 genera
</p>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
onclick
事件中使用示例函数“showModal”作为回调,并传递要显示的缩略图的ID。 - JSierra