For a class assignment, I have to make a gallery of images which i will be using on my final website. when a image is clicked, an enlarged version of that image will be displayed on the page as a modal image. However, the image that is been clicked on has to be a "thumbnail image", which is at a way smaller resolution (480x270) that the enlarged one, which is at 1920x1080.
This is my HTML code (I used anchors for the enlarged image and img src for thumbnail image):
<a class="myImages" id="myImg" href="screenshots/image1.jpg" target="_blank">
<img src="screenshots/thumbnails/image1-480.jpg" alt="description" style="width: 100%">
</a>
CSS:
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
}
.modal-content {
margin: auto;
display: block;
width: 100%;
max-width: 70%;
}
#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;
}
JavaScript:
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('myImages');
var modalImg = document.getElementById("img01");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.href;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
Most of the code is from W3Schools, I just modified it a little so that it works with a gallery of 20+ images.
However, because there is an anchor tag around the img, if i don't include the target="_blank", when the image is clicked on, it will just open up the enlarged image on the same page and not the modal. If I include the target="_blank", the enlarged image will open in a new tab, but the modal will open up on the original page too.
The result I need is a combination of the two described above, the modal needs to open up without the image opening in a new tab as well.
Is there something I am doing wrong? and how would I fix it?
Adding e.preventDefault() in onclick function should do the job.
And don't forget to bind the event to the function
img.onclick = function(e) {
e.preventDefault()
modal.style.display = "block";
modalImg.src = this.href;
}
Related
Modal Images With Image Description
I found this code on here about making multiple Modal Images.
However I cannot seem to find the best way to add the description text along with it when I open the modal up. I have been following the code on the 2nd to last answer on this post:
Several Modal Images on page
which was helping me a lot but I need description text not caption text.
If anyone is willing to help me solve this it would be much appreciated.
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">×</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>
You need to wrap img + text with div so after click on wrapped div then pick inside content by .innerHTML property and change modal img to div.
Just small modification into your js code modalImg.src = this.src to modalImg.innerHTML = this.innerHTML; something like below snippet.
I hope below snippet will help you lot.
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;
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;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 50px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: hidden;
overflow-y: 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: 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>
<div class="myImg">
<img 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">
<div class="text">The lovely cabins here in Norway was an amazing stay with beautiful scenery...</div>
</div>
<div class="myImg">
<img src="http://fjordtours.blob.core.windows.net/fjordtours-umbraco/1199/gerirangerfjord-per-ottar-walderhaug-fjordnorway.jpg" alt="Gerirangerfjord, Norway">
<div class="text">An afternoon on top of the Norway mountains you get an even more breath taking view..</div>
</div>
<!-- Modal Elements -->
<div id="myModal" class="modal">
<span class="close">×</span>
<div class="modal-content" id="img01"></div>
</div>
It would be far more simple to place image and text in 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 Beautiful mountain over the Norway River was a spectacular view to see..</div>
</div>
Then use JavaScript to declare a variable called modalContent and select your container.
var modalContent = getElementById('image-container');
It just simplifies everything and reduces the number of selectors required. Looking at your code I was having trouble trying to understand if each image displayed in a modal window separately or all together. I hope that this has helped.
I have this very close but not quite. What I am looking for is to cycle images based on a radio button selection, this works fine. I would also like a modal on click of the image, so if I select radio selection 1, image name from the array shows and is clickable to a modal, similarly for each other radio option. Again, this is working fine. what is not is the modal pop up based on the radio button image.
Here is the css used:
#piGal ul {
float: left;
list-style-type: none;
padding: 20px 2em 3em 2em;
}
#piGal img {
max-width: 100%;
height: auto;
padding: .5em .5em 2em .5em;
}
#piGal .outer {
float: left;
padding-bottom: 5px;
}
#piGalImg img {
max-width: 100%;
height: auto;
-webkit-box-shadow: 0px 0px 1px #000;
-moz-box-shadow: 0px 0px 1px #000;
padding-bottom: 5px;
}
#piGalImg .outer {
float: left;
padding-bottom: 5px;
}
/* Style the Image Used to Trigger the Modal */
#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 (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.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%;
}
}
The radio button (simplified) is as follows:
<div class="contentText">
<section>
<h5>Choose color</h5>
<ul id="radio-attribute" class="radio-attribute">
<li class="radio-attribute">
<label for="1" class="radio-attribute">
<input type="radio" id="1" name="id[27]" value="170" onClick="change_image(this.id)">
<img src="images/silver_swatch.png" alt="GBM0911S Silver" title=" GBM0911S Silver " width="42" height="40" />
</label>
</li>
<li class="radio-attribute">
<label for="2" class="radio-attribute">
<input type="radio" id="2" name="id[27]" value="175" onClick="change_image(this.id)">
<img src="images/blue_swatch.png" alt="GBM0911B Blue" title=" GBM0911B Blue " width="45" height="40" />
</label>
</li>
</ul>
</section>
</div>
And the javascript is as follows:
<script type="text/javascript">
<!--
var images = ["GLAMOURFRONT.jpg","GBM0911S.png"];
function preload(arrayOfImages) {
$(arrayOfImages).each(function () {
$('<img />').attr('src',this).appendTo('body').css('display','none');
});
}
preload(images);
var galleryImage = document.querySelector("#piGalImg")
var modal = document.getElementById('myModal');
var img = document.getElementById('piGal');
var modalImg = document.getElementById("piGal");
var captionText = document.getElementById("caption");
function change_image(radioID) {
var imageID = radioID;
document.getElementById("piGal").innerHTML = "<img id=\"myImg\" src=\"images/"+ images[radioID] +"\" />";
}
// Get the modal
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";
}
document.getElementById("piGal").onclick = function(){
modal.style.display = "block";
modalImg.src = "<img id=\"piGal\" src=\"images/"+ images[imageID] +"\" />";
captionText.innerHTML = this.alt;
}
document.querySelectorAll('label.radio-attribute img').forEach(function (radioClick) {
radioClick.addEventListener("click", function () {
// modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
});
});
//-->
</script>
The image rotates based on the radio selection without issue, the modal though shows the radio image name verses the image from the image array position. I use the radio ID to determine the array element (image name) to use for the modal pop up, it is this part that is not working well.
https://jsfiddle.net/8c09e9j0/
You have multiple elements on the page with the same id="piGal", so modalImg.src is trying to set the src on the first element with an id of pieGal, which is not the image element in your modal. id's must be unique. Change your modal ID to something unique to ensure you're trying to modify the correct element.
<img class="modal-content" id="piGalImg">
var modalImg = document.getElementById("piGalImg");
If your images are stored in an array store the index in a data-attribute on the image with the event listener and access the image array directly:
HTML:
<img src="https://placebear.com/10/20" data-arrayid="0" alt="GBM0911B Blue" title=" GBM0911B Blue " width="45" height="40" />
JS:
images = [
'400/400.jpg',
'400/500.jpg'
]
modalImg.src = 'https://placebear.com/' + images[this.dataset.arrayid];
Try this pen:
https://codepen.io/benjaminwfox/pen/yPNEWG
See this fiddle. This is my watch trailer button, the first button is working perfectly fine. But the second watch trailer button is not working.
What is the problem with it?
Here is my code:
HTML:
<button id="watchbutton">Watch Trailer ►</button>
<br>
<button id="watchbutton">Watch Trailer ►</button>
<div id="close">
<div id="trailerdivbox">
<div class="videoWrapper">
<iframe id="video" class="trailervideo" width="560" height="315" data-
src="https://www.youtube.com/embed/TDwJDRbSYbw" src="about:blank" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
CSS:
/* Watch Trailer Button CSS */
#watchbutton {
background-color: #f2f2f2;
color: red;
font-weight: 600;
border: none;
/* This one removes the border of button */
padding: 10px 12px;
}
#watchbutton:hover {
background-color: #e2e2e2;
cursor: pointer;
}
#trailerdivbox {
display: none;
width: 100%;
height: 100%;
position: fixed;
top:0%;
overflow: auto; /* Enable Scrolling */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
max-width: 560px;
max-height: 315px;
width: 95%;
height: 95%;
left: 0;
right: 0;
margin: auto;
}
Javascript
<script>
// Get the modal
var modal = document.getElementById('trailerdivbox');
// Get the button that opens the modal
var btn = document.getElementById("watchbutton");
function playVideo() {
var video = document.getElementById('video');
var src = video.dataset.src;
video.src = src + '?autoplay=1';
}
function resetVideo() {
var video = document.getElementById('video');
var src = video.src.replace('?autoplay=1', '');
video.src = '';
video.src = src;
}
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
playVideo();
}
var trailerbox = document.getElementById("close");
trailerbox.onclick = function() {
modal.style.display = "none";
resetVideo();
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
resetVideo();
}
}
</script>
you can not have same ids. change id to something else.
<button id="watchbutton">Watch Trailer ►</button>
<br>
<button id="watchbutton2">Watch Trailer ►</button>
Try with classname instead of id .Because id is unique for whole html .For selector use with querySelectorAll()
Updated
declare src of the video in the data-src of button .Then pass the argument with playvideo(this.dataset.src) function .
// Get the modal
var modal = document.getElementById('trailerdivbox');
// Get the button that opens the modal
var btn = document.querySelectorAll('.watchbutton')
function playVideo(src) {
var video = document.getElementById('video');
video.src = 'https://www.youtube.com/embed/'+src + '?autoplay=1'; //add with iframe
}
function resetVideo() {
var video = document.getElementById('video');
var src = video.src.replace('?autoplay=1', '');
video.src = '';
video.src = src;
}
// When the user clicks the button, open the modal
btn.forEach(function(a){
a.onclick = function() {
modal.style.display = "block";
playVideo(this.dataset.src); // pass the src
}
})
var trailerbox = document.getElementById("close");
trailerbox.onclick = function() {
modal.style.display = "none";
resetVideo();
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
resetVideo();
}
}
/* Watch Trailer Button CSS */
#watchbutton {
background-color: #f2f2f2;
color: red;
font-weight: 600;
border: none;
/* This one removes the border of button */
padding: 10px 12px;
}
#watchbutton:hover {
background-color: #e2e2e2;
cursor: pointer;
}
#trailerdivbox {
display: none;
width: 100%;
height: 100%;
position: fixed;
overflow: auto;
/* Enable Scrolling */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
max-width: 560px;
max-height: 315px;
width: 95%;
height: 95%;
left: 0;
right: 0;
margin: auto;
}
<button id="watchbutton" class="watchbutton" data-src="TDwJDRbSYbw">Watch Trailer ►</button>
<br>
<button id="watchbutton" class="watchbutton" data-src="TDwJDRbSYbr">Watch Trailer ►</button>
<div id="close">
<div id="trailerdivbox">
<div class="videoWrapper">
<iframe id="video" class="trailervideo" width="560" height="315" data-src="https://www.youtube.com/embed/TDwJDRbSYbw" src="about:blank" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<br>
You're almost there.
After you fix the issue with the double ids - mentioned by Frits, prasad & others - you still need to tell playVideo to play a different video, depending on which button you push.
Here's how you can fix your code to achieve the desired result :
// Get the modal
var modal = document.getElementById('trailerdivbox');
// Get the button that opens the modal
var btn1 = document.getElementById("TDwJDRbSYbw");
var btn2 = document.getElementById("6H_0aem12_I");
function playVideo(id) {
var video = document.getElementById('video');
var src = video.dataset.src + id;
video.src = src + '?autoplay=1';
}
function resetVideo() {
var video = document.getElementById('video');
var src = video.src.replace('?autoplay=1', '');
video.src = '';
video.src = src;
}
// When the user clicks the button, open the modal
btn1.onclick = function(e) {
modal.style.display = "block";
playVideo(this.id);
}
btn2.onclick = btn1.onclick;
var trailerbox = document.getElementById("close");
trailerbox.onclick = function() {
modal.style.display = "none";
resetVideo();
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
resetVideo();
}
}
/* Watch Trailer Button CSS */
.btn {
background-color: #f2f2f2;
color: red;
font-weight: 600;
border: none;
/* This one removes the border of button */
padding: 10px 12px;
}
.btn:hover {
background-color: #e2e2e2;
cursor: pointer;
}
#trailerdivbox {
display: none;
width: 100%;
height: 100%;
position: fixed;
overflow: auto;
/* Enable Scrolling */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
max-width: 560px;
max-height: 315px;
width: 95%;
height: 95%;
left: 0;
right: 0;
margin: auto;
}
<button class="btn" id="TDwJDRbSYbw">Watch Trailer ►</button>
<br>
<button class="btn" id="6H_0aem12_I">Watch Trailer ►</button>
<div id="close">
<div id="trailerdivbox">
<div class="videoWrapper">
<iframe id="video" class="trailervideo" width="560" height="315" data-src="https://www.youtube.com/embed/" src="about:blank" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<br>
See also this JSFiddle demo
First, It is not good practice to use identical ids.
<button id="watchbutton">Watch Trailer ►</button>
And when you use
var btn = document.getElementById("watchbutton");
You get only one button (the first), You should use something like:
<button id="watchbutton" class="watchButton">Watch Trailer ►</button>
<br>
<button id="watchbutton2" class="watchButton" >Watch Trailer ►</button>
And get them with:
var buttons = document.getElementsByClassName("watchButton");
I have two images to use for instance rose.jpg and mary.jpg. I need to pop up mary.jpg once I click to rose.jpg. I am trying to use modal in here. I know how to do it if the pop image is same as the image to be clicked but in this case my bigger image has a completely different name. I have seen multiple other examples which describes about popup window or form but not image in itself while clicking the image.
Following is what I have done so far. It works only for same image:
<html>
<head>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
.modal {
display: none;
position: fixed;
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.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;
}
</style>
</head>
<body>
<img id="myImg" src="rose.jpg" alt="flower" >
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" src="mary.jpg" alt="mary" id="img01">
<div id="caption"></div>
</div>
<script>
var modal = document.getElementById('myModal');
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;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
In this example modalImg.src = this.src; is what it is getting the original image to pop up instead of the other image. I need to display mary.jpg which I had given source as <img class="modal-content" src="mary.jpg" alt="mary" id="img01">. Please help.
In your onclick function you are setting the img src as equal to this.src
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
By doing so, in this use case, every time you click the image you are setting the img src to rose.jpg.
If you remove modalImg.src = this.src; then your modal should just simply 'open', by displaying block onclick, and displaying your HTML, which already defines the img src.
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" src="mary.jpg" alt="mary" id="img01">
<div id="caption"></div>
</div>
on w3schools site i found a tutorial for a dialog box/popup window. I would like to implement this with more images.
my code:
<img onclick="openModal()" src="low/dn-64.jpg" data-highres="high/dn-64.jpg" width="300" height="400">
<!-- Modal -->
<div id="myModal" class="modal">
<!-- Close button -->
<span class="close">×</span>
<!-- Modal content -->
<img class="modal-content" id="modal-image">
</div>
<script type="text/javascript">
var modal = document.getElementById('myModal');
var img = document.getElementById('myImg');
var modalImg = document.getElementById('modal-image');
function openModal() {
modal.style.display = "block";
modalImg.src = this.getAttribute("data-highres");
}
/*img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.getAttribute("data-highres");
}*/
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function() {
if(event.target == modal) {
modal.style.display = "none";
}
}
</script>
css:
#myImg {
cursor: zoom-in;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 60px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.8);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 50px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbbbbb;
text-decoration: none;
cursor: pointer;
}
the code is working for one image. so i added a function openModal() and uncomment some part of the previous code. But now this isn't working even for one image it opens the modal without the image.
thank you for your help
The error in the console is Uncaught ReferenceError: openModal is not defined. This means the function was run at a scope in which it was not defined. an easy fix would be to define it in a global scope, like window:
window.openModal = function(img) {
modal.style.display = "block";
modalImg.src = img.getAttribute("data-highres");
}
and then
<img onclick="openModal(this);" src="low/dn-64.jpg" data-highres="high/dn-64.jpg" width="300" height="400">
However, you should not use not use onclick anymore (w3schools is a bit old now) like this answer says.
What you want to do is attach an event listener to your images. Loop through all of your images and use the addEventListener('click' ...) to listen when they were clicked.
var images = document.querySelectorAll('img');
for(var i=0, len = images.length; i < len; i++){
images[i].addEventListener('click', openModal);
}