Avatar billede e30_fk Nybegynder
28. marts 2011 - 13:36 Der er 27 kommentarer og
1 løsning

hvordan laver jeg billedvisning som f.eks. på bilbasen.dk?

hvordan laver jeg billedvisning som f.eks. på bilbasen.dk?
Jeg vil meget gerne lave et site hvor billedvisningen er som når man klikker på et foto af en bil på bilbasen og får en forstørrelse op og hvor der samtidig er en række mindre fotos forneden og som ved klik viser det i forstørrelse.

På forhånd tak
/E30_fk
Avatar billede phillips Nybegynder
28. marts 2011 - 13:52 #1
Tjek nogle af plugins, der er lavet til jquery - det er det absolut nemmeste at implementere.

Min favorit er Fancybox:
http://fancybox.net/
Avatar billede claes57 Ekspert
28. marts 2011 - 13:57 #2
Class: bbPhoto
    Use: Lightbox clone for jQuery
    Author: Stephane Caron (http://www.no-margin-for-errors.com)
    Version: 3.0.1
se mere på:
http://www.no-margin-for-errors.com/blog/2011/03/07/prettyphoto-3-0-2-much-needed-bug-fixes/
Avatar billede olsensweb.dk Ekspert
28. marts 2011 - 17:49 #3
prøv at kigge på http://www.webdesign101.dk/galleri/galleri.php
eks "Up, up in the Sky" ligger da tæt på
Avatar billede e30_fk Nybegynder
29. marts 2011 - 12:07 #4
Philips
Det ser spændende ud og det var sikkert også her jeg skulle hente løsningen, men jeg har ikke spor forstand på jquery og det er faktisk første gang jeg støder på det...
Ronols
Der er i hvertfald en hel del som jeg kan bruge og det ender nok også med at jeg køber din bog. Desværre har jeg ikke den store kendskab til CSS og Stylesheet - jeg syntes sjældent at jeg kan få det til at fungere som jeg ønsker det....

Jeg skal bruge billedvisningen til et website om oldtimere/veteranbiler hvor beskrivelsen og de tekniske info står i venstre kolonne og 3-4-5 billeder med et stort og resten i thumbnails i højre kolonne.
Avatar billede olsensweb.dk Ekspert
29. marts 2011 - 12:38 #5
jeg har intet med den bog at gøre, men jeg ved Jøren Farum Jensen (JFJ) ofte skriver i dk.edb.internet.webdesign.html
der er efter signe mange der har haft stor glæde at at låne den på biblioteket

fandt lige på dk.edb.internet.webdesign.html
http://groups.google.com/group/dk.edb.internet.webdesign.html/browse_thread/thread/3077b6343c4b7b04/c80bef2e75984359?lnk=gst&q=vis+billed+onhover#c80bef2e75984359
[citat JFJ]   
Jørgen Farum Jensen            20 Jan., 01:05
http://webdesign101.dk/x/pixshow/pixshow.html
[/citat JFJ]

det burde være rimelig nemt at udskifte link teksterne med billeder
Avatar billede e30_fk Nybegynder
16. april 2011 - 23:02 #6
Hvordan får jeg http://webdesign101.dk/rollover/eksempel_7.php til at fungere på min webside? og hvordan kan jeg gøre billederne større?
Avatar billede olsensweb.dk Ekspert
17. april 2011 - 00:19 #7
hvordan du får det til at virker på din webside er svært at afgøre.
har du en link til din webside ??,
hvor langt er du kommet med scriptet ??, det er bare at kopierer det
en ulempe ved hans script er at billerne SKAL hedde adimg0.gif, adimg1.gif, adimg3.gif, adimg4.gif,


>og hvordan kan jeg gøre billederne større?
man plejer normalt at have billederne i 2 størrelser, thumbnail og normal størrelse.

jeg har prøvet at omskrive hans script lidt, så man selv kan bestemme navne på filerne
http://olsensweb.dk/test/experten/spm/935361/galleri.html  ( meget tæt op af hans )
http://olsensweb.dk/test/experten/spm/935361/ronols.html     ( sådan vil jeg lave det )
Avatar billede e30_fk Nybegynder
17. april 2011 - 09:02 #8
Min webside er ikke klar til de enkelte sider endnu, men ellers er det veteranbilen.dk
Det ønskede resultat skal er som dette:
http://carview.bilinfo.dk/apps/laeborg-autohandel.dk/details.asp?id=222601237 - dog er det ikke nødvendigt med mere end max 4 små og et stort billede.
Det betyder intet om jeg skal lave 2 størrelser billeder.
Avatar billede e30_fk Nybegynder
18. april 2011 - 14:24 #9
Det ser ikke helt tosset ud som du har lavet det - jeg skal bare have den lodrette søjle til at ligge ned og gerne i en størrelse så de samlet svarer til bredden af det store billede.
/e30-dk
Avatar billede olsensweb.dk Ekspert
18. april 2011 - 14:44 #10
1) man bør ikke bruge frames mere, diverse søgemaskiner kan ikke indexerer, alle link vil fører til forsiden
2) tabeller er til tabulærer data ikke til design
jeg har omskrevet din fil (a.htm)
den er kommet ned fra 47K til 11K (alt inc),
http://olsensweb.dk/test/experten/spm/935361/a.html

