Галерея на javascript

389

06 апреля 2017, 17:21

Задача том, что бы он выводил на экран одну большую картинку, под ней несколько превью , которые листаются и при нажатии на них на месте большой открывается та на которую нажали, а при клике на большую можно открыть ее в настоящем размере. Как и чтоо написать в скрипте чтобы это реализовать? При запуске выведется модальное окно

function closeModal(){ 
  var modal = document.getElementById('ModalOpen'); 
  modal.style.display = 'none'; 
} 
 
function showModal(){ 
  var modal = document.getElementById('ModalOpen'); 
  modal.style.display = 'block'; 
}

.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-position: 74px -50px; 
	 background-size:923px 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:43px; 
	height:590px; 
	float:right; 
	background-color:white; 
 
} 
.footer{ 
	position:fixed; 
	top:600px; 
	background-color:black; 
	width:1030px; 
	height:50px; 
	 
 
} 
.learn{ 
	position:relative; 
	top:-59px; 
	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:3px; 
} 
.img1{ 
	margin-left:86px; 
	margin-top:10px; 
} 
.img1{ 
	margin-left:46px; 
	margin-top:12px; 
} 
.img2{ 
	margin-top:89px; 
	margin-left:13px; 
} 
	.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:133px; 
		margin-left:13px; 
		font-size:18px; 
		margin-top:22px; 
	} 
	.nav { 
		font: 12pt; 
		list-style:none; 
		padding:0; 
		margin-top:22px; 
		margin-left:9px; 
		width:190px; 
		height:43px; 
		text-transform:uppercase; 
	} 
	.tabs 
	{ 
		font: 12pt; 
		list-style:none; 
		padding:0; 
		margin-top:22px; 
		width:190px; 
		height:43px; 
		text-transform:uppercase; 
	} 
	.nav  li a { 
		display:block; 
		width:190px; 
		height:43px; 
		line-height:40px; 
		background:#fff; 
		color:#000000; 
		cursor:pointer; 
		transition: all 0.6s linear; 
		 
	} 
	.nav li a:hover{ 
  transform: scaleY(1.2); 
	} 
	.img3{ 
		margin-top:53px; 
		margin-left:33px; 
	 
	} 
	.thumb{ 
	width: 763px; 
	height:143px; 
	position:absolute; 
	top:441px; 
	overflow:hidden; 
	padding:15px 15px 15px 8px; 
	opacity:.6; 
	cursor:pointer; 
	} 
	.prieview{ 
			width:783px; 
			height:450px; 
			 
			} 
	.gallery{ 
		width:783px; 
		height:590px; 
		position:absolute; 
		left:200px; 
	 
	} 
	.gl-thumb-inner{ 
		width:99px; 
		height:56px; 
		position:relative; 
		float:left;	 
		padding-left:10px; 
	} 
	.gl-thumb-image{ 
		width:100%; 
		height:100%; 
		position:absolute; 
		left:0; 
		top:0; 
	} 
	.arrows{ 
		position:absolute; 
		top:230px; 
		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="gallery" id="img"> 
        <div class="arrows"> 
          <img src="images/left.jpg" onClick="javascript: left_arrow()" /> 
          <img src="images/right.jpg" onClick="javascript: right_arrow()" /> 
        </div> 
        <div class="prieview" name="prieview"> 
          <img src="images/gallery/big/1.jpg" /> 
        </div> 
         
        <div class="thumb"> 
          <div class="gl-thumb-inner"> 
            <div class="gl-thumb-image" style="background:url(images/gallery/small/1_ithumb.jpg) no-repeat"></div> 
          </div> 
          <div class="gl-thumb-inner"> 
            <div class="gl-thumb-image" style="background:url(images/gallery/small/2_ithumb.jpg) no-repeat"></div> 
          </div> 
          <div class="gl-thumb-inner"> 
            <div class="gl-thumb-image" style="background:url(images/gallery/small/3_ithumb.jpg) no-repeat"></div> 
          </div> 
          <div class="gl-thumb-inner"> 
            <div class="gl-thumb-image" style="background:url(images/gallery/small/4_ithumb.jpg) no-repeat"></div> 
          </div> 
          <div class="gl-thumb-inner"> 
            <div class="gl-thumb-image" style="background:url(images/gallery/small/5_ithumb.jpg) no-repeat"></div> 
          </div> 
          <div class="gl-thumb-inner"> 
            <div class="gl-thumb-image" style="background:url(images/gallery/small/6_ithumb.jpg) no-repeat"></div> 
          </div> 
          <div class="gl-thumb-inner"> 
            <div class="gl-thumb-image" style="background:url(images/gallery/small/7_ithumb.jpg) no-repeat"></div> 
          </div> 
          <div class="gl-thumb-inner"> 
            <div class="gl-thumb-image" style="background:url(images/gallery/small/8_ithumb.jpg)  no-repeat; margin-top:20px;"></div> 
          </div> 
          <div class="gl-thumb-inner"> 
            <div class="gl-thumb-image" style="background:url(images/gallery/small/9_ithumb.jpg) no-repeat; margin-top:20px;"></div> 
          </div> 
          <div class="gl-thumb-inner"> 
            <div class="gl-thumb-image" style="background:url(images/gallery/small/10_ithumb.jpg) no-repeat; margin-top:20px;"></div> 
          </div> 
          <div class="gl-thumb-inner"> 
            <div class="gl-thumb-image" style="background:url(images/gallery/small/11_ithumb.jpg) no-repeat; margin-top:20px;"></div> 
          </div> 
          <div class="gl-thumb-inner"> 
            <div class="gl-thumb-image" style="background:url(images/gallery/small/12_ithumb.jpg) no-repeat; margin-top:20px;"></div> 
          </div> 
          <div class="gl-thumb-inner"> 
            <div class="gl-thumb-image" style="background:url(images/gallery/small/13_ithumb.jpg) no-repeat; margin-top:20px;"></div> 
          </div> 
          <div class="gl-thumb-inner"> 
            <div class="gl-thumb-image" style="background:url(images/gallery/small/14_ithumb.jpg) no-repeat; margin-top:20px;"></div> 
          </div> 
        </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 class="nav_item"> 
              <a href="#">Video</a> 
            </li> 
            <li class="nav_item"> 
              <a>Horizon Zero Dawn</a> 
              </br> 
            </li> 
            <li class="nav_item"> 
              <a>Through Aloy's Eyes</a> 
            </li> 
          </ul> 
        </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> 
  <script>