Notifikationer

Markér alle som læst Log ud

bongii Nybegynder

04. juni 2008 - 12:22 Der er 13 kommentarer og
1 løsning

Næste og forrige billede

Jeg har lavet et lille galleri, men mangler et par funktioner som jeg ikke ved hvordan jeg får på.

1) En knap til næste billede.
2) En knap til forrige billede
3) En 2px rød border på det thumbnail der vises i toppen.

http://www.movievizion.dk/upload/galleri.html

Er der en der har en idé til hvordan jeg kommer igang?

Synes godt om

w13 Novice

04. juni 2008 - 14:13 #1

For at kunne det, bør du nok have dine billeder i et array i JavaScript, og da dit galleri p.t. kun er HTML, bliver det nok lidt svært.

Synes godt om

w13 Novice

04. juni 2008 - 14:29 #2

Rammen opnåes vel ved at ændre:

<td><img src="images/48348642.JPG" NAME="large"></td>

til:

<td><img style="border:2px solid red" src="images/48348642.JPG" name="large"></td>

Synes godt om

mclemens Nybegynder

04. juni 2008 - 21:18 #3

Som w13 siger så er din side stort set kun html, derfor vil en onclick næste forrige bliver lidt lang eksempel:

<b onclick="elms=document.getElementsByTagName('img');elm=document.getElementsByName('large')[0];tmp=elm.src.split('/');for(i=1;i<elms.length;i++){tmp2=elms[i].src.split('/');if(tmp2[tmp2.length-1]=='t'+tmp[tmp.length-1]){tmp=((i-1)>0)?i-1:elms.length-1;tmp=elms[tmp].src.split('/');tmp[tmp.length-1]=tmp[tmp.length-1].substr(1);elm.src=tmp.join('/');i=elms.length;}}">Forrige</b>

<b onclick="elms=document.getElementsByTagName('img');elm=document.getElementsByName('large')[0];tmp=elm.src.split('/');for(i=1;i<elms.length;i++){tmp2=elms[i].src.split('/');if(tmp2[tmp2.length-1]=='t'+tmp[tmp.length-1]){tmp=(i+2<elms.length)?i+1:1;tmp=elms[tmp].src.split('/');tmp[tmp.length-1]=tmp[tmp.length-1].substr(1);elm.src=tmp.join('/');i=elms.length;}}">Næste</b>

Synes godt om

mclemens Nybegynder

04. juni 2008 - 21:20 #4

Hmm, marker og kopier fra . til .

.
<b onclick="elms=document.getElementsByTagName('img');elm=document.getElementsByName('large')[0];tmp=elm.src.split('/');for(i=1;i<elms.length;i++){tmp2=elms[i].src.split('/');if(tmp2[tmp2.length-1]=='t'+tmp[tmp.length-1]){tmp=((i-1)>0)?i-1:elms.length-1;tmp=elms[tmp].src.split('/');tmp[tmp.length-1]=tmp[tmp.length-1].substr(1);elm.src=tmp.join('/');i=elms.length;}}">Forrige</b>

<b onclick="elms=document.getElementsByTagName('img');elm=document.getElementsByName('large')[0];tmp=elm.src.split('/');for(i=1;i<elms.length;i++){tmp2=elms[i].src.split('/');if(tmp2[tmp2.length-1]=='t'+tmp[tmp.length-1]){tmp=(i+2<elms.length)?i+1:1;tmp=elms[tmp].src.split('/');tmp[tmp.length-1]=tmp[tmp.length-1].substr(1);elm.src=tmp.join('/');i=elms.length;}}">Næste</b>
.

Synes godt om

bongii Nybegynder

05. juni 2008 - 14:04 #5

Det er kun et eksempel. Siden er asp, men vil helst undgå refresh. Kigger lige på dine eksempler.

Synes godt om

bongii Nybegynder

05. juni 2008 - 14:16 #6

Clemens det er skide godt det du har lavet. Det virker perfekt. Havde aldrig selv fundet ud af at lave det på den måde.

Tager den alle <img> elementer på siden og viser dem? Får jeg så ikke problemer hvis jeg laver omkringliggende grafik?

For at skifte bordercolor til rød på det viste billede, kunne det måske være smart hvis jeg lavede en funktion der køres ved onclick og som tjekker og skifter elementer. Eller noget :)

Hvordan kan det være, at man skal klikke på et af thumbs nailsene før forrige og næste virker. Kan jeg lave noget så de virker ved page load?

Synes godt om

mclemens Nybegynder

05. juni 2008 - 14:47 #7

"Tager den alle <img> elementer på siden og viser dem? Får jeg så ikke problemer hvis jeg laver omkringliggende grafik?" Joh, det gør du ... der mangler nogle id's på siden
for kun at ramme billeder i galleriet.

"Hvordan kan det være, at man skal klikke på et af thumbs nailsene før forrige og næste virker. Kan jeg lave noget så de virker ved page load?" Ja, det er fordi at det billede der vises fra start af ikke er et af de store thumbnails billeder - dermed ved den ikke hvad der er forrige eller næste billede.

Jeg ville nok sætte et id på selve galleriet og så køre scriptet derfra,
kigger lige på det i senere i dag hvis der ikke kommer en lignende løsning
fra en anden inden (skal lige sætte en emhætte op...)

Synes godt om

mclemens Nybegynder

05. juni 2008 - 19:14 #8

Hvad med denne ?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
function ael(elm,evt,f){
if(elm.addEventListener)elm.addEventListener(evt, function(){eval(f)}, false);
else if(elm.attachEvent)elm.attachEvent("on"+evt, function(){eval(f)});
}

ael(window,"load","wload();");

var gal="";

function wload(){
if(elm=document.getElementById("galleri"))galleri(elm,0);
}