>jeg skal bare have den lodrette søjle til at ligge ned og gerne i en størrelse så de samlet svarer til bredden af det store billede.
ikke noget problem, du ligger bare billederne ved siden af hinnanden, istadet for i en liste.
men har du tænkt på om der er plads til alle de billeder, samt det store ??, ikke alle bruger har stor skærm, og høj opløsning, og visser det i full size, de fleste brugere kører browseren i et mindre vindue end full size
Avatar billede olsensweb.dk Ekspert
18. april 2011 - 16:04 #11
>så de samlet svarer til bredden af det store billede
se http://olsensweb.dk/test/experten/spm/935361/b.html
Avatar billede olsensweb.dk Ekspert
18. april 2011 - 19:50 #12
hvis det kun er 1 bil du har billeder af fra mange vinkler, kan du lade teksten være fast, som sådan her: http://olsensweb.dk/test/experten/spm/935361/c.html
Avatar billede e30_fk Nybegynder
20. april 2011 - 22:14 #13
For hver bil, skal der være max 4 små og et stort som jo så udskiftes automatisk når man køre musen over. Men ellers er det meget fint hvad du har lavet og hvis lige det store billede bliver ændret til det første af de underliggende fotos vil det være perfekt.
Husk lige at lave et svar så du kan få pointene.
mvh
Mogens
Avatar billede e30_fk Nybegynder
20. april 2011 - 22:23 #14
Mht. det du skrev vedr. frame så vil siderne med selve bilerne og fotos som du har lavet ikke blive lavet i frame - http://veteranbilen.dk/home.htm hvor billerderne  skal placeres til højre for de tekniske beskrivelser.

/e30
Avatar billede e30_fk Nybegynder
20. april 2011 - 23:00 #15
Hvad gør jeg galt her?
http://veteranbilen.dk/home.htm
/e30
Avatar billede olsensweb.dk Ekspert
21. april 2011 - 11:54 #16
#13
>hvis lige det store billede bliver ændret til det første af de underliggende fotos vil det være perfekt.
erstat

<IMG id=pixserie alt="" src="images/pixshow.jpg" width=270 height=240>

med

<script type="text/javascript">           
    document.write('<img id="pixserie" alt="" width="270" height="340" src="http://www.veteranbilen.dk/automania2010/slides/'+ItemObjArray[0].FileBig+'" />');
</script>       


#16
>Hvad gør jeg galt her?
hvor ligger dit ItemObjArray ??
det er jo det alle navnene på billederne ligger

