In JS I don’t shave at all for now, but I figured it out, but how can I modify the code so that when I click on the thumbnail first, a large image appears, and if I click on the mini again, it disappears? )

Here is the code:

function show(img) { var fullsize = document.getElementById("fullsize"); fullsize.style.display = "block"; fullsize.innerHTML = "<img class='bigimg' src='" + img.src + "' alt='fullsize' />"; } function hide(img) { var fullsize = document.getElementById("fullsize"); fullsize.style.display = "none"; fullsize.innerHTML = ""; }

And it is called like this:

 <img class="miniimg" id="image" onClick="show(this);" onMouseDown="hide(this);" src="/img/1/2.png">

    1 answer 1

     <img class="miniimg" id="image" onClick="toggle(this);" src="/img/1/2.png"> function show(img) { var fullsize = document.getElementById("fullsize"); fullsize.style.display = "block"; fullsize.innerHTML = "<img class='bigimg' src='" + img.src + "' alt='fullsize'/>";} function hide(img) { var fullsize = document.getElementById("fullsize"); fullsize.style.display = "none"; fullsize.innerHTML = ""; } var state = 0; function toggle(img){ if(state === 0) { show(img); } else { hide(img); } }
    • The problem appears in the other - when you click on the mini image - it opens up large, but when you click on another mini image - the previous one collapses and you need to click on the image a second time to open it ( - handbat0
    • one
      Then add hide (); before var fullsize = ... in the body of function show () {} - Altibaev Amal
    • Thank you, I did a little differently)) But you gave me this idea, and I did this: function show (img) {hide (img); var fullsize = document.getElementById ("fullsize"); fullsize.style.display = "block"; fullsize.innerHTML = "<img class = 'bigimg' onClick = \" hide (this); \ "src = '" + img.src + "' />"; } - handbat0