Avatar billede ikaruga Nybegynder
18. februar 2007 - 13:20 Der er 11 kommentarer og
1 løsning

Galleri med sidescrolling thumbnails

Hey folkens

mit spørgsmål kom ind i css kategorien, men hvis det kan løses bedre med javascript eller anden måde, så er det også helt fint..

Jeg skal have lavet et galleri, hvor thumbnails skal vises foroven - og man skal kunne scrolle igennem dem sidelæns. Klikker / eller mouseover man en thumbnail skal den store udgave vises nedunder.

Jeg har forsøgt at illustrere det her:

http://krasch.dk/eksperten/galleri.jpg

Sidescrolling på thumbnails skal være uden scrollbar, men med nogle knapper som reagerer på 'mouseover'.

Jeg kan lave det ved at oprette 2 iframes, til henholdsvis thumbnails og de store billeder, men jeg kan forestille mig der er en bedre løsning?

Jeg vil foretrække at det store billede bliver vist når man laver mouseover på thumbnail, men det er også i orden hvis det "bare" bliver en løsning hvor det bliver vist onclick.

Nå ja, og når man sidescroller igennem thumbnails, og kommer til den sidste thumbnail, så må den gerne "starte forfra". Sådan at man ikke skal til at scrolle hele vejen tilbage, for at se det første billede

Måske man kan bruge det her css, men hvordan løser jeg så den der sidescrolling af thumbnails. Og når man fjerner musen fra et billede, så skal den store udgave forblive vist, indtil man mouseover et andet billede:
http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/#thumb

På forhånd tak :)
Avatar billede Slettet bruger
19. februar 2007 - 04:50 #1
(Host host) Håber ikke seriøst at du regner med, at nogen vil sidde i flere dage og kode dette til dig, for 30 points???

Men hvis du allerede har lavet en del af det, vil mange sikkert hjælpe dig med at rette småting til. :-)
Avatar billede efes Nybegynder
19. februar 2007 - 14:30 #2
Hejsa

Hvis du kan leve med en scrollbar, kan du muligvis anvende eksemplet fra Stu Nicholls.
http://www.cssplay.co.uk/menu/scroll_gallery.html

/Efes
Avatar billede efes Nybegynder
19. februar 2007 - 14:51 #3
Hej igen

En anden mulighed kunne være, at downloade denne lille "billedfremvise" http://www.airtightinteractive.com/simpleviewer/

/Jesper
Avatar billede ikaruga Nybegynder
20. februar 2007 - 16:48 #4
Tja, jeg havde jo håbet at det galleri jeg selv linkede til, "rimelig nemt" kunne tilpasses de ting jeg beskrev, og brugte derfor ekspertens eget "pris forslag" for et "middel" sværhedsgrad. Men det tyder på at det her ikke er et middel-spørgsmål :)

Har selv rodet videre med det, og vælger sandsynligvis en javascript løsning, så mit spørgsmål er nu i et helt forkert forum.

Som det ser ud nu, så er der nogle enkelte ting i det javascript som driller lidt, men så må jeg hellere oprette spørgsmålet i det korrekte forum, frem for at fortsætte her (?)

http://www.airtightinteractive.com/simpleviewer/ ser interresant ud, så selv om det ikke er løsningen på dette spørgsmål kan du sagtens få de 30 point. Bare smid et svar efes.
Avatar billede Slettet bruger
20. februar 2007 - 18:23 #5
http://www.airtightinteractive.com/simpleviewer ser ud som en god ide at arbejde videre med, af 3 grunde:
1: Den er utroligt flot (vigtigt, fordi det er jo trods alt billedfremvisnng du ønsker).
2: Det er Flash frem for JavaScript.
3: Den er crossbrowser - altå virker både i hhv. IE (I hvert fald v.+6), FF og Opera. De 3 største browsere = ca. 95% af hele markedet.

Intet galt i JavaScript i sig selv - men af sikkerhedsmæssige årsager, har mange slået JavaScript fra i deres browsere. Dog har enkelte også slået Flash fra, fordi man ikke gidder at se på de irriterende blinkende flash-reklamer. Men det er ikke så mange.
Så gå efter Flash-løsningen. :-)
Avatar billede Slettet bruger
20. februar 2007 - 18:25 #6
efes:
Stu Nicholls er en sand mester, indenfor CSS. Men efter IE 7 er kommet på markedet, er der flere af hans lidt ældre ting, som ikke er aktuelle mere. Desværre!
Desuden er det heller ikke alt som virker i Opera. :-(
Avatar billede efes Nybegynder
20. februar 2007 - 22:13 #7
Hej ikaruga   

Hvis du ikke bruger mit svar til noget, så syntes jeg ikke, at du skal give mig points. Om du så vil gøre det alligevel, vil jeg lade være op til dig selv, jeg sparer ikke op til noget, så jeg har ikke behov for dem.

Extend:
Jeg har ikke selv testet ret meget på IE 7 endnu, men jeg kommer jo nok ikke udenom :-( Noget af det nyeste jeg har lavet mht. popup på billede er kraftigt inspireret af Stu Nicholls, og det jeg indtil videre har set er, at bortset fra at scrollbaren opførere sig lidt underligt (ved endnu ikke hvorfor), så virker det.
Nu ved jeg ikke helt hvad du mener med ældre ting. Det jeg har anvendt er sidst opdateret i feb. 2006, hvilket vel næppe gør det ældre :-) I bund og grund vil jeg dog bare give dig ret i, at han er, og i mine øjene, blive en sand mester.

mvh.
Efes
Avatar billede ikaruga Nybegynder
14. marts 2007 - 12:42 #8
efes-->
det lader til jeg kommer til at bruge dit svar til meget mere end først antaget.
Det er et lækkert galleri, så jeg vil gerne give dig point for linket :)
smid et svar, så får du point :)
Avatar billede efes Nybegynder
15. marts 2007 - 08:51 #9
Hej ikaruga

Jamen så siger jeg da mange tak for point. Jeg er glad for at have været behjælpelig. Og fortsat god fornøjelse med din side.

mvh.
Efes
Avatar billede ikaruga Nybegynder
15. marts 2007 - 09:51 #10
:D
Du skal vælge "svar" og ikke "kommentar".. ellers kan jeg ikke give pointene :)
Avatar billede efes Nybegynder
15. marts 2007 - 10:33 #11
Ups - en mindre fejl 40 :-D, så her kommer et svar

mvh.
Efes
Avatar billede -kenner- Nybegynder
24. januar 2008 - 17:52 #12
ikaruqa, fandt du nogenside en løsning på dette for jeg står og mangler nøjagtig den samme kode?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester