0
241
Views¿Cómo puedo agregar una descripción para mostrar cuando se hace clic en una imagen?
Cuando hago clic en una imagen, se abre en un cuadro de imagen más grande. Quiero agregar una descripción a cada imagen que se abre debajo del cuadro de imagen cuando abro esa imagen en particular. Como se muestra en la imagen, quiero mostrar la descripción de esa imagen en particular debajo del cuadro de imagen más grande cuando se hace clic en la imagen.
$(document).ready(function() { $(".Thumbnail a").click(function(e) { e.preventDefault(); $(".imgBox img ").attr("src", $(this).attr("href")); }); }); document.addEventListener("mousemove", showImage); document.addEventListener("mouseleave", showImage); document.addEventListener("scroll", showImage); function showImage() { var items = document.getElementById("thumbnail").getElementsByTagName("li"); Array.from(items).forEach(function(e) { if (e.getElementsByTagName("img")[0].matches(":hover")) { //put whatever you want in here e.style.backgroundColor = "blue"; } else { //likewise put whatever you want in here e.style.backgroundColor = "red"; } }); } <body> <div class="imgBox"><img src="" alt="" /></div> <ul class="Thumbnail" id="thumbnail"> <li> <a href="img1.jpg" target="imgBox"><img src="img1.jpg" width="120px" /></a> </li> <li> <a href="img2.jpg" target="imgBox"><img src="img2.jpg" width="120px" /></a> </li> <li> <a href="img3.jpg" target="imgBox"><img src="img3.jpg" width="120px" /></a> </li> <li> <a href="img4.jpg" target="imgBox"><img src="img4.jpg" width="120px" /></a> </li> <li> <a href="img5.jpg" target="imgBox"><img src="img5.jpg" width="120px" /></a> </li> </ul> </body> <script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
·
Juan Pablo Isaza
1 answers
Answer question0
Me inclinaría a usar la figure para esto, ya que hace un envoltorio ordenado tanto para una imagen como para un pie de foto.
// Cache a container, and add a listener to it const container = document.querySelector('div'); container.addEventListener('click', handleClick, false); function handleClick(e) { // If the clicked element is an image if (e.target.matches('img')) { // Get its parentNode (figure) const parent = e.target.parentNode; // Get the `figcaption` const caption = parent.querySelector('figcaption'); // Toggle its `showcaption` class caption.classList.toggle('showcaption'); } } figure { display: inline-block; } figure img:hover { cursor: pointer; } figcaption { visibility: hidden; } .showcaption { visibility: visible; } <div> <figure> <img src="https://dummyimage.com/100x100/000/fff" alt="Dummy image"> <figcaption>Dummy image</figcaption> </figure> <figure> <img src="https://dummyimage.com/100x100/f44/000" alt="Dummy image 2"> <figcaption>Dummy image 2</figcaption> </figure> </div>
·
Juan Pablo Isaza
Report
Answer question