<script type="text/javascript">
    var ItemObjArray = Array();
    var Item = new Object();           
    Item = {FileSmall: "BUICK-SPECIAL-0.JPG", FileBig: "BUICK-SPECIAL-0.JPG"};    ItemObjArray[0]=Item;
    Item = {FileSmall: "BUICK-SPECIAL-1.JPG", FileBig: "BUICK-SPECIAL-1.JPG"};    ItemObjArray[1]=Item;
    Item = {FileSmall: "BUICK-SPECIAL-2.JPG", FileBig: "BUICK-SPECIAL-2.JPG"};    ItemObjArray[2]=Item;
    Item = {FileSmall: "BUICK-SPECIAL-3.JPG", FileBig: "BUICK-SPECIAL-3.JPG"};    ItemObjArray[3]=Item;   
   
    function imgOn(nr){
        document.images.pixserie.src="http://www.veteranbilen.dk/automania2010/slides/"+ItemObjArray[nr].FileBig;
    }
    function imgOff(nr){
        document.images.pixserie.src="pixshow.jpg";       
    }
</script>


man bør måske overveje at undlade at vise pixshow.jpg helt, men det er jo bare at fjerne kaldet til imgOff


<script type="text/javascript">
            var lng = ItemObjArray.length;           
            document.write('<span>');
            for (i=0;i<lng;i++){               
                document.write('<a onmouseover="imgOn('+i+')" onmouseout="imgOff('+i+')" href="/"><img src="http://www.veteranbilen.dk/automania2010/slides/'+ItemObjArray[i].FileSmall+'" width="65" height="65" alt="" /><\/a>');
            }
            document.write('<\/span>');           
</script>


en lille omskrivning af min c.html vertion http://olsensweb.dk/test/experten/spm/935361/d.html
Avatar billede e30_fk Nybegynder
23. april 2011 - 17:34 #17
Foreløbig skal du have mange tusind tak for dit arbejde som jeg sætter meget stor pris på. Nu skal jeg lige forstå at handle det, men det kommer nok - ellers vender jeg tilbage.
Endnu engang tak.
Mogensjava script:%20void(0);
Avatar billede e30_fk Nybegynder
23. april 2011 - 17:41 #18
Hvordan gøre jeg når der skal vises f.eks. 4 biler med billeder på hver side?
Skal jeg bare kopiere: <script type="text/javascript">
    var ItemObjArray = Array();
    var Item = new Object();           
    Item = {FileSmall: "BUICK-SPECIAL-0.JPG", FileBig: "BUICK-SPECIAL-0.JPG"};    ItemObjArray[0]=Item;
    Item = {FileSmall: "BUICK-SPECIAL-1.JPG", FileBig: "BUICK-SPECIAL-1.JPG"};    ItemObjArray[1]=Item;
    Item = {FileSmall: "BUICK-SPECIAL-2.JPG", FileBig: "BUICK-SPECIAL-2.JPG"};    ItemObjArray[2]=Item;
    Item = {FileSmall: "BUICK-SPECIAL-3.JPG", FileBig: "BUICK-SPECIAL-3.JPG"};    ItemObjArray[3]=Item;   
   
    function imgOn(nr){
        document.images.pixserie.src="http://www.veteranbilen.dk/ (...)
    }
    function imgOff(nr){
        document.images.pixserie.src="pixshow.jpg";       
    }
</script>

med de forskellige navne på billederne op i afsnittet over head?
Mogens
Avatar billede e30_fk Nybegynder
23. april 2011 - 19:05 #19
Hvad gør jeg forkert? - der skulle være 2 forskellige sæt billeder.

http://veteranbilen.dk/auto/

Mogens
Avatar billede olsensweb.dk Ekspert
23. april 2011 - 20:45 #20
>Hvad gør jeg forkert?
kort fortalt du overskriver dine egne variable

