Ребят проблема не знаю в чем написал код для галереи , вроде все правильно но ничего не выходит даже ошибку не выдает в консоле
function closeModal() {
var modal = document.getElementById('ModalOpen');
modal.style.display = 'none';
}
function showModal() {
var modal = document.getElementById('ModalOpen');
modal.style.display = 'block';
}
(function() {
var thumbnails = document.querySelectorAll('.gallery_img'), //target thumbnail images,
imageMain = document.querySelector('.imageMain'); //target main image
var leftArrow = document.querySelector('.arrowleft'),
rightArrow = document.querySelector('.arrowright');
var currentIndex = 0;
for (var i = 0; i < thumbnails.length; i++) {
thumbnails[i].addEventListener('click', function(evt) {
imageMain.src = evt.target.src.replace('150/100', '1000/400');
currentIndex = evt.target.id.substr(6, evt.target.id.length) - 1;
});
}
leftArrow.addEventListener('click', function(evt) {
if (currentIndex > 0) {
currentIndex--;
imageMain.src = thumbnails[currentIndex].src.replace('150/100', '1000/400');
}
});
rightArrow.addEventListener('click', function(evt) {
if (currentIndex < thumbnails.length - 1) {
currentIndex++;
imageMain.src = thumbnails[currentIndex].src.replace('150/100', '1000/400');
}
});
})();
.Window {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 99999;
transition: opacity 400ms ease-in;
display: none;
pointer-events: none;
}
.Window:target {
display: block;
pointer-events: auto;
}
.Window>div {
width: 1030px;
height: 640px;
position: relative;
margin: 10px auto;
background: url("images/background.jpg") no-repeat;
background-position: 74px -50px;
background-size: 925px 640px;
box-shadow: 0px 0px 20px 2px;
background-color: white;
}
.share {
position: absolute;
right-12px;
top: 52px;
left: 992px;
}
.fbshare {
position: absolute;
right: -12px;
top: 509px;
left: 992px;
}
.twshare {
position: absolute;
right: -12px;
top: 546px;
left: 992px;
}
a {
float: right;
text-decoration: none;
color: white;
}
.leftcol {
width: 200px;
height: 590px;
float: left;
background: url("images/lcolb.jpg") no-repeat;
}
.rigcol {
width: 45px;
height: 590px;
float: right;
background-color: white;
}
.footer {
position: fixed;
top: 600px;
background-color: black;
width: 1030px;
height: 50px;
}
.learn {
position: relative;
top: -58px;
width: 260px;
height: 50px;
background-color: #0066cc;
float: right;
}
.learnT {
font-size: 20px;
margin-right: 50px;
}
.learn:hover {
background: #3399FF;
}
.learn:hover a {
color: #fff
}
hr {
background-color: black;
position: fixed;
top: 462px;
width: 40px;
height: 1px;
margin-left: 3px;
border: 0;
}
.Tfind {
margin-top: 380px;
font-size: 8px;
font-weight: bold;
text-align: center;
}
.Thorizont {
margin: 0;
position: relative;
top: -20px;
left: 211px;
color: white;
}
.hr2 {
width: 1px;
height: 30px;
background-color: white;
position: absolute;
margin-left: 200px;
top: 0px;
}
.hr3 {
width: 170px;
position: absolute;
top: 226px;
left: 5px;
}
.img1 {
margin-left: 86px;
margin-top: 10px;
}
.img1 {
margin-left: 46px;
margin-top: 12px;
}
.img2 {
margin-top: 89px;
margin-left: 15px;
}
.bgmain {
width: 785px;
height: 443px;
margin-top: 107px;
}
.button1 {
width: 732px;
height: 90px;
border: 0;
padding: 0;
}
.button2 {
width: 30px;
height: 30px;
margin-top: 7px;
margin-left: 8px;
border: 0;
padding: 0;
}
.button3 {
width: 30px;
height: 30px;
margin-left: 7px;
margin-top: 16px;
border: 0;
padding: 0;
}
.menu {
width: 200px;
height: 135px;
margin-left: 15px;
font-size: 18px;
margin-top: 22px;
}
.nav {
font: 12pt;
list-style: none;
padding: 0;
margin-top: 22px;
margin-left: 9px;
width: 190px;
height: 45px;
text-transform: uppercase;
}
.nav li a {
display: block;
width: 190px;
height: 45px;
line-height: 40px;
font-size: 12px;
background: #fff;
color: black;
cursor: pointer;
transition: all 0.6s linear;
}
.nav li a:hover {
transform: scaleY(1.2);
}
.img3 {
margin-top: 55px;
margin-left: 35px;
}
.arrowleft {
position: relative;
left: 200px;
top: 205px;
width: 3%;
float: left;
}
.arrowright {
position: relative;
top: 205px;
right: 45px;
width: 3%;
float: right;
}
.arrowleft img {
width: 100%;
}
.arrowright img {
width: 100%;
}
.arrowleft img:hover {
cursor: pointer;
width: 95%;
}
.arrowleft img:active {
width: 85%;
}
.arrowright img:hover {
cursor: pointer;
width: 95%;
}
.arrowright img:active {
width: 85%;
}
.galleryWrapper {
position: absolute;
}
.imageMain {
position: absolute;
left: 200px;
}
.imageMain img {
position: absolute;
left: 0;
}
.thumbWrapper {
margin-top: 405px;
margin-left: 15px;
}
.thumbmails {
list-style: none;
display: flex;
flex-wrap: wrap;
margin: 0;
padding-top: 37px;
padding-left: 190px;
opacity: 1;
transition: opacity 1.85s;
}
.thumbmails li {
padding: 5px;
line-height: 0;
cursor: pointer;
}
<a href="#ModalOpen" title="">
<button type="button" class="button1" id="modal_close" onclick="showModal();">
<img src="images/ban.jpg">
</button>
</a>
<div id="ModalOpen" class="Window">
<div class="content">
<div class="galleryWrapper">
<div class="imageMain">
<img src="images/fullsize/1.jpg" class="imageMain" />
</div>
<div class="arrowleft"><img src="images/left.jpg" /></div>
<div class="arrowright"><img src="images/right.jpg" /></div>
<div class="thumbWrapper">
<ul class="thumbmails">
<li><img id="thumb-1" class="gallery_img" src="images/thumbs/1.jpg" /></li>
<li><img id="thumb-2" class="gallery_img" src="images/thumbs/2.jpg" /></li>
<li><img id="thumb-3" class="gallery_img" src="images/thumbs/3.jpg" /></li>
<li><img id="thumb-4" class="gallery_img" src="images/thumbs/4.jpg" /></li>
<li><img id="thumb-5" class="gallery_img" src="images/thumbs/5.jpg" /></li>
<li><img id="thumb-6" class="gallery_img" src="images/thumbs/6.jpg" /></li>
<li><img id="thumb-7" class="gallery_img" src="images/thumbs/7.jpg" /></li>
<li><img id="thumb-8" class="gallery_img" src="images/thumbs/8.jpg" /></li>
<li><img id="thumb-9" class="gallery_img" src="images/thumbs/9.jpg" /></li>
<li><img id="thumb-10" class="gallery_img" src="images/thumbs/10.jpg" /></li>
<li><img id="thumb-11" class="gallery_img" src="images/thumbs/11.jpg" /></li>
<li><img id="thumb-12" class="gallery_img" src="images/thumbs/12.jpg" /></li>
<li><img id="thumb-13" class="gallery_img" src="images/thumbs/13.jpg" /></li>
<li><img id="thumb-14" class="gallery_img" src="images/thumbs/14.jpg" /></li>
</ul>
</div>
</div>
<div class="leftcol">
<img class="img1" src="images/ps4.jpg">
<img class="img2" src="images/logo.jpg">
<div class="tabs">
<ul class="nav">
<li>
<a href="#tab1" class="active">Video</a>
</li>
<li>
<a href="#tab2">Horizon Zero Dawn</a>
</br>
</li>
<li>
<a href="#tab3">Through Aloy's Eyes</a>
</li>
</ul>
</div>
<div id="tab-1">
</div>
<div id="tab-2">
</div>
<div id="tab-3">
</div>
<img src="images/esrb.jpg" class="img3" />
</div>
<div class="rigcol">
<button type="button" class="button2" id="modal_close" onclick="closeModal();">
<img src="images/x.jpg">
</button>
<button type="button" class="button3">
<img src="images/share.jpg">
</button>
<hr>
<p class="Tfind"> Find <br/>US ON</p>
</hr>
<a href="https://www.facebook.com" class="fbshare">
<img src="images/fb.jpg">
</a>
<a href="https://www.twitter.com" class="twshare">
<img src="images/twit.jpg">
</a>
</div>
<div class="footer">
<img src="images/i.jpg" class="img1">
<hr class="hr2">
<p class="Thorizont">Click on Horizon Zero Dawn to see the next era of mankind</p>
<div class="learn">
<p class="learnT"><a href="#learnmore">Learn More <strong> > </strong></a></p>
</div>
</div>
</div>
</div>