We Keep Coding

Stacked image slide

Hello I'm using slick slide to make the slides in a list of images on my page, but when loading the screen the images appear stacked and then they go to the slide format, is there any solution to only display them when they are already in slides ?
Html:
<div class="conteiner">
<div class="row-fluid">
<div class="titulo-vitrine-marcas">
<span>{{ section.settings.title }}</span>
</div>
<div class="marcas">
{% for block in section.blocks %}
<li class="marca">
{% if block.settings.collection != blank %}
{% if block.settings.image != blank %}
{%- capture image_size -%}{{ section.settings.image_max_width }}x{%- endcapture -%}
<img class="marca-imagem" style="max-width: {{ section.settings.image_max_width }}px;" src="{{ block.settings.image | img_url: image_size, scale: 2 }}" width="{{ block.settings.image.width }}" height="{{ block.settings.image.height }}" onclick="location.href = '{{ block.settings.collection.url }}';">
{% endif %}
{% endif %}
</li>
{% endfor %}
</div>
</div>
</div>
JS:
$('.marcas').slick({
infinite: true,
dots: false,
arrows: true,
prevArrow:
"<div class=\"slick-prev slick-arrow\" style=\"display: block;\"><svg enable-background=\"new 0 0 330.002 330.002\" version=\"1.1\" viewBox=\"0 0 330.002 330.002\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m233.25 306l-105.75-141 105.75-141c4.971-6.628 3.627-16.03-3-21-6.627-4.971-16.03-3.626-21 3l-112.5 150c-4 5.333-4 12.667 0 18l112.5 150c2.947 3.93 7.451 6.001 12.012 6.001 3.131 0 6.29-0.978 8.988-3.001 6.628-4.971 7.971-14.373 3-21z\"></path></svg></div>",
nextArrow:
"<div class=\"slick-next slick-arrow\" style=\"display: block;\"><svg enable-background=\"new 0 0 330.002 330.002\" version=\"1.1\" viewBox=\"0 0 330.002 330.002\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m233.25 156l-112.5-150c-4.972-6.628-14.372-7.97-21-3-6.628 4.971-7.971 14.373-3 21l105.75 141-105.75 141c-4.971 6.627-3.627 16.03 3 21 2.698 2.024 5.856 3.001 8.988 3.001 4.561 0 9.065-2.072 12.012-6.001l112.5-150c4-5.333 4-12.667 0-18z\"></path></svg></div>",
slidesToShow: 4,
slidesToScroll: 1,
responsive: [
{
breakpoint: 980,
settings: {
autoplay: false,
autoplaySpeed: 2000,
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
arrows: true,
prevArrow:
"<div\x20class=\x22slick-prev\x22><svg\x20width=\x22451.85px\x22\x20height=\x22451.85px\x22\x20enable-background=\x22new\x200\x200\x20451.847\x20451.847\x22\x20version=\x221.1\x22\x20viewBox=\x220\x200\x20451.847\x20451.847\x22\x20xml:space=\x22preserve\x22\x20xmlns=\x22http://www.w3.org/2000/svg\x22><path\x20d=\x22m97.141\x20225.92c0-8.095\x203.091-16.192\x209.259-22.366l194.29-194.28c12.359-12.359\x2032.397-12.359\x2044.751\x200\x2012.354\x2012.354\x2012.354\x2032.388\x200\x2044.748l-171.92\x20171.9\x20171.9\x20171.91c12.354\x2012.354\x2012.354\x2032.391\x200\x2044.744-12.354\x2012.365-32.386\x2012.365-44.745\x200l-194.29-194.28c-6.167-6.177-9.252-14.274-9.252-22.372z\x22/></svg></div>",
nextArrow:
"<div\x20class=\x22slick-next\x22><svg\x20width=\x22451.85px\x22\x20height=\x22451.85px\x22\x20enable-background=\x22new\x200\x200\x20451.846\x20451.847\x22\x20version=\x221.1\x22\x20viewBox=\x220\x200\x20451.846\x20451.847\x22\x20xml:space=\x22preserve\x22\x20xmlns=\x22http://www.w3.org/2000/svg\x22><path\x20d=\x22m345.44\x20248.29l-194.29\x20194.28c-12.359\x2012.365-32.397\x2012.365-44.75\x200-12.354-12.354-12.354-32.391\x200-44.744l171.91-171.91-171.91-171.9c-12.354-12.359-12.354-32.394\x200-44.748\x2012.354-12.359\x2032.391-12.359\x2044.75\x200l194.29\x20194.28c6.177\x206.18\x209.262\x2014.271\x209.262\x2022.366\x200\x208.099-3.091\x2016.196-9.267\x2022.373z\x22/></svg></div>",
}
}
]
});
CSS:
.vitrine-marcas .conteiner {
padding-bottom: 30px !important;
max-width: 1380px;
width: 100%;
margin: 0 auto;
}
.vitrine-marcas .marcas li {
height: 100%;
opacity: 1 !important;
display: flex;
align-items: center;
justify-content: center;
}
.titulo-vitrine-marcas {
margin-bottom: 20px;
display: flex;
justify-content: center;
position: relative;
}
.titulo-vitrine-marcas span {
font-size: 25px;
font-weight: 500;
}
.vitrine-marcas .marcas .slick-prev {
left: -25px;
}
.vitrine-marcas .marcas .slick-next {
right: -25px;
}
.vitrine-marcas .marcas .slick-arrow {
cursor: pointer;
position: absolute;
z-index: 1;
}
.vitrine-marcas .marcas .slick-arrow svg {
width: 33px;
height: 33px;
display: flex;
}
#media only screen and (max-width: 1024px) {
.titulo-vitrine-marcas span {
font-size: 20px;
}
.vitrine-marcas .marcas .slick-prev {
left: -5px;
margin-left: 20px;
}
.vitrine-marcas .marcas .slick-next {
right: -5px !important;
margin-right: 20px;
}
.vitrine-marcas .marcas .slick-arrow svg {
width: 25px;
height: 25px;
}
}
.vitrine-marcas .slick-slider {
display: flex !important;
align-items: center !important;
}
.slick-track {
display: flex !important;
}
.slick-slide {
height: inherit !important;
display: flex !important;
justify-content: center;
align-items: center;
}
When starting the page it looks like this:
After:

