I'm trying to create a modal(dialog box) that is hidden by default for multiple images in a page. Whenever clicked on modal it will trigger to display image. I found this example in w3school code is as below
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.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 (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.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;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
<img id="myImg" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
it is applicable only for one image. Suppose if I want to do this for multiple images present in a page how can I achieve this? In my html file I'm displaying list of images in single page using for loop like below
{% for item in itemslist %}
<img src="{{url_for('image', path=item.thumb)}}" id="img{{loop.index}}" class="img-thumbnail" alt=""width="100" height="100"/>
{% endfor %}
how can i do modal image for all images.like in this image
i found this example modal image but this didn't help it was giving console error, may be I was doing wrong. Help me to fix this issue. Let me know if you need any more to ask
Tried based on answers
{% extends "base.html" %}
{% block content %}
<ul class="list-group">
{% for item in listitems %}
<li class="list-group-item d-flex justify-content-between align-items-center">
<a href="/browse/{{item.href}}" id="item{{loop.index}}">{{item.name}}</a>
<!--below hyperlink is just a hack for creating a clickable space-->
<a href="/browse/{{item.href}}" id="blahh{{loop.index}}" style="color:white">{{item.name}}</a>
{% if item.thumb != "" %}
<!-- <img src="{{url_for('image', fpath=item.thumb)}}" id="img{{loop.index}}" class="img-thumbnail" alt=""width="300" height="300"/> -->
<img src="{{url_for('image', fpath=item.thumb)}}" id="img{{loop.index}}" class="clickable" alt=""width="300" height="300"/>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
{% endif %}
</li>
{% endfor %}
</ul>
<script>
/* JavaScript */
// define variables to hold the 'modal' Elements
var modal, modalImg, captionText, close;
// Event Handler
function imageClicked(e) {
// set modal Elements on first click
!modal && (
modal = document.getElementById("modal"),
modalImg = document.getElementById("img01"),
captionText = document.getElementById("caption"),
// find the 'close' button and add an event listener
close = document.getElementsByClassName("close")[0],
close.addEventListener("click", closeModal, !1)
);
// the clicked image
var clickedImage = e.target;
// set the Elements in the 'modal' box
modalImg.src = clickedImage.src;
captionText.innerHTML = clickedImage.title;
modal.style.display = "block";
}
// Event Handler
function closeModal(e) {
modal.style.display = "none";
}
// Finally, add an event listener to
// every image with a class .clickable
[].slice.call(
document.getElementsByClassName("clickable")
).forEach(function(im) {
im.addEventListener("click", imageClicked, !1);
});
</script>
{% endblock %}
I ended up getting console error as this
