CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

fcand Nybegynder

21. juni 2009 - 14:17 Der er 17 kommentarer og
2 løsninger

Javascript til visning af forskelligt indhold!

Hej Eksperter!

Jeg har en side hvorpå der er en masse thumbnails af større billeder. Når man trykker på disse thumbnails, vil jeg gerne have at det pågældende billede vises i stort format længere nede på samme side!

Kan det lade sig gøre med javascript?

Det vil altså sige at der skal laves en variabel der kan vise forskelligt indhold (billeder), afhængigt af hvilket billede (thumbnail) man trykker på øverst på samme side!

Håber det er til at forstå!

Synes godt om

madfarmer Nybegynder

21. juni 2009 - 15:01 #1

Synes godt om

fcand Nybegynder

21. juni 2009 - 15:18 #2

Det kan jeg ikke få til at virke - Du blir nødt til at snakke mig igennem, har ikke så meget styr på det endnu!

Vil du have selve script'et til at stå i headeren og onmouseover til at stå på det lille billede (thumbnail)?

Synes godt om

roenving Novice

21. juni 2009 - 15:49 #3

Hvis du bruger dine store billeder til at vise som thumbnails, kan du, som madfarmer angiver, bare bruge billedet:

<img src="myImage.gif" alt="Loading.." onmouseover="seeLargeImage(this.src)">

-- her udnytter jeg så, at du selvfølgelig har direkte adgang til src på billed-elementet, så du kan sætte præcis den samme kode på alle img-tags med thumbnails ...

-- en helt anden ting er, at det ofte vil være hensigtsmæssigt at billedbehandle, så man faktisk kun viser billederne i den rigtige størrelse, og så skal man jo finde frem og tilbage, et typisk eksempel vil være, at man har de store billeder i en mappe og de tilsvarende thumbnails i en anden, og så kan man f.eks. (her ligger de store billeder i en mappe, der hedder bigPics, de små i en, der hedder Thumbs:

<script type="text/javascript">
function seeLargeImage(val){
val = val.replace(/Thumbs/,"bigPics");
document.getElementById("Megaimage").src = val;
}
</script>

Synes godt om

fcand Nybegynder

21. juni 2009 - 15:55 #4

Roenving >> Jeg har som du selv skriver til sidst, lavet en masse små billeder som ligger i en mappe der hedder "thumbs" og de tilsvarende store billeder ligger i en mappe der hedder "images"

Det er ikke bare de store billeder jeg har sat en højde og vidde på for at gøre dem mindre!

Men jeg har stadig mine thumbs øverst på en html side og vil gerne have at når man klikker på et thumb, så skal det tilsvarende store billede vises længere nede på samme html side!

Synes godt om

madfarmer Nybegynder

21. juni 2009 - 17:13 #5

Har du husket at kalde de thumbs noget der ligne det originale navn alla

stort billednavn

billednavn.jpg

lille billednavn

billednavn_thumb.jpg

for så kan du finde navnet på det store billede med en substring fra det lille billede.. Hvis dette ikke er tilfældet, kunne det godt blive bøvlet..

Synes godt om

madfarmer Nybegynder

21. juni 2009 - 17:15 #6

hvis ja.. så kom lige med 2 navne så kan jeg give dig substring kommandoen..

Synes godt om

madfarmer Nybegynder

21. juni 2009 - 17:19 #7

doh.. læste ikke lige ordentligt efter i din sidste post.. går ud fra at thumbs nu har det samme navn som de store, men blot ligger i en mappe inde i billedmappen der hedder thumbs. alla

/images/billed1.jpg

/images/thumbs/billed1.jpg

for så kan du bruge roenvigs

<script type="text/javascript">
function seeLargeImage(val){
val = val.replace(/Thumbs/,"");
document.getElementById("idpådetstorebillede").src = val;
}
</script>

Synes godt om

madfarmer Nybegynder

21. juni 2009 - 17:20 #8

rettelse

<script type="text/javascript">
function seeLargeImage(val){
val = val.replace('Thumbs/','');
document.getElementById("idpådetstorebillede").src = val;
}
</script>

Synes godt om

fcand Nybegynder

21. juni 2009 - 17:28 #9

Det er måske nemmere hvis jeg giver Jer en URL, så kan i se kildekoden!

Og ja navnene på henholdsvis de store og små billeder er de samme, de ligger bare i forskellige mapper der hedder thumbs og images.

URL: http://afcdesign.dk/v6/artwork.html

Når man trykker på et af de to thumbs på denne side, skal det tilsvarende store billede vises længere nede på siden, under hvor der står "showcase". I kildekoden er det i den div der har class="blogCONTENT"

Synes godt om

madfarmer Nybegynder

21. juni 2009 - 21:07 #10

ok. du skal på billederne

<img src="portfolio/thumbs/firefox_flames.png" width="110" height="108" alt="Firefox Flames" />

<img src="portfolio/thumbs/afcDESIGN_artwork.png" width="110" height="108" alt="afcDESIGN Bulletholes" />

indsætte en onclick command

<img src="portfolio/thumbs/firefox_flames.png" width="110" height="108" alt="Firefox Flames" onclick="seeLargeImage(this.src)" />

<img src="portfolio/thumbs/afcDESIGN_artwork.png" width="110" height="108" alt="afcDESIGN Bulletholes" onclick="seeLargeImage(this.src)" />

scriptet der ligges under <head vil så se således ud

<script type="text/javascript">
function seeLargeImage(val){
val = val.replace("/thumbs/","/images/");
document.getElementById("stortbilledID").src = val;
}
</script>

antaget at mappen images også ligger i portfoliomappen.

Du skal så der hvor du gerne vil vise billedet, oprette et img

<img id="stortbilledID" src="">

Synes godt om

fcand Nybegynder

21. juni 2009 - 21:42 #11

madfarmer >> Det virker jo rigtig godt :)

