Multiple Javascript Modals

Multiple Javascript Modals - javascript

Trying to create a page with multiple pictures, as you click on each it zooms in using a modal. This code worked great for 1 picture, but as I added several more, only the first works. Please advise.
// Zoom in Affect
// 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("img"); <!-- ? -->
var captionText = document.getElementById("caption"); <!-- ? -->
img.onclick = function(){ <!-- when you click on var img (which equals id="myImg", which is the original img? -->
modal.style.display = "block"; <!-- ? -->
modalImg.src = this.src; <!-- ? -->
modalImg.alt = this.alt; <!-- ? -->
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";
}
#myImg {
cursor: pointer;
transition: 0.3s;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border: 3px solid #7DAFE7;
}
#myImg:hover {
opacity: 0.7; /* How much image changes when moving mouse over it */
border: 3px solid #137709;
}
/* The Modal (background) */
.modal {
display: none; /* ? */ /* Hidden by default */
position: fixed; /* ? */ /* Stay in place */
z-index: 1; /* ? */ /* Sit on top */
padding-top: 100px; /* Pixels the zoomed image is from the top of the screen */ /* 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); /* ? not sure why there's 2 background-color */ /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%; /* Width of picture inside modal? */
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;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
.picture {
width: 100%;
/*background-color: #0200FF;*/
padding-left: 5%;
padding-right: 5%;
padding-top: 5%;
position: relative;
}
.imgPicture {
width: 90%;
}
<div class="picture">
<img class="imgPicture" id="myImg" src="photo-1.jpg">
<div id="myModal" class="modal">
<span class="close">X</span> <img id="img" class="modal-content">
<div id="caption"></div>
</div>
</div>
<div class="picture">
<img class="imgPicture" id="myImg" src="photo-2.jpg">
<div id="myModal" class="modal">
<span class="close">X</span> <img id="img" class="modal-content">
<div id="caption"></div>
</div>
</div>

You need to attach an event listener to each of the elements, since there are multiple instances. Also, it's good practice to use classes instead of IDs when creating multiple instances of an element (unless, as #mmm suggests, they are unique).
// Zoom in Affect
// 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.getElementsByClassName('imgPicture'); <!-- ? -->
var modalImg = document.getElementById("img"); <!-- ? -->
var captionText = document.getElementById("caption"); <!-- ? -->
for (var i=0; i<img.length; i++) {
img[i].addEventListener('click', function(){ <!-- when you click on var img (which equals id="myImg", which is the original img? -->
modal.style.display = "block"; <!-- ? -->
modalImg.src = this.src; <!-- ? -->
modalImg.alt = this.alt; <!-- ? -->
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";
}
#myImg {
cursor: pointer;
transition: 0.3s;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border: 3px solid #7DAFE7;
}
#myImg:hover {
opacity: 0.7; /* How much image changes when moving mouse over it */
border: 3px solid #137709;
}
/* The Modal (background) */
.modal {
display: none; /* ? */ /* Hidden by default */
position: fixed; /* ? */ /* Stay in place */
z-index: 1; /* ? */ /* Sit on top */
padding-top: 100px; /* Pixels the zoomed image is from the top of the screen */ /* 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); /* ? not sure why there's 2 background-color */ /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%; /* Width of picture inside modal? */
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;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
.picture {
width: 100%;
/*background-color: #0200FF;*/
padding-left: 5%;
padding-right: 5%;
padding-top: 5%;
position: relative;
}
.imgPicture {
width: 90%;
}
<div class="picture">
<img class="imgPicture" id="myImg" src="photo-1.jpg">
<div id="myModal" class="modal">
<span class="close">X</span> <img id="img" class="modal-content">
<div id="caption"></div>
</div>
</div>
<div class="picture">
<img class="imgPicture" id="myImg" src="photo-2.jpg">
<div id="myModal" class="modal">
<span class="close">X</span> <img id="img" class="modal-content">
<div id="caption"></div>
</div>
</div>

Related

fixing problems in multiple images which when clicked will show a different image?

I am currently trying to make multiple images which when click will have different pictures
for example when u click an snow mountain image it will show let say a beach image, something similar to this: Image modal that displays different image than the one clicked. but will also occur in more than 3 or 4 images
I used the code here:
here: http://www.w3schools.com/howto/howto_css_modal_images.asp
this is the CODE:
// 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";
}
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:0px auto;
display: block;
width: 100%;
max-width: 900px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 200px;
}
/* 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%;
}
}
<!-- Trigger the Modal -->
<img id="myImg" src="https://www.w3schools.com/howto/img_nature.jpg" alt="Snow" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" src="https://www.w3schools.com/howto/img_snow.jpg">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
<!-- Trigger the Modal -->
<img id="myImg" src="https://www.w3schools.com/howto/img_lights.jpg" alt="Snow" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" src="https://www.w3schools.com/howto/img_mountains.jpg">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
one of them works but the other one doesn't
I also used the codes and method over here, but also doesn't work:
Modal image galleries - multiple images
same but i used another Javascript:
var modal = document.getElementById("myModal");
var i;
var img = document.getElementsByClassName("myImg");
var modalImg = document.getElementById("img01");
for(i=0;i< img.length;i++)
{
img[i].onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
but still doesn't work
can anyone help me?
and also if possible if you have a CSS to remove the space from the bottom and bring the picture to the top, this is how it looks like for my code:

id must be unique for every img tag you can get id from onClick event.
function modal_open(clicked_id)
{
var modal = document.getElementById("myModal");
var img = document.getElementById(clicked_id);
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";
}
}
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:0px auto;
display: block;
width: 100%;
max-width: 900px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 200px;
}
/* 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%;
}
}
<!-- Trigger the Modal -->
<img id="myImg" src="https://www.w3schools.com/howto/img_nature.jpg" alt="Snow" style="width:100%;max-width:300px" onmouseover="modal_open(this.id)">
<img id="myImg1" src="https://www.w3schools.com/howto/img_lights.jpg" alt="Snow" style="width:100%;max-width:300px" onmouseover="modal_open(this.id)">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>

Your error is because the onclick function attempting to assign the url to src of the <img> element that "suppose" comes with the ID img01, but the html doesn't have the <img> with the id.
Refer to #Robin Hood answer, his code explains the proper way of implementation.

Based off of the answer from #Robin Hood I adapted it slightly to let you specify a path of your choice using a data attribute on the image.
So like
<img id="myImg1" src="https://www.w3schools.com/howto/img_lights.jpg" alt="Snow" data-path="https://picsum.photos/500?random=2" style="width:100%;max-width:300px" onmouseover="modal_open(this.id)">
The data-path="https://picsum.photos/500?random=2" is the where you put the source URL for the image you want to appear in the modal.
There is also a small JS tweak, the CSS remained the same
function modal_open(clicked_id)
{
var modal = document.getElementById("myModal");
var img = document.getElementById(clicked_id);
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.dataset.path; /* THIS IS THE ONLY JS CHANGE */
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";
}
}
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:0px auto;
display: block;
width: 100%;
max-width: 900px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 200px;
}
/* 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%;
}
}
<!-- Trigger the Modal -->
<img id="myImg" src="https://www.w3schools.com/howto/img_nature.jpg" alt="Snow" data-path="https://picsum.photos/500?random=1" style="width:100%;max-width:300px" onmouseover="modal_open(this.id)">
<img id="myImg1" src="https://www.w3schools.com/howto/img_lights.jpg" alt="Snow" data-path="https://picsum.photos/500?random=2" style="width:100%;max-width:300px" onmouseover="modal_open(this.id)">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>

Side-By-Side Gifs That Expand When Clicked

First off, I am new to coding. I am trying to put two gifs side by side that when clicked on expand into a pop up window and the videos are enlarged. I have succeeded in getting the images side by side. The first gif expands when clicked on and acts how I want it to. But the second gif does not. I believe it has to do with the 's both being the same, but I am not sure how to go about using a class or multiple ids to make the modal work correctly. Some help would be much appreciated! Attached is my code.
// 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";
}
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
/*Image Loops*/
#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: 1600px;
height: 800px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-size: 20px;
}
/* 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: white;
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%;
}
}
<div class="row">
<div class="column">
<img id="myImg" src="image.gif" alt="img" text-align="center" style="width:100%"><br>
</div>
<div class="column">
<img id="myImg" src="image2.gif" alt="image2" text-align="center" style="width:100%"><br>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>

First of all this part here :
var img = document.getElementById("myImg");
is getting only first element with this ID. ID should be unique.
The solution to this would be using a class instead but there's a problem with that approach. The problem is when you get elements by Classname it returns HTML collection to which you can't bind an event without looping it which would make things complicated.
So the best solution to this instead of binding an event use onClick as an attribute and call a function.
Solution
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
function modalOpen(src,alt){
modal.style.display = "block";
modalImg.src = src;
captionText.innerHTML = 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";
}
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
.caption{
text-align:center
}
/*Image Loops*/
#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: 1600px;
height: 800px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-size: 20px;
}
/* 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: white;
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%;
}
}
<div class="row">
<div class="column">
<img id="myImg" onclick="modalOpen(this.src,this.alt)" src="http://via.placeholder.com/128x128" alt="img" text-align="center" style="width:100%"><p class="caption">img</p><br>
</div>
<div class="column">
<img id="myImg" onclick="modalOpen(this.src,this.alt)" src="http://via.placeholder.com/129x129" alt="image2" text-align="center" style="width:100%"><p class="caption">image2</p><br>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>

I do not have the actual images, but I believe this should work.
// Get the modal
const modal = document.getElementById('myModal');
const modalImg = document.getElementById("img01");
const captionText = document.getElementById("caption");
document.addEventListener('click', (event) => {
if (event.target.matches('img')) {
loadModalImage(event.target);
}
}, false);
const loadModalImage = (target) => {
modal.style.display = "block";
modalImg.src = target.src;
captionText.innerHTML = target.alt;
}
// Get the <span> element that closes the modal
const span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = () => {
modal.style.display = "none";
}
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
/*Image Loops*/
.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: 1600px;
height: 800px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-size: 20px;
}
/* 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: white;
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%;
}
}
<div class="row">
<div class="column">
<img class="myImg" src="https://picsum.photos/100/100" alt="img" text-align="center" style="width:100%"><br>
</div>
<div class="column">
<img class="myImg" src="https://picsum.photos/100/100" alt="image2" text-align="center" style="width:100%"><br>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>

Image Zoom in and Zoom out by clicking the image and showing Popup by cliciking specific point

I want the image to be zoom in and zoom out also it should save the specific point clikced .

As per your question i understand you want to display image and click on image it will be zoom... easy and simple way to implement by using below concepts:
// 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";
}
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%;
}
}
<img id="myImg" src="https://www.w3schools.com/howto/img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>

How Do I Open Text by Clicking on An Image?

I am making my first website and I am trying to be able to have someone click an image and then it open text to explain what that image is/does.
I would also like it to dim the background and allow the user to click outside the text popup to close.
I feel like I am very close, but I could use some help.
Any advice is appreciated!
Thank you!
Jordan
<html>
<head>
<style>
#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 */
}
}
/* 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 */
#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>This is a Corona Bottle</h2>
<p>I enjoy Corona!</p>
<img id="myImg" src="http://thebearbrewpub.com/wp-content/uploads/2013/07/Corona.jpg" alt="Corona Bottle" width="300" height="200">
<!-- 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>
<script>
$('#myImg').on('click', function(){
$('#myImg').css("opacity", "0");
})
$('#closeTextBoxID').on('click', function(){
$('#myImg').css("opacity", "1");
})
</script>
</body>
</html>

<html>
<head>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
color: white;
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 */
}
}
/* 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 */
#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>This is a Corona Bottle</h2>
<p>I enjoy Corona!</p>
<img id="myImg" src="http://thebearbrewpub.com/wp-content/uploads/2013/07/Corona.jpg" alt="Corona Bottle" width="300" height="200">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<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 captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
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>
<script>
$('#myImg').on('click', function(){
$('#myImg').css("opacity", "0");
})
$('#closeTextBoxID').on('click', function(){
$('#myImg').css("opacity", "1");
})
</script>
</body>
</html>

CSS3 Image Modal (Advanced) .. for more the one Image?

there is a great example of images in modal on http://www.w3schools.com/css/css3_images.asp (please scroll down to "Image Modal (Advanced)") or see http://www.w3schools.com/css/tryit.asp?filename=trycss_image_modal_js for the code and the result.
It works perfekt for me if I use just one single image on one site.
But I want to use the image modal for more then one image.
If I create a second image with the same code it is there, but when you click it´s not opening the modal
// 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;
modalImg.alt = this.alt;
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";
}
#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 {transform:scale(0)}
to {transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0.1)}
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%;
}
}
<!DOCTYPE html>
<html>
<body>
<img id="myImg" src="img_lights.jpg" alt=":) this modal is great" width="300" height="200">
<img id="myImg" src="img_lights.jpg" alt=":( this not" width="300" height="200">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</body>
</html>
What I have to change in the code to get this working?

var img = document.getElementById('myImg');
Here you should use dynamic id.

Develop Reference

JavaScript is the programming language of the Web.

Multiple Javascript Modals - javascript

Related

fixing problems in multiple images which when clicked will show a different image?

Side-By-Side Gifs That Expand When Clicked

Image Zoom in and Zoom out by clicking the image and showing Popup by cliciking specific point

How Do I Open Text by Clicking on An Image?

CSS3 Image Modal (Advanced) .. for more the one Image?

Categories

Resources