/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Hjælp til webgalleri, JavaScript eller CSS
Fra : Stig Holmberg


Dato : 29-06-05 17:17

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



 
 
Thomas Christensen (29-06-2005)
Kommentar
Fra : Thomas Christensen


Dato : 29-06-05 17:48

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

Stig Holmberg (29-06-2005)
Kommentar
Fra : Stig Holmberg


Dato : 29-06-05 21:48


"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



Thomas Christensen (30-06-2005)
Kommentar
Fra : Thomas Christensen


Dato : 30-06-05 10:39

>
> 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

Stig Holmberg (01-07-2005)
Kommentar
Fra : Stig Holmberg


Dato : 01-07-05 15:38


"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



Søg
Reklame
Statistik
Spørgsmål : 177560
Tips : 31968
Nyheder : 719565
Indlæg : 6408943
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste