open thumbnails in larger div

Question

hej there, I've got a question about functions of javascript and css.

I am trying to creat a css photo gallery, but I found out that a good gallery with thumbnails etc. is almost not possible in css only. So I want, when I click on the thumbnail, the picture opens bigger in another div.

I hope it's clear enough like this.

I am sorry for the bad english.

Basically, what you want is a lightbox. Like shadowbox (http://www.shadowbox-js.com/) or lightbox 2 (http://lokeshdhakar.com/projects/lightbox2/) — Bram Vanroy, Oct 19 '12 at 14:55
CSS only lightboxes are very doable. See this link for an example of how": http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/ — Rick Calder, Oct 19 '12 at 15:00

score 0 · Accepted Answer · answered Oct 19 '12 at 14:53

0

html

<a.some>
   <img.thumb>
   <span.popup>
      <img.big>
   </span>
</a>

css

a.some{position:relative}
a.some .popup{display: none;}
a.some:focus .popup{
   display:block;
}

something like this.

answered Oct 19 '12 at 14:53

VitVad

336
2
8

thank you for you time, but I can't get it to work. It just doesnt do anything. is the :focus something like in javascript onClick? and has the class .popup to be between the tags? maby it is easier with javascript? – duzz Oct 20 '12 at 07:58

open thumbnails in larger div

1 Answers1