Popup Box Gallery with Manual Slideshow - javascript

Can you help me with this code? This code opens a gallery popup when someone clicks on an image. It should open different galleries if someone clicks in different images but it doesn't... Can you correct my code so that it will work for different galleries? Thank you!
// Get the image and insert it inside the modal
function imgg(id){
var modal = document.getElementById(id);
var modalImg = document.getElementById('mySlides');
modal.style.display = "block";
modalImg.src = this.src;
}
// When the user clicks on <span> (x), close the modal
function close() {
modal.style.display = "none";
}
// Sliseshow
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
#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) */
.mySlides {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
box-shadow: 0px 0px 50px -6px #000;
}
#-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){
.mySlides {
width: 100%;
}
}
.w3-btn-floating {
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="test.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<img id="myImg" onClick="imgg('myModal')" src="http://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2013/07/31/10/A-striped-field-mouse-(Apod.jpg" alt="" width="300" height="200">
<img id="myImg" onClick="imgg('myModal1')"src="http://therivardreport.com/wp-content/uploads/2013/05/Daniel-Chaffin.jpg" alt="" width="300" height="200">
<!-- The Modal -->
<div id="myModal" class="modal">
<span onclick="close()" class="close">×</span>
<img class="mySlides" id="img_modal" src="http://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2013/07/31/10/A-striped-field-mouse-(Apod.jpg" >
<img class="mySlides" id="img_modal" src="http://interrete.org/wp-content/uploads/2014/04/Miniature-World-of-Insects6.png" >
<img class="mySlides" id="img_modal" src="http://www.isharearena.com/wp-content/uploads/2012/12/wallpaper-281049.jpg?d54e04" >
<img class="mySlides" id="img_modal" src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" >
<a class="w3-btn-floating" style="position:absolute;top:45%;left:280px;" onclick="plusDivs(-1)">❮</a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:280px;" onclick="plusDivs(1)">❯</a>
</div>
<div id="myModal1" class="modal">
<span onclick="close()" class="close">×</span>
<img class="mySlides" id="img_modal" src="http://therivardreport.com/wp-content/uploads/2013/05/Daniel-Chaffin.jpg" >
<img class="mySlides" id="img_modal" src="http://www.catnipcamera.com/wp-content/uploads/2012/03/DSCN98911.jpg" >
<img class="mySlides" id="img_modal" src="http://www.desibucket.com/db2/01/26021/26021.jpg" >
<a class="w3-btn-floating" style="position:absolute;top:45%;left:280px;" onclick="plusDivs(-1)">❮</a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:280px;" onclick="plusDivs(1)">❯</a>
</div>
</body>
</html>

The close button doesn't work beacuse the variabile "modal" is declared into the function 'imgg' so the function 'close' can't use it.

Related

This image slider starts with nothing why?

So Ii made an image slider for a school project and this is happening when I start up the page or when I reload it. The page only shows the arrows and the dots.
Screenshot of the problem
Here is my code:
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "block";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += "active";
}
margin-top: -8px;
margin-left: -8px;
}
.header {
margin-top: 25px;
}
.headerimg {
width: 2047px;
margin-bottom: -168px;
}
.toDHL {
color: red;
margin-left: 81px;
}
.menu-bar {
color: black;
text-decoration: none;
font-size: 35px;
font-family: Arial;
font-weight: bold;
}
.linkimg {
width: 537px;
height: 150px;
margin-top: -89px;
margin-left: 17px;
}
#toHome {
margin-left: 50px;
border-bottom: 3px solid red;
}
#toRooster {
margin-left: 200px;
}
#toSmoelenboek {
margin-left: 200px;
}
#toSuccesverhaal {
margin-left: 200px;
position: absolute;
}
.slideshow-container {
float: left;
}
* {
box-sizing: border-box
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin-top: 60px;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: black;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
margin-right: 0px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 50px;
padding: 8px 5px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
text-shadow: 2px 2px #000000;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
margin-top: 660px;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
.Succesverhalen_Sidebar {
float: right;
margin-left: 15px;
margin-top: 30px;
}
.Succesverhalen_Sidebar_text {
position: absolute;
margin-left: 1900px;
margin-top: 91px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/home.css">
<script src="JavaScript/home.js"></script>
<title>DHL Nieuws</title>
</head>
<header>
<img src="images/HeaderDHL.png" alt="header" class="headerimg">
<img src="images/banner-wave-3.svg" class="linkimg">
<meta name="viewport" content="width=device-width, initial-scale=1">
</header>
<body>
<div class="header">
Home
Rooster
Smoelenboek
Succesverhalen
</div>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<img src="images/Sinterklaas_news.jpg" style="width:100%">
<div class="text">Sinterklaas is weer in het land!</div>
</div>
<div class="mySlides fade">
<img src="images/BlackFriday_news.jpg" style="width:100%">
<div class="text">Het is binnen kort Black Friday!</div>
</div>
<div class="mySlides fade">
<img src="images/kerst.jpg" style="width:100%">
<div class="text">Santa Claus is coming to town!</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div>
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<div class="Succesverhalen_Sidebar">
<img src="../images/Succesverhalen_Sidebar.png" style="margin-right:-279px;">
</div>
<div class="Succesverhalen_Sidebar_text">
<p>.........................<br>.........................<br>.........................
<br>.........................<br>......Lees verder</p>
<br>
<br>
<br>
<p>.........................<br>.........................<br>.........................
<br>.........................<br>......Lees verder</p>
<br>
<br>
<p>.........................<br>.........................<br>.........................
<br>.........................<br>......Lees verder</p>
<br>
<br>
<p>.........................<br>.........................<br>.........................
<br>.........................<br>......Lees verder</p>
<br>
<br>
<p>.........................<br>.........................<br>.........................
<br>.........................<br>......Lees verder</p>
<br>
<br>
<br>
<p>.........................<br>.........................<br>.........................
<br>.........................<br>......Lees verder</p>
<br>
<br>
<p>.........................<br>.........................<br>.........................
<br>.........................<br>......Lees verder</p>
</div>
</body>
</html>
I would like to receive an answer really fast because the deadline for the project ends in a few days. Thanks.
you just have to define slideIndex like var slideIndex=0; or =1 so it wil be var slideIndex = 1;
showSlides(slideIndex); and the javascript is not loading correctly because its in the head so the put the script tag at the bottom of body
There are some semantic issues in your code.
Taking for granted that that is your whole javascript code I see this problems:
showSlides(slideIndex); // --> Here you are calling showSlides function with slideIndex that is undefined,
// maybe you are missing something like "var slideIndex = 0" or similar
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1 // --> here slideIndex is not yet declared, is it global?
// if it's not the case you have to declare it on top, like after "var i;" declaration.
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "block";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += "active";
}
fix these, give it a try and let me know
Last but not least if you want to load your javascript code inside the head tag you have to wrap it in a function that fires only after the DOM is fully loaded,
something like this:
document.addEventListener("DOMContentLoaded", function(event) {
//your code
});
Or eventually you can put your script tag immediately before the body closing tag

object.onclick is not working

I've been searching through forums for the past few hours and can't seem to figure out why I my onclick method isn't working properly.
For context, I'm trying to get this code to output something in the console when a button is clicked.
document.getElementsByClassName("next").onclick = function test() {
console.log("hello");
}
Here are my next/previous buttons:
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
The code I'm using was referenced from w3schools, although I modified it slightly. Here's the entirety of it:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body onload="getInformation(), showSlides()">
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides">
<div class="numbertext">1 / 5</div>
<img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides">
<div class="numbertext">2 / 5</div>
<img src="https://images.pexels.com/photos/730896/pexels-photo-730896.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides">
<div class="numbertext">3 / 5</div>
<img src="https://images.pexels.com/photos/57416/cat-sweet-kitty-animals-57416.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides">
<div class="numbertext">4 / 5</div>
<img src="https://images.pexels.com/photos/569170/pexels-photo-569170.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides">
<div class="numbertext">5 / 5</div>
<img src="https://images.pexels.com/photos/271955/pexels-photo-271955.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
style="width:100%">
<div class="text"></div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
</body>
</html>
CSS
html {
background-color: black;
}
body {
padding-top: 50px;
}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
Javascript
var slideIndex = 1;
showSlides(slideIndex);
function getInformation() {
console.log(document.getElementsByClassName("prev")[0].innerHTML);
console.log(document.getElementsByClassName("next")[0].innerHTML);
}
function updateInformation() {
console.log("The current slide is: " + slideIndex);
// console.log("Value in array is: " + [slideIndex-1]);
}
document.getElementsByClassName("next") = function test() {
console.log("hello");
}
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
updateInformation();
}
If anyone could help I would greatly appreciate it. Let me know if you need any more information.
The getElementsBy* methods return HTMLCollections, which can be difficult to work with - and also, they're collections, not individual elements, so you'd have to select an individual element from it first before attaching a listener to the element. Consider using querySelectorAll instead, which returns a static NodeList - unlike an HTMLCollection, it can be iterated over directly, it won't change while it's being iterated over, and it's much more flexible.
Or if you're only selecting a single element, use querySelector instead:
document.querySelector('.next').addEventListener('click', function test() {
console.log("hello");
});
Avoid inline handlers (which are as bad as eval) and onclick, which restricts you to one listener of a type per element - use addEventListener instead.