function galleri(elms,t){
if(elms=="adm"){tmp1=0;
for(i=0;i<gal.length;i++){
elms=gal[i].getAttribute("src").split("/");elms[elms.length-1]=elms[elms.length-1].substr(1);
tmp2=document.getElementById("gallerix");
if(tmp1){tmp2.setAttribute("src",elms.join("/"));i=gal.length;}
else if(elms.join("/")==tmp2.getAttribute("src")){tmp1=1;i=(t+i+1==gal.length)?-1:t+i<-1?gal.length-2:t+i;}
else if(i+1==gal.length&&!tmp1){i=-1;tmp1=1;}
}
}else if(t){
elms=elms.split("/");elms[elms.length-1]=elms[elms.length-1].substr(1);
document.getElementById("gallerix").setAttribute("src",elms.join("/"));
}else{gal=elms.getElementsByTagName("img");
for(i=0;i<gal.length;i++){
ael(gal[i],"click","galleri('"+gal[i].getAttribute('src')+"',1);");
}
ael(document.getElementById("galleriplus"),"click","galleri('adm',0);");
ael(document.getElementById("galleriminus"),"click","galleri('adm',-2);");
}
}
</script>

<style type="text/css">
#gallerix {border: 2px solid #f00;}
</style>

</head><body>

<img src="images/48348642.JPG" id="gallerix">

<br><br>

<div id="galleri">
<img src="images/t97022647.JPG">
<img src="images/t30268062.JPG">
<img src="images/t43248493.JPG">
<img src="images/t61530251.JPG">
<img src="images/t97478283.JPG">
<img src="images/t6974459.JPG">
<img src="images/t52490873.JPG">
<img src="images/t36980451.JPG">
<img src="images/t97566587.JPG">
<img src="images/t28231884.JPG">
</div>

<b id="galleriplus">Næste</b>
<b id="galleriminus">Forrige</b>

</body></html>

Synes godt om

mclemens Nybegynder

05. juni 2008 - 19:16 #9

Hmm, kast lige denne op i style også:
#galleri img, #galleriplus, #galleriminus {cursor:pointer;}

Synes godt om

bongii Nybegynder

06. juni 2008 - 09:02 #10

Verdensklasse.!
Smider du et svar?

Lige et lille tillægsspm.. Det var menuingen at det er det lille thuimbnail der skal have border bår det vises oppe i fremvisningen, jeg kan ikke lige se hvordan det skulle kunne lade sig gøre.

Synes godt om

mclemens Nybegynder

06. juni 2008 - 11:02 #11

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
function ael(elm,evt,f){
if(elm.addEventListener)elm.addEventListener(evt, function(){eval(f)}, false);
else if(elm.attachEvent)elm.attachEvent("on"+evt, function(){eval(f)});
}

ael(window,"load","wload();");

var gal="";

function wload(){
if(elm=document.getElementById("galleri"))galleri(elm,0);
}

function galleri(elms,t){
if(elms=="adm"){tmp1=0;
for(i=0;i<gal.length;i++){
elms=gal[i].getAttribute("src").split("/");elms[elms.length-1]=elms[elms.length-1].substr(1);
tmp2=document.getElementById("gallerix");
if(tmp1){tmp2.setAttribute("src",elms.join("/"));gal[i].setAttribute("id","galleriact");i=gal.length;}
else if(elms.join("/")==tmp2.getAttribute("src")){gal[i].removeAttribute("id");tmp1=1;i=(t+i+1==gal.length)?-1:t+i<-1?gal.length-2:t+i;}
else if(i+1==gal.length&&!tmp1){i=-1;tmp1=1;}
}
}else if(t){
elms=gal[elms];
if(elm=document.getElementById("galleriact"))elm.removeAttribute("id");
elms.setAttribute("id","galleriact");elms=elms.getAttribute("src");
elms=elms.split("/");elms[elms.length-1]=elms[elms.length-1].substr(1);
document.getElementById("gallerix").setAttribute("src",elms.join("/"));
}else{gal=elms.getElementsByTagName("img");
for(i=0;i<gal.length;i++){
ael(gal[i],"click","galleri("+i+",1);");
}
ael(document.getElementById("galleriplus"),"click","galleri('adm',0);");
ael(document.getElementById("galleriminus"),"click","galleri('adm',-2);");
}
}
</script>

<style type="text/css">
#galleriact {border:2px solid #f00;}
#galleri img, #galleriplus, #galleriminus {cursor:pointer;}
</style>

</head><body>

<img src="images/48348642.JPG" id="gallerix">

<br><br>

<div id="galleri">
<img src="images/t97022647.JPG">
<img src="images/t30268062.JPG">
<img src="images/t43248493.JPG">
<img src="images/t61530251.JPG">
<img src="images/t97478283.JPG">
<img src="images/t6974459.JPG">
<img src="images/t52490873.JPG">
<img src="images/t36980451.JPG">
<img src="images/t97566587.JPG">
<img src="images/t28231884.JPG">
</div>

<b id="galleriplus">Næste</b>
<b id="galleriminus">Forrige</b>

</body></html>

Synes godt om

bongii Nybegynder

06. juni 2008 - 11:27 #12

Du er en troldmand !
Håber det gik godt med at hænge emhætten op :)

Synes godt om

mclemens Nybegynder

06. juni 2008 - 14:36 #13

Hehe, tak for point :)

Emhætte ophæng gik fint, bortset fra at
der var en (heldigvis ikke bærende) lægter
lige der - hvor hullet i muren skulle være.

Synes godt om

bongii Nybegynder

06. juni 2008 - 14:43 #14

Det var godt at høre :) God weekend !

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
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	3	27/04/202620:09	28/04/202621:05
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

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