Показать оригинал по клику

171

26 августа 2018, 07:20

Перерыл Гугл, либо громосткое с 100500 стилей, которые дублируют мои, либо ваще не работающее говно.

Надо по клику миниатюры, открыть оригинал.

<a href="orig.jpeg"><img src="small.jpeg"></a>

В JS не силен.

Может что посоветует кто)

Answer 1

Если вы хотите открыть картинку как элемент, то как вариант на JS:

let flag=true; 
document.querySelector('.small').onclick=()=>{ 
  document.querySelector('.original').style.display=(flag)?'block':'none'; 
  flag=!flag; 
}

img.small{ 
  cursor:pointer; 
} 
img.original{ 
  display:none; 
}

<img class="small" src="https://dummyimage.com/100x100/6985c2/000000.png&amp;text=%D0%9A%D0%90%D0%A0%D0%A2%D0%98%D0%9D%D0%9E%D0%A7%D0%9A%D0%90" alt="" /> 
<img class="original" src="https://dummyimage.com/400x400/6985c2/000000.png&amp;text=%D0%9A%D0%90%D0%A0%D0%A2%D0%98%D0%9D%D0%98%D0%A9%D0%95" alt="" />

А вот вариант для тех, кому интересно без JS - https://codepen.io/qwerty_wasd/pen/PaMOYZ

*, 
*:after, 
*:before { 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
  padding: 0; 
  margin: 0; 
  outline: 0; 
} 
 
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/ 
 
.midget-module { 
  position: relative; 
  display: inline-block; 
} 
 
label.midget-close { 
  position: absolute; 
  z-index: 99; 
  top: 0; 
  right: 0; 
  font-weight: bold; 
  font-size: 30px; 
  cursor: pointer; 
} 
 
label.midget-close:hover { 
  color: #fff; 
} 
 
label.midget-open {} 
 
.mid-original { 
  display: none; 
  background: rgba(0, 0, 0, .5); 
  position: absolute; 
  top: 0; 
  left: 0; 
  z-index: 99; 
  height: 100vh; 
  width: 100vw; 
  overflow: hidden; 
} 
 
.mid-original>img { 
  margin: auto; 
} 
 
input#midget { 
  position: absolute; 
  clip: rect(0, 0, 0, 0); 
} 
 
input#midget:checked~.mid-original { 
  display: flex; 
}

<div class="midget-module"> 
  <label class="midget-open" for="midget"> 
      <img src="https://dummyimage.com/100x100/6985c2/000000.png&amp;text=%D0%9A%D0%90%D0%A0%D0%A2%D0%98%D0%9D%D0%9E%D0%A7%D0%9A%D0%90" alt=""/> 
  </label> 
  <input id="midget" type="checkbox" /> 
  <div class="mid-original"> 
    <label class="midget-close" for="midget">&#10008;</label> 
    <img src="https://dummyimage.com/400x400/6985c2/000000.png&amp;text=%D0%9A%D0%90%D0%A0%D0%A2%D0%98%D0%9D%D0%98%D0%A9%D0%95" alt="" /> 
  </div> 
</div>