I am writing a photo gallery for PHP for myself and I have encountered such a problem: in one DIV block I have a list of photogallery previews, I need to bring them to the next DIV in an increased size. How can I do it ? (Preferred on pure PHP, CSS, but you can also have a simple JS)

PS tried to do in styles through Hover and Active but to no avail (the picture just shifts inside its block and disappears beyond its borders.

Example - http://jsfiddle.net/NM5Fk/

1 answer 1

Here you can see how to make a gallery using only css .
A working example on js can be found here: jsFiddle

An abstract example based on your markup and styles:

html:

<div class="left2"> <img class="miniimg" onmouseover="show(this);" onmouseout="hide(this);" alt="art" src="картинка_1.jpg" /> <img class="miniimg" onmouseover="show(this);" onmouseout="hide(this);" alt="art" src="картинка_2.jpg" /> <img class="miniimg" onmouseover="show(this);" onmouseout="hide(this);" alt="art" src="картинка_3.jpg"> <img class="miniimg" onmouseover="show(this);" onmouseout="hide(this);" alt="art" src="картинка_4.jpg" /> <img class="miniimg" onmouseover="show(this);" onmouseout="hide(this);" alt="art" src="картинка_5.jpg" /> <img class="miniimg" onmouseover="show(this);" onmouseout="hide(this);" alt="art" src="картинка_6.jpg" /> </div> <div id="fullsize" class="content"></div>

css:

 .left2 { border:1px solid black; text-align:left; margin-left:30px; float:left; width:50px; min-height:450; max-height:550px; text-align:center; overflow:auto; } .content { border:1px solid black; display: none; text-align:left; float:left; height:200px; padding: 3px; margin:25px 0px 20px 50px; width:200px; } .miniimg { margin-top:3px; max-width:70%; height:auto; border:1px solid black; }

javascript:

  function show(img) { var fullsize = document.getElementById("fullsize"); fullsize.style.display = "block"; fullsize.innerHTML = "<img class='bigimg' src='" + img.src + "' alt='fullsize' width='200' height='200' />"; } function hide(img) { var fullsize = document.getElementById("fullsize"); fullsize.style.display = "none"; fullsize.innerHTML = ""; }
  • 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? ) - handbat0