switching getElementById to ClassName for creating popup does not work

I'm probably going to get spanked for asking this but all the posts on this site are too technical for my meager knowledge of js. I found code to create a popup of an image that I like, but since it uses getElementById it only works for the first image. I tried switching to getElementsByClassName and made the global changes in the css and html using . not # etc., but this doesn't permit the additional images to pop up. I did consult other posts on this site such as "How to switch a getElementById to getElementsByClassName" which was not clarifying for me since the answer advises to make a switch to code using getElementsByClassName even though the post's title references switching from getElementById. Other posts were opaque as to how to update or edit the js to get what I need. I appreciate any guidance.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://use.typekit.net/qkv6kzb.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<script src="https://use.typekit.net/qkv6kzb.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<meta charset="UTF-8">
<title>Barton's website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<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 */
}
/* 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%;
}
}
.gallery {
width: auto;
height: auto;
display: flex;
justify-content: center;
align-items: center;
background-color: ;
border: 2px black solid;
}
.photo {
border: 20px red solid;
padding: 20px;
}
.photo img {
padding: 50px;
padding-bottom: 25px;
}
</style>
</head>
<body>
<section class="gallery">
<table class="photo" width= height=>
<tr>
<td><img id="myImg" class="photobox" src="http://www.bartonlewisfilm.com/img_262-109.jpg" alt="262-109, 67th Ave., Queens Boulevard Line" width="256" height="171" />
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div></td>
<td><img id="myImg" class="photobox" src="http://www.bartonlewisfilm.com/img_262-197.jpg" alt="262-197, 67th Ave., Queens Boulevard Line" width="256" height="171" />
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div></td>
<td><img id="myImg" class="photobox" src="http://www.bartonlewisfilm.com/img_287-153.jpg" alt="287-153, Flushing Ave., IND Crosstown Line" width="256" height="171" />
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div></td>
</tr>
</table>
</section>
<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>
This code also will solve your problem,
var modal = document.getElementById('myModal');
var imageArray = document.getElementsByClassName("photobox");
for(var i=0;i<imageArray.length;i++){
var img = imageArray[i];
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;
}
}
You don't need to have multiple modal html codes, only one following content is enough,
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
Using only JavaScript:
var images = document.getElementsByClassName("photobox");
var modal = document.getElementById('myModal');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
var clickFn = function() {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
};
for (var i = 0; i < images.length; i++) {
images[i].onclick = clickFn;
}
// 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";
};
Using jQuery:
$("img.photobox").click(function() {
$("#myModal").show();
$("#img01").attr( src, this.src );
$("#caption").html(this.alt);
});
$("span.close").click(function() {
$("#myModal").hide();
});

How to create a grid of modals images?

I'm a creating a website that features a grid of images. I want each image to expand into a modal when clicked. I've gotten it to work with one image but I have to create a new modal , new myImg and new script for each image. Is there anyway I can just have one modal and one myImg and write a script to make it work generally for each image so that I don't have to create a new modal and myImg for each image as that will quickly become ridiculously long.
Example of Grid:
Source Code:
<!DOCTYPE html>
<html>
<?php
$myfile = fopen("header.html", "r") or die("Unable to open file!");
echo fread($myfile,filesize("header.html"));
fclose($myfile);
?>
<style>
.img {
font-size: 0;
}
a1 {
font-size: 16px;
display: inline-block;
margin-bottom: 8px;
width: calc(50% - 4px);
margin-right: 8px;
}
a1:nth-of-type(2n) {
margin-right: 0;
}
#media screen and (min-width: 50em) {
a1 {
width: calc(25% - 6px);
}
a1:nth-of-type(2n) {
margin-right: 8px;
}
a1:nth-of-type(4n) {
margin-right: 0;
}
}
img {
border: none;
max-width: 100%;
height: auto;
display: block;
background: #ccc;
transition: transform .2s ease-in-out;
}
figure {
margin: 0;
overflow: hidden;
}
/* 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;
}
/* 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%;
}
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
#myImg2 {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg2:hover {opacity: 0.7;}
</style>
<body>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<div id="myModal2" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img02">
<div id="caption"></div>
</div>
<div class="img">
<a1 href="abe_lincoln_riding_a_grizzly.png">
<figure>
<img id="myImg" src="abe_lincoln_riding_a_grizzly.png" alt="">
</figure>
</a1>
<a1 href="abe_lincoln_riding_a_grizzly.png">
<figure>
<img id="myImg2" src="abe_lincoln_riding_a_grizzly.png" alt="">
</figure>
</a1>
<a1 href="abe_lincoln_riding_a_grizzly.png">
<figure>
<img src="abe_lincoln_riding_a_grizzly.png" alt="">
</figure>
</a1>
<a1 href="abe_lincoln_riding_a_grizzly.png">
<figure>
<img src="abe_lincoln_riding_a_grizzly.png" alt="">
</figure>
</a1>
<a1 href="abe_lincoln_riding_a_grizzly.png">
<figure>
<img src="abe_lincoln_riding_a_grizzly.png" alt="">
</figure>
</a1>
<a1 href="abe_lincoln_riding_a_grizzly.png">
<figure>
<img src="abe_lincoln_riding_a_grizzly.png" alt="">
</figure>
</a1>
<a1 href="abe_lincoln_riding_a_grizzly.png">
<figure>
<img src="abe_lincoln_riding_a_grizzly.png" alt="">
</figure>
</a1>
<a1 href="abe_lincoln_riding_a_grizzly.png">
<figure>
<img src="abe_lincoln_riding_a_grizzly.png" alt="">
</figure>
</a1>
<a1 href="abe_lincoln_riding_a_grizzly.png">
<figure>
<img src="abe_lincoln_riding_a_grizzly.png" alt="">
</figure>
</a1>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal2');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg2');
var modalImg = document.getElementById("img02");
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>
// 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>
Use Jquery to get id and info of clicked img and make function to create modal with id and info parameters and pass id and info of clicked img to function then add them to vars ex:
var modalImg = document.getElementById("img" + imgIdNumber);
etc...
so it will be dynamic.

Auto focus on Modal View

What I want to accomplish is auto focus on the modal view. To explain it a bit further. I want it so that when I click on my image on my web page and it opens up the modal view it should automatically focus on the modal allowing me to scroll up and down without me having to click on the image to bring it on focus to be able to scroll up and down using my keyboard.
http://imgur.com/a/hG0CF
http://imgur.com/a/W9Erw
http://imgur.com/a/Ijcn5
Follow up I gave links above to pictures. Hopefully its easier now. Cheers
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Advise Column
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="Modal.css">
<link href="https://fonts.googleapis.com/css?family=Quattrocento|Risque|Unkempt" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br/>
<div class="container">
<div class="row">
<div class="panel panel-info">
<div class="panel-heading"><h1 id="top-hd-01" class="page-header">PICK A SENSEI!</h1></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<figure class="col-xs-12 col-sm-12 col-md-4 col-lg-4 img-placement">
<img src="Batman.jpg" alt="BATMAN" class="advise-page-img-sizing adv-page-img-modalling" id="adv-page-img-01">
<figcaption class="img-captioning">BATMAN</figcaption>
</figure>
<figure class="col-xs-12 col-sm-12 col-md-4 col-lg-4 img-placement">
<img src="Robin.jpg" alt="ROBINS" class="advise-page-img-sizing adv-page-img-modalling" id="adv-page-img-02">
<figcaption class="img-captioning">ROBIN</figcaption>
</figure>
<figure class="col-xs-12 col-sm-12 col-md-4 col-lg-4 img-placement">
<img src="Joker.jpg" alt="JOKER" class="advise-page-img-sizing adv-page-img-modalling" id="adv-page-img-03">
<figcaption class="img-captioning">JOKER</figcaption>
</figure>
</div>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<!-- The Close Button -->
<span class="close" id="modal-cross-button" onclick="document.getElementById('myModal').style.display='none'">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="modal-adv-page-img">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
<script src="Modal.js" type="text/javascript"></script>
</body>
</html>
CSS
#top-hd-01
{
font-family: 'Unkempt', cursive;
}
.img-placement
{
display: block;
text-align: center;
/*cursor: pointer;*/
}
.advise-page-img-sizing
{
height: 250px;
width: 350px;
}
.img-captioning
{
font-size: 35px;
font-family: 'Risque', cursive;
text-align: center;
margin-top: 10px;
}
/* Style the Image Used to Trigger the Modal */
.adv-page-img-modalling {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.adv-page-img-modalling: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%;
padding: 20px;
/*height: 100%;*/
/* max-height: 450px;
max-width: 700px;*/
}
#modal-cross-button
{
position: fixed;
}
.sensei-answers, .sensei-questions, .sensei-quote
{
font-family: 'Quattrocento', serif;
}
.sensei-questions
{
font-size: 28px;
}
.sensei-answers
{
font-size: 22px;
color: darkblue;
}
.sensei-quote
{
font-size: 20px;
text-align: center;
color: #ff751b;
}
/* 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%;
}
}
JavaScript
// 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 modalImg = document.getElementById("modal-adv-page-img");
var img1 = document.getElementById("adv-page-img-01")
var img2 = document.getElementById("adv-page-img-02")
var img3 = document.getElementById("adv-page-img-03")
var captionText = document.getElementById("caption");
img1.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
img2.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
img3.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";
}
You could try this:
$("#myModal").on('shown.bs.modal', function () {
$(this).focus();
});
The autofocus attribute won't work in this case, since this will fire on page load. However, you can easily tackle this problem with some JavaScript.
document.getElementById('modal').focus(); // vanilla JS
$('#modal').focus(); // jQuery
Make sure to trigger one of these functions as soon as the modal is openend.

Categories