0
244
VistasHow can I add a description to show when clicked on an image?
When I click on an image it opens up in a bigger image box. I want to add a description to each image that opens up under the image box when I open that particular image. As shown in the picture I want to display the description to that particular image under the larger image box when the image is clicked.
$(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 Respuestas
Responde la pregunta0
I would be inclined to use figure for this as it makes a neat wrapper for both an image and a caption.
// 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
Denunciar
Responde la pregunta