Description of Images in a ClickWould you like to learn

Creating Modal Images with Descriptions

I stumbled upon some code here for generating multiple Modal Images. However, I'm having trouble figuring out how to include description text when the modal opens up. The code in the second-to-last answer on this post was quite helpful: Several Modal Images on page but it only covers caption text. If anyone can assist me in solving this issue, I would greatly appreciate it. Thank you in advance!

CODE :

#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {
  opacity: 0.7;
}

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

#text {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

.modal-content,
#text {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}


</style>
</head>
<body>
  <img class="myImg" src="http://onebigphoto.com/uploads/2012/10/midnight-sun-in-lofoten-norway.jpg" alt="Midnight sun in Lofoten, Norway" width="300" height="200">
  <div class="text">The Beautiful mountain over the Norway River was a spectacular view to see..</div>

  <img class="myImg" src="http://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1490029386/fisherman-cabin-hamnoy-lofoten-islands-norway-NORWAY0320.jpg?itok=cpPuUjh1" alt="Fishermen's cabins in Lofoten, Norway" width="300" height="200">
  <div class="text">The lovely cabins here in Norway was an amazing stay with beautiful scenery...</div>

  <img class="myImg" src="http://fjordtours.blob.core.windows.net/fjordtours-umbraco/1199/gerirangerfjord-per-ottar-walderhaug-fjordnorway.jpg" alt="Gerirangerfjord, Norway" width="300" height="200">
  <div class="text">An afternoon on top of the Norway mountains you get an even more breath taking view..</div>

  <div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" id="img01">
    <div class="text"></div>
  </div>
< script >
  var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('myImg');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementsByClassName("text");

// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
  var img = images[i];
  // and attach our click listener for this image.
  img.onclick = function(evt) {
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
  }
}

var span = document.getElementsByClassName("close")[0];

span.onclick = function() {
    modal.style.display = "none";
  } </script>

  </body> 
  </html>

Answer №1

To properly display both the image and text content, you should encapsulate them within a div element. This will allow you to click on the wrapped div and access its content using the .innerHTML property. Additionally, make a slight adjustment in your JavaScript code from modalImg.src = this.src to modalImg.innerHTML = this.innerHTML; as shown in the following snippet:

var modal = document.getElementById('myModal');
// Access all images - note that a class is utilized!
var images = document.getElementsByClassName('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementsByClassName("text");

for (var i = 0; i < images.length; i++) {
  var img = images[i];
  
  img.onclick = function(evt) {
    modal.style.display = "block";
    modalImg.innerHTML = this.innerHTML;
    captionText.innerHTML = this.alt;
  }
}

var span = document.getElementsByClassName("close")[0];

span.onclick = function() {
  modal.style.display = "none";
}
*,*:before, *:after{box-sizing: border-box;}
body{
  margin: 0;
  padding: 0;
  font-family: Arial;
}
.myImg{
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  display: inline-block;
  vertical-align: top;
  width: 300px;
  min-height: 200px;
}
.myImg:hover {
  opacity: 0.7;
}
.myImg img{
  max-width: 100%;
}
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
  margin: 0 auto 20px auto;
  display: block;
  width: 80%;
  max-width: 700px;
}
.modal-content img{
  width: 100%;
  display: block;
}
.modal-content .text{
  font-size: 16px;
  color: #f1f1f1;
  padding: 10px;
}
.modal-content{
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}
<div class="myImg">
  <img src="http://onebigphoto.com/uploads/2012/10/midnight-sun-in-lofoten-norway.jpg" alt="Midnight sun in Lofoten, Norway">
  <div class="text">The Beautiful mountain over the Norway River was a spectacular view to see..</div>
</div>

<!-- Modal Elements -->
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <div class="modal-content" id="img01"></div>
</div>

Answer №2

A more efficient method would be to consolidate the image and text within the same container.

<div class="image-container">
<img class="myImg" src="http://onebigphoto.com/uploads/2012/10/midnight-sun-in-lofoten-norway.jpg" alt="Midnight sun in Lofoten, Norway" width="300" height="200">
  <div class="text">The breathtaking view of the Beautiful mountain over the Norway River was a sight to behold.</div>
</div>

Next, utilize JavaScript to define a variable named modalContent and target your container.

var modalContent = getElementById('image-container');

This streamlines the process and minimizes the number of selectors needed. Based on your code structure, it was unclear whether each image appeared in its own modal window or together. Hopefully, this explanation clarifies things for you.

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

Changing $scope does not automatically refresh the selected option when using ng-options with <select> in AngularJS

My select element is structured like this: <select ng-model="exportParam" ng-options="item as item.lib for item in allExportParams | orderBy:'lib'" class="form-control"> </select> To save its state for later display, I sto ...

Tips for transferring information from a parent to a child controller in Angular using the $broadcast method?

I am trying to send an id argument to a child controller using Angular's $broadcast method, but despite my best efforts with the code below, I can't seem to make it work. Any suggestions on what might be incorrect in my implementation? ParentCtr ...

Resize an image to fit perfectly within a material-ui grid

Is there a way to resize images within a grid layout without them getting cropped? Each image I try to fit into the top horizontal grid behaves differently due to varying dimensions. Instead of stretching and fitting into the container, the images end up b ...

How can I align a sub-submenu horizontally using CSS?

I've built a nested menu using the ul/li tags, and I'm looking to align the second and third sub-menus horizontally with the first submenu. Here is my current visual layout: https://i.sstatic.net/4TctL.png, and this is what I want it to look lik ...

CSS and Javascript interactivity problem with submenus in the navigation

Hey there! I'm currently working on designing a horizontal menu bar for a website project. The goal is to have top level items with sub menus that appear when you hover over them, while maintaining proper justification. So far, everything is coming a ...

How can I display PDF files in an Android webview using Google Docs within an Appgyver Steroids app?

Currently, I am working on building an application using "Appgyver Steroids" and one feature of the app requires users to be able to view PDFs from a website. My goal is to implement the Google Docs viewer for this purpose, however, I am unsure how to ac ...

Guide on customizing webpack to incorporate SCSS in a React application

After creating my React app using create-react-app (with React ver. 16.6.3), I decided to incorporate SCSS into my components. To begin, I ran the eject script and made necessary adjustments in webpack.config.dev.js: { test: cssRegex, exclude: cssMo ...

To make changes to an item, simply tap on the Catalog number

I'm currently facing a challenge in trying to implement a modal window that displays detailed information about a selected item based on the catalog number. The catalog number serves as the trigger to open the modal. Since I'm relatively new to a ...

Detecting when an object exits the proximity of another object in ThreeJS

In my ThreeJS project, I have planes (Object3D) flying inside a sphere (Mesh). My goal is to detect when a plane collides with the border of the sphere so that I can remove it and respawn it in a different location within the sphere. I am wondering how I ...

How to arrange images of different sizes within a Bootstrap grid

My challenge involves incorporating 3 images with different sizes into a Bootstrap grid of 3 x 4 columns: https://i.sstatic.net/sKi8s.png This is causing disruption in my layout. My desired outcome looks like this: https://i.sstatic.net/mfjFD.jpg How c ...

Ways to conceal scrollbar track

Is there a method to conceal the track of the scrollbar while keeping the thumb visible? The desired appearance is shown in the following image: https://i.sstatic.net/6TqmM.png However, the current view is as follows: https://i.sstatic.net/tdJq3.png Th ...

What steps can I take to ensure that the content within my bootstrap container always fits neatly within the container boundaries?

I'm attempting to structure one container with 3 rows. The first row contains the header, the last row the footer. In the middle row, I want two columns. The left column should display multiple scrollable cards. I've tried various methods to make ...

Verify input submission using jQuery UI

I'm in the process of verifying a submit form that has been created using Ruby on Rails. Prior to submitting, I have implemented a condition that triggers a confirmation popup asking the user if they truly wish to proceed. Initially, this was function ...

Tips for simulating an axios request that returns an image buffer

I am attempting to simulate an axios api call that returns an image buffer as shown below: <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 01 00 01 00 00 ff e1 00 de 45 78 69 66 00 00 49 49 2a 00 08 00 00 00 06 00 12 01 03 00 01 00 00 00 01 00 ... ...

Introduce a transition effect to the MUI Chip component to enhance user experience when the Delete Icon

When the delete icon appears, it is recommended that the overall width of the chip increases smoothly rather than instantly. Here is the current code structure: CSS: customChip: { "& svg": { position: "relative", display: &quo ...

Automating pie charts and bar graphs with selenium: A step-by-step guide

Is there a way to automate the chart actions in Selenium using Web-driver/Java (Kendo Ui)? I am looking for a method to click on the chart segments. The graph I am working with is similar to the one found at the following link: ...

Would it be beneficial to upload and download an image using the same ajax call?

I recently made a change to my web app's image upload feature. Previously, the process involved uploading an image, retrieving the image URL, and then making a second request to download the image from the URL. Now, I have streamlined it so that when ...

Stop the Text Table from being highlighted

My webpage includes a dynamic table where users can select multiple rows. jQuery events and CSS are utilized to provide visual feedback when a row is selected. However, pressing the shift key sometimes causes text to become highlighted, which is not idea ...

Unexpected Behavior: Performance API Issue in Vue.js with Javascript Integration

Currently, I am working on a small project which requires me to calculate the time taken for each page to load. To achieve this, I am utilizing the Performance API. Specifically, I am using the getEntriesByName() method within the Performance API as demons ...

What is the best location to place Sentry's setUser function in a Next.js application?

I have been working on integrating user data into Sentry's scope globally so that user information is passed to it every time an error or event occurs. My application is developed in Next.js, and I followed the configuration mentioned in Sentry' ...