Rummaged through Google, or cumbersome with 100,500 styles that duplicate mine, or do not work at all.

It is necessary to click on the thumbnail, open the original.

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

In JS is not strong.

Maybe someone will advise)

  • one
    open in what sense? if you just open the picture in the window, then your code seems to be working - Bert

1 answer 1

If you want to open a picture as an element, then as an option on 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="" />

But the option for those who are interested without 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>