---

Jeg skal lave et lille webgalleri med klikbare thumbnails, således at når
man klikker på en thumbnail kommer billedet frem i stor størrelse
nedenunder.

Hvert stort billede skal være ledsaget af en tekst så det er nok noget med
at billedet og teksten skal ligge i et lag, en <DIV></DIV> altså.

Samtidig skal thumnailen skifte udseende så man ved at det er den man har
klikket på.

Effekten jeg vil opnå kan ses her: http://www.casabramasole.com/ klik på
"Exterior", dette er dog en Flash-løsning og det vil jeg ikke rode mig ud i.

Jeg ved ikke om det kan laves med ren CSS, tvivler på det, men eller ville
jeg blive glad for en henvisning til en JavaScript løsning.

Sp. også postet i client-gruppen.

Mvh. Stig

---

Stig Holmberg wrote:
> Jeg skal lave et lille webgalleri med klikbare thumbnails, således at når
> man klikker på en thumbnail kommer billedet frem i stor størrelse
> nedenunder.
>
> Hvert stort billede skal være ledsaget af en tekst så det er nok noget med
> at billedet og teksten skal ligge i et lag, en <DIV></DIV> altså.
>
> Samtidig skal thumnailen skifte udseende så man ved at det er den man har
> klikket på.
>
> Effekten jeg vil opnå kan ses her: http://www.casabramasole.com/ klik på
> "Exterior", dette er dog en Flash-løsning og det vil jeg ikke rode mig ud i.
>
> Jeg ved ikke om det kan laves med ren CSS, tvivler på det, men eller ville
> jeg blive glad for en henvisning til en JavaScript løsning.
>
> Sp. også postet i client-gruppen.
>
> Mvh. Stig
>
>
Du kan se om ikke du kan komme videre med dit galleri med inspiration
herfra:
http://www.stunicholls.myby.co.uk/menu/scroll_gallery.html

Eller her:
Eksempel:
http://www.webreference.com/programming/css_gallery/examples/twelve.htm

Tutorial:
http://www.webreference.com/programming/css_gallery/2.html

Begge eksempler er baseret på ren CSS

mvh Thomas

---

"Thomas Christensen" <SLETDETHERtc@fm-info.dk> skrev i en meddelelse
news:42c2d0b4$0$233$edfadb0f@dread11.news.tele.dk...
> Stig Holmberg wrote:
>> Jeg skal lave et lille webgalleri med klikbare thumbnails, således at når
>> man klikker på en thumbnail kommer billedet frem i stor størrelse
>> nedenunder.
>>
>> Hvert stort billede skal være ledsaget af en tekst så det er nok noget
>> med
>> at billedet og teksten skal ligge i et lag, en <DIV></DIV> altså.
>>
>> Samtidig skal thumnailen skifte udseende så man ved at det er den man har
>> klikket på.
>>
>> Effekten jeg vil opnå kan ses her: http://www.casabramasole.com/ klik på
>> "Exterior", dette er dog en Flash-løsning og det vil jeg ikke rode mig ud
>> i.
>>
>> Jeg ved ikke om det kan laves med ren CSS, tvivler på det, men eller
>> ville
>> jeg blive glad for en henvisning til en JavaScript løsning.
>>
>> Sp. også postet i client-gruppen.
>>
>> Mvh. Stig
> Du kan se om ikke du kan komme videre med dit galleri med inspiration
> herfra:
> http://www.stunicholls.myby.co.uk/menu/scroll_gallery.html
>
> Eller her:
> Eksempel:
> http://www.webreference.com/programming/css_gallery/examples/twelve.htm
>
> Tutorial:
> http://www.webreference.com/programming/css_gallery/2.html
>
> Begge eksempler er baseret på ren CSS
>
> mvh Thomas

Hej

Tak for links!, man kan tydeligvis komme langt med ren CSS, dog savner jeg
at thumbnailen også skifter i nævnte eksempler.

Mvh. Stig

---

>
> Hej
>
> Tak for links!, man kan tydeligvis komme langt med ren CSS, dog savner jeg
> at thumbnailen også skifter i nævnte eksempler.
>
> Mvh. Stig
>
>
Det kan jo også klares - ihvert fald til en vis grad - med CSS
Du kan i stylesheet'et sætte forskellige værdier for opacity for
billederne (her 0.5 / 50) når de vises og når brugerne kører musen over
dem (hover). Her er de sat med opacity 1 / 100.
Det fungerer fint i IE6 og også i FireFox 1+ (dog med en smule
forsinkelse ??)

#container a.gallery, #container a.gallery:visited {
   display:block;
   color:#000;
   text-decoration:none;
   border:1px solid #000;
   margin:1px 2px 1px 2px;
   text-align:left;
   cursor:default;
   /* OPACITY TEST */
   -moz-opacity:0.5;
   opacity:0.5;
   -khtml-opacity:0.5;
   filter:alpha(opacity=50)
}

#container a.gallery:hover {
   border:1px solid #FFF;
   /* OPACITY TEST */
   -moz-opacity:1;
   opacity:1;
   -khtml-opacity:1;
   filter:alpha(opacity=100)
}

mvh Thomas

---

"Thomas Christensen" <SLETDETHERtc@fm-info.dk> skrev i en meddelelse
news:42c3bdbc$0$200$edfadb0f@dread11.news.tele.dk...
>>
>> Hej
>>
>> Tak for links!, man kan tydeligvis komme langt med ren CSS, dog savner
>> jeg at thumbnailen også skifter i nævnte eksempler.
>>
>> Mvh. Stig
> Det kan jo også klares - ihvert fald til en vis grad - med CSS
> Du kan i stylesheet'et sætte forskellige værdier for opacity for
> billederne (her 0.5 / 50) når de vises og når brugerne kører musen over
> dem (hover). Her er de sat med opacity 1 / 100.
> Det fungerer fint i IE6 og også i FireFox 1+ (dog med en smule forsinkelse
> ??)
>
> #container a.gallery, #container a.gallery:visited {
> display:block;
> color:#000;
> text-decoration:none;
> border:1px solid #000;
> margin:1px 2px 1px 2px;
> text-align:left;
> cursor:default;
> /* OPACITY TEST */
> -moz-opacity:0.5;
> opacity:0.5;
> -khtml-opacity:0.5;
> filter:alpha(opacity=50)
> }
>
> #container a.gallery:hover {
> border:1px solid #FFF;
> /* OPACITY TEST */
> -moz-opacity:1;
> opacity:1;
> -khtml-opacity:1;
> filter:alpha(opacity=100)
> }
>
> mvh Thomas


Takker for koden!

Mvh. Stig