How to add navigation buttons(previous and next) to a modal
Question
I have created image thumbnail and linked that thumbnail using the following code.
<!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>
Now I want to add navigation buttons(previous and next) to the modal window which will display the image along with a paragraph which describes the image. So that once the modal window is displayed I don't have to close the window and go back to thumbnail image over and over again. Once, the modal window is displayed by adding the navigation button I want to go for the desired image with its description. How possibly could I go for this?
2 answers
solution1
3 2016-05-09 17:22:05
You can use the javascript modal API to hide the current modal and show wathever you want.
For example, I associated a function to the buttons of the modals to do it:
<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">
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="showModal('water')">Next</button>
</div>
</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">
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="showModal('migrant')">Previous</button>
</div>
</div>
</div>
</div>
</div>
<script>
function showModal(id) {
$(".modal").modal('hide');
$("#" + id).modal();
}
</script>
</body>
https://jsfiddle.net/vegdyf48/
The javascript API: https://getbootstrap.com/javascript/#via-javascript
solution2
1 2016-05-09 16:51:30
I'm not sure how comfortable you are with jQuery, but you can accomplish this with a little bit of Javascript/jQuery. The best way would be to start with your images and text in some type of data object. Here is a Plunker link with an example based on your original code.
https://plnkr.co/edit/Fq9pFzrgE9VOOLmljlXw?p=preview
In it, I've created a dataset using a basic array of Javascript objects.
var data = [
{ src: "https://placehold.it/150x150?text=Image1", title: "Image 1", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a est mauris. Sed non sollicitudin lacus. Sed maximus facilisis purus, et blandit lectus vehicula in." },
{ src: "https://placehold.it/150x150?text=Image2", title: "Image 2", description: "Aenean accumsan metus ipsum, id vehicula felis semper sed. Sed hendrerit pulvinar porttitor. Etiam id tortor leo. Integer ex dui, vulputate vel iaculis sit amet, laoreet eu sem." },
{ src: "https://placehold.it/150x150?text=Image3", title: "Image 3", description: "Vivamus luctus est at sapien sollicitudin, nec mattis arcu condimentum. Vivamus sed varius diam. Nulla varius, tortor vel tempus feugiat, libero felis pellentesque mi, sit amet sagittis lacus massa et erat. " },
{ src: "https://placehold.it/150x150?text=Image4", title: "Image 4", description: "Vestibulum eu ex ac nunc pretium hendrerit vel in quam. Morbi imperdiet imperdiet pharetra." }
];
Then, I created a few simple functions to manage the modal navigation, including a check to see if the nav links should be disabled. I'm also using the javascript trigger to open the modal, so you can load the appropriate item on click.
var currentItem = 0;
function prevImg() {
if (currentItem > 0) {
currentItem--;
}
loadData();
}
function nextImg() {
if (currentItem < data.length - 1) {
currentItem++;
}
loadData();
}
function loadData() {
$("#modalTitle").html(data[currentItem].title);
$("#modalImg").attr("src", data[currentItem].src).attr("alt", data[currentItem].title);
$("#modalText").html(data[currentItem].description);
// enable/disable nav buttons
$("#navPrev").removeAttr("disabled");
$("#navNext").removeAttr("disabled");
if (currentItem == 0) {
$("#navPrev").attr("disabled", "disabled");
}
else if (currentItem == data.length - 1) {
$("#navNext").attr("disabled", "disabled");
}
}
function openModal(idx) {
currentItem = idx;
loadData();
$("#modal").modal();
}
To load the data, I looped through the dataset and appended the HTML for the thumbnails. This is a tad more complex, but still not terrible.
$(document).ready(function () {
var $thumbs = $(".thumbnails");
// dynamically add thumbnails to page
for (var i = 0; i < data.length; i++) {
$thumbs.append('<a href="#" onclick="openModal(' + i + ')" class="thumbnail" data-toggle="modal" alt="' + data[i].title + '"><img src="' + data[i].src + '" class="img-responsive center-block" /></a>');
}
});
With that, you can reduce your HTML to using just one modal dialog. I've also included the nav links within the body, instead of using buttons in the footer.
<body>
<!--thumbnail section-->
<section class="container">
<div class="row add-bottom text-center thumbnails">
</div>
</section>
<!--Modal Content-->
<div id="modal" class="modal fade" tabindex="-1" role="dialog">
<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 id="modalTitle" class="modal-title"></h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-1">
<a id="navPrev" href="#" onclick="prevImg()"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></a>
</div>
<div class="col-xs-10">
<img id="modalImg" src="" alt="" class="pull-right" />
<span id="modalText"></span>
</div>
<div class="col-xs-1">
<a id="navNext" href="#" onclick="nextImg()"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
Lastly, here are a few simple styles to format the nav links.
#navPrev, #navNext {
color: #333;
font-size: 2em;
}
#navPrev:hover, #navNext:hover {
color: red;
}
#navPrev[disabled], #navNext[disabled] {
color: #cdcdcd;
cursor: default;
}
Hope that helps!
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.
Related Question
Add next and previous buttons when the I open the modal
How to add next and previous buttons for this custom scroll?
How to add Next/Previous buttons for JS Tabs
How to add next and previous buttons to image galary
How to add next previous buttons to popup?
How to add Previous & Next buttons with SoundCloud API
How to make a modal slider with next and prev buttons navigation on popup
How to interate an array with navigation menu buttons (first, previous, next, last)
Adding Next & Previous Buttons to modal with JavaScript
How to add previous and next buttons in video.js
Related Tags