<script type="text/javascript">
    var ItemObjArray = Array();
    var Item = new Object();           
    Item = {FileSmall: "14-28-Bullnose.jpg", FileBig: "14-28-Bullnose.jpg"};    ItemObjArray[0]=Item;
    Item = {FileSmall: "11.9-hp-raworth.jpg", FileBig: "11.9-hp-raworth.jpg"};    ItemObjArray[1]=Item;
    function imgOn(nr){
        document.images.pixserie.src="http://www.veteranbilen.dk/auto/mg/images/"+ItemObjArray[nr].FileBig;
    }
   
</script>
<script type="text/javascript">
    // læg mærke til at der er et 1 tal på for ikke at overskrive function og array lavet ovenfor
    var ItemObjArray1 = Array();
    var Item1 = new Object();           
    Item1 = {FileSmall: "BUICK-SPECIAL-0.JPG", FileBig: "BUICK-SPECIAL-0.JPG"};    ItemObjArray1[0]=Item1;
    Item1 = {FileSmall: "BUICK-SPECIAL-1.JPG", FileBig: "BUICK-SPECIAL-1.JPG"};    ItemObjArray1[1]=Item1;
    Item1 = {FileSmall: "BUICK-SPECIAL-2.JPG", FileBig: "BUICK-SPECIAL-2.JPG"};    ItemObjArray1[2]=Item1;
    Item1 = {FileSmall: "BUICK-SPECIAL-3.JPG", FileBig: "BUICK-SPECIAL-3.JPG"};    ItemObjArray1[3]=Item1;
   
    Item1 = {FileSmall: "BUICK-SPECIAL-0.JPG", FileBig: "BUICK-SPECIAL-0.JPG"};    ItemObjArray1[4]=Item1;
    Item1 = {FileSmall: "BUICK-SPECIAL-1.JPG", FileBig: "BUICK-SPECIAL-1.JPG"};    ItemObjArray1[5]=Item1;
    Item1 = {FileSmall: "BUICK-SPECIAL-2.JPG", FileBig: "BUICK-SPECIAL-2.JPG"};    ItemObjArray1[6]=Item1;
    Item1 = {FileSmall: "BUICK-SPECIAL-3.JPG", FileBig: "BUICK-SPECIAL-3.JPG"};    ItemObjArray1[7]=Item1;
   
    function imgOn1(nr){
        document.images.pixserie1.src="http://www.veteranbilen.dk/automania2010/slides/"+ItemObjArray1[nr].FileBig;
    }
</script>



<div class="ColRight">       
        <script type="text/javascript">           
            document.write('<img id="pixserie" alt="" width="270" height="240" src="http://www.veteranbilen.dk/auto/mg/images/'+ItemObjArray[0].FileBig+'" />');
        </script>
        <div class="SmallImages">
        <script type="text/javascript">
            var lng = ItemObjArray.length;           
            document.write('<span>');
            for (i=0;i<lng;i++){               
                document.write('<a onmouseover="imgOn('+i+')" href="/"><img src="http://www.veteranbilen.dk/auto/mg/images/'+ItemObjArray[i].FileSmall+'" width="65" height="96" alt="" /><\/a>');
            }
            document.write('<\/span>');           
        </script>
        </div>
</div>

læg igen mærke til 1 tallerne
<div class="ColRight">       
        <script type="text/javascript">           
            document.write('<img id="pixserie1" alt="" width="270" height="240" src="http://www.veteranbilen.dk/automania2010/slides/'+ItemObjArray1[0].FileBig+'" />');
        </script>       
        <div class="SmallImages">
        <script type="text/javascript">
            var lng1 = ItemObjArray1.length;           
            document.write('<span>');
            for (i=0;i<lng1;i++){               
                document.write('<a onmouseover="imgOn1('+i+')" href="/"><img src="http://www.veteranbilen.dk/automania2010/slides/'+ItemObjArray1[i].FileSmall+'" width="65" height="96" alt="" /><\/a>');
            }
            document.write('<\/span>');           
        </script>       
        </div>