Issue's with Modal images becoming background image

I'm fairly new to this all together so if there is an answer already out there, I apologize.I'm having major issues with the modal images on my page. For some reason when the modal image is launched it ends up being in the background of the site and the text and other content ends up being on top.
Here is the link to view: http://demottdrapery.com/project/expirement/
Below is my current coding for this page.
<table class="dylan">
<tr>
<div class="goku">
<td class="talks">
<img id="myImg" src="http://demottdrapery.com/wp-
content/uploads/2017/12/MASTER-BED-1-
1.jpg"style="width:100%;height:auto;"class="visual">
</td>
</div>
<div class="goku">
<td class="talks">
<img id="myImg" src="http://demottdrapery.com/wp-
content/uploads/2017/12/DINING-ROOM-1-1.jpg"style="width:100%;
height:auto;"class="visual">
</td>
</div>
<div id="myModal" class="modal">
<img class="modal-content" id="img01">
</div>
</tr>
</table>
<script>
// create references to the modal...
var modal = document.getElementById('myModal');
// to all images
var images = document.getElementsByClassName('visual');
// the image in the modal
var modalImg = document.getElementById("img01");
// 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) {
console.log(evt);
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<style>
#myImg {
cursor: pointer;
transition: 0.3s;
}
.modal {
display: none;
/* Hidden by default */
position: fixed ;
/* Stay in place */
z-index:100;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: hidden;
/* 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;
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
#media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
}
.dylan{
margin: 50px auto 0;
width:100%;
border-spacing:20px 0;
}
.talks{
position: relative;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
padding-top:45%;
}
.visual{
position:absolute;
top: 0;
left:0;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.goku{
position: relative;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
}
}

Any z-index applied to elements within that parent element will only apply to other elements within that parent. All the elements within the parent will be stacked accordingly, then that entire element will be put behind the text as specified by its stack order.
Move the modal div above the rest of the page content. You may need to rewrite your js after this I am not great at JS.
<div id="myModal" class="modal">
<img class="modal-content" id="img01">
</div>
<div data-vc-full-width="true" data-vc-full-width-init="true" data-vc-stretch-content="true" class="vc_row wpb_row vc_row-fluid vc_custom_1474396432392 vc_row-has-fill vc_row-o-equal-height vc_row-o-content-middle vc_row-flex" style="position: relative; left: -15px; box-sizing: border-box; width: 1116px;">
...
<table class="dylan">
<tr>
<div class="goku">
<td class="talks">
<img id="myImg" src="http://demottdrapery.com/wp-content/uploads/2017/12/MASTER-BED-1-1.jpg" style="width:100%;height:auto;"class="visual">
</td>
</div>
<div class="goku">
<td class="talks">
<img id="myImg" src="http://demottdrapery.com/wp-content/uploads/2017/12/DINING-ROOM-1-1.jpg" style="width:100%; height:auto;"class="visual">
</td>
</div>
</tr>
</table>

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();
});

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.

Popup Box Gallery with Manual Slideshow

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.