Jeg har bare et par småting nu - Kan man på nogen måde gøre så der vises en hånd og ikke bare en pil når man er over thumbs'ne med musen (det er mest for brugervenligheden af siden, så folk ved de kan klikke på thumbs'ne).

og den sidste ting er, at der vises standard ikonet for et billede der ikke referere til noget inden man har klikket på en thumb, det ser ikke så godt ud. Se linket igen, har uploaded det!

Synes godt om

madfarmer Nybegynder

21. juni 2009 - 22:10 #12

Kan begge nemt løses

på billederne skriver du blot

<img style="cursor:pointer">;

og den sidste kan løses med

<img id="stortBillede" style="display:none" />

og i javascriptet tilføjer du så lige..

<script type="text/javascript">
function seeLargeImage(val){
val = val.replace("/thumbs/","/images/");
document.getElementById("stortbilledID").src = val;
document.getElementById("stortbilledID").style.display = 'block';
}
</script>

Synes godt om

madfarmer Nybegynder

21. juni 2009 - 22:11 #13

lidt rodet komentar den sidste.. hvis noget er uforståeligt, så sig lige til..

Synes godt om

roenving Novice

22. juni 2009 - 15:48 #14

Det var med vilje, at jeg ikke anvendte gåseøjne, for det er nemlig en RegExp, en regular expression, som er specielt velegnet til at udføre tekst-operationer, bla. fjernelse og udskiftninger inde i en længere tekststreng !-)

Synes godt om

madfarmer Nybegynder

22. juni 2009 - 23:58 #15

Men hvorfor bruge regexp der :) en smule meningsløst..

Synes godt om

fcand Nybegynder

25. juni 2009 - 10:00 #16

madfarmer >> jeg forstod det nu godt og det virker helt perfekt! Jeg kom dog til at tænke på at det må være muligt at lave et anchor point så der automatisk scrolles ned til det store billede når man trykker op et thumb.

Jeg ved godt hvordan det skal gøres med almindelige links, men ikke når det er kodet i javascript og med onclick!??

Synes godt om

fcand Nybegynder

25. juni 2009 - 11:07 #17

Og kan man forresten udbygge scriptet således at man kan klikke på det store billede, for at downloade det i pdf, som ligger i en tredje mappe??

Synes godt om

madfarmer Nybegynder

25. juni 2009 - 11:10 #18

prøv

window.location.hash="anchorname";

Er ikke sikker på at det virker.. Men giv det et skud :)

Synes godt om

fcand Nybegynder

25. juni 2009 - 11:28 #19

Det virkede både med:

window.location="#anchorname";
og
window.location.hash="anchorname";

ved dog bare ikke om det virker for forvirrende, må jeg lige tage stilling til - Har du nogen kommetar til #17 ? :-)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS