Guide to incorporating navigation buttons (back and forward) in a modal box

I have successfully created image thumbnails and linked them using the provided 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 flowerplants. 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>

My next step is to enhance the modal window by adding navigation buttons (previous and next) so that users can easily switch between images and descriptions without closing the window repeatedly. How can I achieve this functionality?

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Utilize the javascript modal API to conceal the current modal and exhibit whatever content you desire.

As an illustration, I connected a function to the buttons of the modals in order to achieve 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

Answer №2

If you are comfortable with jQuery, you can achieve your goal using a combination of Javascript and jQuery. One approach is to begin by organizing your images and text in a data object. You can refer to this Plunker link for an example based on your initial code.

View the example here

In this demonstration, I have set up a dataset using a simple array of Javascript objects.

var data = [
    { src: "https://placehold.it/150x150?text=Image1", title: "Image 1", description: "Sample description for Image 1." },
    { src: "https://placehold.it/150x150?text=Image2", title: "Image 2", description: "Sample description for Image 2." },
    { src: "https://placehold.it/150x150?text=Image3", title: "Image 3", description: "Sample description for Image 3." },
    { src: "https://placehold.it/150x150?text=Image4", title: "Image 4", description: "Sample description for Image 4." }
  ];

I've also created some basic functions to handle modal navigation, along with a mechanism to determine when the navigation links should be disabled. The modal opens upon clicking a particular item.

For loading the data, I went through the dataset and appended HTML for the thumbnails. While it adds complexity, it's still manageable.

The HTML now revolves around just one modal dialog, with navigation links placed within the body instead of the footer.

A snippet of CSS styles is included at the end to enhance the appearance of the navigation links.

I hope this explanation proves beneficial!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The appearance of online and local websites varies on a single screen and browser

My current dilemma revolves around the difference in appearance of my website when viewed locally versus online. Both versions are connected to the same git repository and use the same css file. Interestingly, I can view the page on both my local machine a ...

cssrenderingjsxnext.js

Using JQuery to duplicate and assign individual IDs to each clone

Currently, I am in the process of developing a straightforward web application. Users will enter information by selecting options from drop-down menus and typing text into designated fields. Upon completion, users can click on a "generate" button that will ...

javascriptjqueryhtmlforms

Extension for web design snippet

My program creates dynamic html documents using specific parameters, but there is one section that remains static and is pulled from a local text file. What would be the most appropriate file extension to use for this particular snippet? htm(l): Although ...

htmltext-filesfile-extensiondynamically-generated

Building intricate hierarchical menus with Material-UI 4.9

I am currently incorporating the @material-ui/core library into my application and aiming to implement a nested menu feature. I have referred to the material.io specification which discusses nested menus, but unfortunately, the material-ui library does not ...

javascriptreactjsmaterial-ui

Tips for preventing directly mutating a prop within a recursive component

The child operates on its own copy of the prop data and can notify the parent using `$emit` when a change occurs. Imagine dealing with a recursive tree structure, like a file system for example: [ { type: 'dir', name: 'music', childr ...

javascriptvue.jsvuejs2vue-component

Encountering an issue with setting up Pinia in Vue3, as it is showing an error message stating "

I am facing a challenge with my Vue app where the normal reactive store is not working correctly and does not retain the values I have set. Hence, I would like to switch to a Pinia store. After installing Pinia, my main.js file looks like this: import { cr ...

javascriptvue.jsvuejs3pinia

Teaching you how to incorporate empty spaces and punctuation within JOI

How can I modify Joi to permit spaces/whitespaces in a title field within a form? Scheduled to work with Jude tomorrow. I want to allow entries like: Morningwalk Currently, only the second example is passing validation. Below is my existing Joi val ...

javascriptnode.jsregexvue.jsjoi

Stop div from exceeding the page boundaries

Here's my current dilemma: I have a simple css3 tooltip-menu that is hidden by default and appears on mouseover. It has a fixed width and is positioned absolutely to the right (with an arrow in the middle pointing to the hovered element). The issue I ...

jquerycsstooltip

Utilizing Node, ObjectionJS, and Knex, we can establish a one-to-many relationship and retrieve the first associated row from the many

To simplify, I use two tables for a chatbox: Conversation and Message Conversations ID Status 1 open 2 open Messages Conversation ID Text Date 1 'ffff' (random date) 1 'asdf' (random date) 1 '3123123123&ap ...

javascriptmysqlnode.jsknex.jsobjection.js

Ways to utilize media queries for repositioning one div on top of another div

Utilizing Bootstrap 5 for website development, my aim is to enhance the responsiveness of the site across various devices. For mobile users, I envision the image-containing div to appear above the div containing the header and paragraph content, but I&apo ...

htmlcssfrontendmedia-queriesbootstrap-5

Menu Selector on the Right Side

I am currently working on a drop down menu and trying to align it to the right using HTML and CSS. Below is an example that I have been referencing: http://codepen.io/anon/pen/RNLmvq Attached here is a screenshot of how the menu appears without the text ...

csshtmldrop-down-menu

What is the best way to change a dynamically centered text alignment?

Is it possible to add a transition for a center-aligned text that changes due to an action? (codepen) HTML : <div id="container">Lorem ipsum dolor sit amet consectetur adipiscing elit</div> CSS : #container { width: 400px; height: 20px ...

jqueryhtmlcssreactjs

Issue with overlapping sticky dropdown and sticky navigation in Bootstrap 4

My issue revolves around getting the dropdown button menu to display in front of the vertical menu. When I click on the dropdown, the vertical (blue) menu takes precedence. This problem arose suddenly after applying the sticky-top class to both menus. Whil ...

htmlcssbootstrap-4

The backspace key is unresponsive following the use of a jQuery class

Using a specific class for an input field: Here is the code for the input field: <?php echo $this->Form->input('duration', array('class'=>'input-large text-right number-field','value'=>'0&apo ...

javascriptjquery

Limit not reached by substring function

When the character limit exceeds 20 characters, the substring function extracts the first 20 characters typed in the input. It replaces any additional characters that are entered after reaching the max limit of 20. In my program, however, I am able to con ...

javascripthtmlcharactercounting

Adding a pathway to a clip path: a step-by-step guide

While attempting to create a wave effect on an image, I hit a roadblock. There are two SVGs involved - one with the path I want to use and the other behaving as expected but with the wrong clip path/shape. However, when I try to insert the desired path, ...

cssimagesvg

Dealing with unsupported CSS properties in Next.js or implementing @supports directives in Chakra-UI

Currently, I am working on a React component that adjusts opacity values based on the support for the CSS backdrop-filter directive: background={(() => { const opacity = isBackdropFilterSupported() ? 0.75 : 0.98 return ( `linear-gradient( ...

cssnext.jschakra-ui

Vue and Vuex retrieve state data from the server in a single request

When loading the History view, data is fetched from the backend server using a Vuex action called in the created() lifecycle hook. This data is then passed to the history table through a computed function named history(), which accesses the history module ...

javascriptvue.jsvuejs2vuex

Utilizing Squelize's junction table for forming new connections: a comprehensive guide

I am currently working with three basic tables: A, B, and C. The relationship between A and B is many-to-many, so I am using a junction table called A_B. Table C has a one-to-many relationship with the junction table A_B. In sequelize, this is how they are ...

javascriptnode.jssequelize.js

PHP: Retrieving the ID of the clicked cell

I am trying to retrieve the ID of a cell when it is clicked on. Below is the code I am using to print my table: public function DrawBoard(){ echo '<table id="board">'; $i = 0; for($row= 0; $row < 8; $row++){ ...

phpjqueryajax