</div>

<div id="ColRight"> laves om til <div class="ColRight"> og i css laves #ColRight { om til .ColRight {
da du ikke må have flerer id'er der hedder det sammen
Avatar billede e30_fk Nybegynder
24. april 2011 - 13:20 #21
Et eller andet må være forkert for jeg syntes at jeg har husket alle !-tallene samt ændret i css, men resultatet blev ikke helt som forventet - se:
http://www.veteranbilen.dk/auto/

Hvad gør jeg forkert dennegang?

Mvh
Mogens
Avatar billede olsensweb.dk Ekspert
24. april 2011 - 13:56 #22
.ColRight {
her havde du glemt punktummet

de andre steder der er fejl er E skyld, ååh jeg er træt af E der skjuler alt efter domain navnet.
du har bare råkopieret, hvilke er fint nok, men ikke været opmærksom på E's særhed :(

feks her:
document.images.pixserie1.src="http://www.veteranbilen.dk/[b](...)


jeg har rettet din side med ovennævnte http://olsensweb.dk/test/experten/spm/935361/home.html
du har så også en lille opgave med æøå men det er sekundært
Avatar billede e30_fk Nybegynder
26. april 2011 - 14:27 #23
Tak for det, men jeg forstår ikke hvorfor at det kun er det ene billede som bliver vist i første afsnit:

denne bliver vist
Item = {FileSmall: "11.9-hp-raworth.jpg", FileBig: "11.9-hp-raworth.jpg"};    ItemObjArray[1]=Item;


denne gør ikke:
Item = {FileSmall: "14-28-Bullnose.jpg", FileBig: "14-28-Bullnose.jpg"};    ItemObjArray[0]=Item;

/Mogens
Avatar billede olsensweb.dk Ekspert
26. april 2011 - 14:56 #24
jeg prøvede lige at kigge på http://www.veteranbilen.dk/auto/mg/images/ her er 14-28-Bullnose.jpg stavet med småt, og så bliver den ikke vist da der er forskel på  store og små bogstaver på linux baserede servere Bullnose.jpg og bullnose.jpg er IKKE ens

dette rettes
 Item = {FileSmall: "14-28-Bullnose.jpg", FileBig: "14-28-Bullnose.jpg"};    ItemObjArray[0]=Item; 


til
 Item = {FileSmall: "14-28-bullnose.jpg", FileBig: "14-28-bullnose.jpg"};    ItemObjArray[0]=Item; 




jeg tror du har sat dit FTP program til at uploade med småt, hvilke er fint, bare man er opmærksom på det

jeg har opdateret min side, så nu kan du også en en blå bullnose på en græsplæne.
Avatar billede e30_fk Nybegynder
26. april 2011 - 19:55 #25
Hvis jeg vil have flere billeder på samme siden - altså en fortsættelse af de to som er med nu, kan jeg så gøre det ved at ændre "1-tallene" til 2 tal osv?
/Mogens
Avatar billede olsensweb.dk Ekspert
26. april 2011 - 20:06 #26
#25
Ja
Avatar billede e30_fk Nybegynder
01. juni 2011 - 19:59 #27
Hej Ronols
Undskyld at jeg ikke har været på i et stykke tid, men helbreddet har drillet mig en del, men nu er jeg klar igen og er i fuld gang med projektet som du har været en stor hjælp til.
Lav lige et svar så du kan få dine point - med forsinkelse..;o)
Endnu engang tak for din hjælp som jeg sætter meget stor pris på.
Mvh
Mogens
Avatar billede olsensweb.dk Ekspert
01. juni 2011 - 22:56 #28
>Lav lige et svar så du kan få dine point
kan du ikke bruge det jeg lagde i #16 ?? som du bad om i #13
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