Popup vindue med pil taster

Du kan bruge dette script udviklet af roenving...
Det er godt, og jeg har selv brugt det...

http://roenving.users.whitehat.dk/index.html?/WD1ResizeTilBillede.html

/fromse

Så kan man f.eks.

<script language="javascript" type="text/javascript">
    var newWin = {'closed':true};
    function popWin(file){
      if(!newWin.closed)newWin.close();
      newWin=window.open("","ResizeBillede",'width=300,height=200,status=no');
      txt='<ht'+'ml><he'+'ad><ti'+'tle>'+file+'<\57ti'+'tle><style>a {font-family:verdana; font-size:12px; color="#000"}</style><scri';
      txt+='pt language="javascript" type="text/javascript">';
      txt+='function resPic(){h=document.images[0].scrollHeight;';
      txt+='w=document.images[0].scrollWidth;window.resizeTo(w+6,h+49);';
      txt+='l=(screen.availWidth-w-6)/2;t=(screen.availHeight-h-49)/2;window.moveTo(l,t);}<\57scri';
      txt+='pt><\57he'+'ad><bo'+'dy style="overflow:hidden;';
      txt+='border:0px;margin:0px"><a href="java script:window.close();"><i'+'mg src="'+file+'" style="top:0px;left:0px;border: 1px solid black;';
      txt+='" onload="resPic();" title="Luk vinduet"></a><\57bo'+'dy><\57ht'+'ml>';
      txt+='<br><center><a href="#" onclick=window.close() style="text-decoration: none">Luk vinduet</a></center><\57bo'+'dy><\57ht'+'ml>';
      newWin.document.write(txt);
      newWin.document.close();
    }
  </script>

-- og så:

    <td width="34%" align="center">
    <img src="hotellet02.JPG" style="border:0;width:160px;height:120;cursor:pointer;" onclick="popWin(this.href);"></td>

Hov ...

this.src og ikke this.href !-)

hvad gør den funktion?

Åbner et nyt vindue, indlæser det angivne billede, tilpasser vinduets størrelse til billedet og flytter det ind på midten af skærmen ...

For så at sikre, at et nyt vindue kommer foran, lukker den først et eventuelt åbent vindue ned !-)

Ahh... Ok... Kan se at du har brugt den jeg har lavet lidt om på... (med lukfunktionerne) :) hehe...

Jepz, det var nemmest, for jeg havde jo lige haft fat i den !-)

hehe... :)

Hej roenving.
Jeg takker tusind gange for hjælpen du er for sej, dette har jeg syslet med længe. Du skal have nogle point fra så end et svar, men kan du samtidigt hjælpe mig med 2 ting?

Hvad ændrer jeg hvis det ikke må poppeup i centrum, men derimod i venstre eller højre side?

Og hvis jeg godt kunne tænke mig at have piltaster i billedet eller foruden, for så derefter at kunne skifte mellem billederne i popup vinduet?

På forhånd tak!

Og til fromse, dit link har jeg set før, men jeg mangler alt for meget forståelse for
html. Og kan derfor ikke indsætte eller rette i det til mit behov.

Men tak aligevel

Du skal vælge enten at placere det til venstre eller til højre, til venstre skal vi fjerne en linje kode, til højre skal vi lave koden anderledes (og skal det være i top, midte eller bund ?-)

Pil-knapper er en del besværligere, fordi vi jo så skal kende de urler/billeder, de skal henvise til !-)

Jamen hvis man tager udgangspunkt i det første sæt billeder jeg har lavet, hvordan skal scriptet så se ud?

Husk at sende et svar for det andet så du kan få point

Eksempelvis:

<script language="javascript" type="text/javascript">
    var newWin = {'closed':true};
    function popWin(file,back,forward){
      if(!newWin.closed)newWin.close();
      newWin=window.open("","ResizeBillede",'width=300,height=200,status=no');
      txt='<ht'+'ml><he'+'ad><ti'+'tle>'+file+'<\57ti'+'tle><style>a {font-family:verdana; font-size:12px; color="#000"}</style><scri';
      txt+='pt language="javascript" type="text/javascript">';
      txt+='function resPic(){h=document.images[0].scrollHeight;';
      txt+='w=document.images[0].scrollWidth;window.resizeTo(w+6,h+49);';
      txt+='l=(screen.availWidth-w-6)/2;t=(screen.availHeight-h-49)/2;window.moveTo(l,t);}<\57scri';
      txt+='pt><\57he'+'ad><bo'+'dy style="overflow:hidden;';
      txt+='border:0px;margin:0px"><i'+'mg src="'+file+'" style="top:0px;left:0px;border: 1px solid black;';
      txt+='" onload="resPic();" onclick="self.close()" title="Luk vinduet"><br><center>';
      txt+= '<button style="visibility:'
      txt+=(back)?'visible" onclick="opener.popWin('+back+',,'+file+')':'hidden';
      txt+='">Tilbage<\57button><a href="#" onclick=window.close() style="text-decoration: none">Luk vinduet</a>';
      txt+= '<button style="visibility:'
      txt+=(forward)?'visible" onclick="opener.popWin('+forward+','+file+',)':'hidden';
      txt+='">Frem<\57button></center><\57bo'+'dy><\57ht'+'ml>';
      newWin.document.write(txt);
      newWin.document.close();
    }
  </script>

-- absolut utestet, og den kan så kun gå een frem eller tilbage, det bliver en hel del mere tricky, hvis den skal tage en længere serie, og kunne reagere på det, men det kan simplest udfra ovenstående laves til to klik frem eller tilbage, hvis man kalder med de to foregående og de to efterfølgende, ligesom kaldet til ovenstående skal ske med den foregående og efterføgende url:

    <td width="34%" align="center">
    <img src="hotellet01.JPG" style="border:0;width:160px;height:120px;cursor:pointer;" onclick="popWin(this.href,'hallen01.JPG','hotellet02.JPG');"></td>

-- hvis det skal virke uanset længde, skal man have adgang til at hente billeder fra en eller anden form for et array

Den siger der er en syntaksfejl

Sådan ser min side ud:

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Ny side 1</title>
<base target="_blank">

<script language="javascript" type="text/javascript">
    var newWin = {'closed':true};
    function popWin(file,back,forward){
      if(!newWin.closed)newWin.close();
      newWin=window.open("","ResizeBillede",'width=300,height=200,status=no');
      txt='<ht'+'ml><he'+'ad><ti'+'tle>'+file+'<\57ti'+'tle><style>a {font-family:verdana; font-size:12px; color="#000"}</style><scri';
      txt+='pt language="javascript" type="text/javascript">';
      txt+='function resPic(){h=document.images[0].scrollHeight;';
      txt+='w=document.images[0].scrollWidth;window.resizeTo(w+6,h+49);';
      txt+='l=(screen.availWidth-w-6)/2;t=(screen.availHeight-h-49)/2;window.moveTo(l,t);}<\57scri';
      txt+='pt><\57he'+'ad><bo'+'dy style="overflow:hidden;';
      txt+='border:0px;margin:0px"><i'+'mg src="'+file+'" style="top:0px;left:0px;border: 1px solid black;';
      txt+='" onload="resPic();" onclick="self.close()" title="Luk vinduet"><br><center>';
      txt+= '<button style="visibility:'
      txt+=(back)?'visible" onclick="opener.popWin('+back+',,'+file+')':'hidden';
      txt+='">Tilbage<\57button><a href="#" onclick=window.close() style="text-decoration: none">Luk vinduet</a>';
      txt+= '<button style="visibility:'
      txt+=(forward)?'visible" onclick="opener.popWin('+forward+','+file+',)':'hidden';
      txt+='">Frem<\57button></center><\57bo'+'dy><\57ht'+'ml>';
      newWin.document.write(txt);
      newWin.document.close();
    }
  </script>

</head>

<body link="#000000" vlink="#000000" alink="#000000" bgcolor="#186BAD">

<div align="center">
  <center>

<table border="10" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="45%" id="AutoNumber1" bordercolorlight="#000000" bordercolordark="#000000">
  <tr>
    <td width="34%" align="center">
    <img src="hallen01.JPG" style="border:0;width:160px;height:120px;cursor:pointer;" onclick="popWin(this.href,'toget03.JPG','hotellet01.JPG');"></td>
    <td width="34%" align="center">
    <img src="hotellet01.JPG" style="border:0;width:160px;height:120px;cursor:pointer;" onclick="popWin(this.href,'hallen01.JPG','hotellet02.JPG');"></td>
    <td width="34%" align="center">
    <img src="hotellet02.JPG" style="border:0;width:160px;height:120px;cursor:pointer;" onclick="popWin(this.href,'hotellet01.JPG','hotellet03.JPG');"></td>
  </tr>
  <tr>
    <td width="34%" align="center">
    <img src="hotellet03.JPG" style="border:0;width:160px;height:120px;cursor:pointer;" onclick="popWin(this.href,'hotellet02.JPG','hotellet04.JPG');"></td>
    <td width="34%" align="center">
    <img src="hotellet04.JPG" style="border:0;width:160px;height:120px;cursor:pointer;" onclick="popWin(this.href,'hotellet03.JPG','hotellet05.JPG');"></td>
    <td width="34%" align="center">
    <img src="hotellet05.JPG" style="border:0;width:160px;height:120px;cursor:pointer;" onclick="popWin(this.href,'hotellet04.JPG','hotellet06.JPG');"></td>
  </tr>
  <tr>
    <td width="34%" align="center">
    <img src="hotellet06.JPG" style="border:0;width:160px;height:120px;cursor:pointer;" onclick="popWin(this.href,'hotellet05.JPG','hotellet07.JPG');"></td>
    <td width="34%" align="center">
    <img src="hotellet07.JPG" style="border:0;width:160px;height:120px;cursor:pointer;" onclick="popWin(this.href,'hotellet06.JPG','hotellet08.JPG');"></td>
    <td width="34%" align="center">
    <img src="hotellet08.JPG" style="border:0;width:160px;height:120px;cursor:pointer;" onclick="popWin(this.href,'hotellet07.JPG','hotellet09.JPG');"></td>
  </tr>
  <tr>
    <td width="34%" align="center">
    <img src="hotellet09.JPG" style="border:0;width:160px;height:120px;cursor:pointer;" onclick="popWin(this.href,'hotellet08.JPG','hotellet10.JPG');"></td>
    <td width="34%" align="center">
    <img src="hotellet10.JPG" style="border:0;width:160px;height:120px;cursor:pointer;" onclick="popWin(this.href,'hotellet09.JPG','hotellet11.JPG');"></td>
    <td width="34%" align="center">
    <img src="hotellet11.JPG" style="border:0;width:160px;height:120px;cursor:pointer;" onclick="popWin(this.href,'hotellet10.JPG','toget01.JPG');"></td>
  </tr>
  <tr>
    <td width="34%" align="center">
    <img src="toget01.JPG" style="border:0;width:160px;height:120px;cursor:pointer;" onclick="popWin(this.href,'hotellet11.JPG','toget02.JPG');"></td>
    <td width="34%" align="center">
    <img src="toget02.JPG" style="border:0;width:160px;height:120px;cursor:pointer;" onclick="popWin(this.href,'toget01.JPG','toget03.JPG');"></td>
    <td width="34%" align="center">
    <img src="toget03.JPG" style="border:0;width:160px;height:120px;cursor:pointer;" onclick="popWin(this.href,'toget02.JPG','hallen01.JPG');"></td>
  </tr>
  </table>

  </center>
</div>

<p align="center">&nbsp;</p>

</body>

</html>

Overhovedet ikke usandsynligt, at jeg har lavet en tavetosse, kan du lægge et link ?-)

(billederne har jeg jo ikke uden en komplet url !-)

Jeg har ikke fået lagt det op på min side endnu.

Så det må jeg lige gøre når jeg kommer fra job, men
det du hjalp mig med tidligere er:
Min hjemmeside www.brian-hansen.dk og ligger på arbejde/leasy cup o.s.v.

så har jeg lagt html siden ind........arbejde/billeder/leasy cup...

Kan ikke få adgang, er der en detalje i urlen, du ikke har fået med ?-)

du bliver nok nødt til at bruge www.brian-hansen.dk og så derefter bruge menuen

Hrm, der mangler jo nogle gnyffer:

<script language="javascript" type="text/javascript">
    var newWin = {'closed':true};
    function popWin(file,back,forward){
      if(!newWin.closed)newWin.close();
      newWin=window.open("","ResizeBillede",'width=300,height=200,status=no');
      txt='<ht'+'ml><he'+'ad><ti'+'tle>'+file+'<\57ti'+'tle><style>a {font-family:verdana; font-size:12px; color="#000"}</style><scri';
      txt+='pt language="javascript" type="text/javascript">';
      txt+='function resPic(){h=document.images[0].scrollHeight;';
      txt+='w=document.images[0].scrollWidth;window.resizeTo(w+6,h+49);';
      txt+='l=(screen.availWidth-w-6)/2;t=(screen.availHeight-h-49)/2;window.moveTo(l,t);}<\57scri';
      txt+='pt><\57he'+'ad><bo'+'dy style="overflow:hidden;';
      txt+='border:0px;margin:0px"><i'+'mg src="'+file+'" style="top:0px;left:0px;border: 1px solid black;';
      txt+='" onload="resPic();" onclick="self.close()" title="Luk vinduet"><br><center>';
      txt+= '<button style="visibility:'
      txt+=(back)?'visible" onclick="opener.popWin(\47'+back+'\47,,\47'+file+'\47)':'hidden';
      txt+='">Tilbage<\57button><a href="#" onclick=window.close() style="text-decoration: none">Luk vinduet</a>';
      txt+= '<button style="visibility:'
      txt+=(forward)?'visible" onclick="opener.popWin(\47'+forward+'\47,\47'+file+'\47,)':'hidden';
      txt+='">Frem<\57button></center><\57bo'+'dy><\57ht'+'ml>';
      newWin.document.write(txt);
      newWin.document.close();
    }
  </script>

Hvad er gnyffer, for scriptet virker stadig ikke

De 2 script er jo også helt ens?

-- der er godt nok et par \47 mere (og prøv at lægge dem ind !-)

-- gnyffer er apostroffer benyttet som afgrænsning på tekststrenge: 'en tekst med gnyffer' ...

Nå så røg vi ud i noget der ligner 5 års hårdt arbejde. :-)
Men jeg kan godt se der er nogle /47 mere. Dem havde jeg overset.
Men det virker stadig ikke.

Det forstår jeg ik' li'e ...

-- prøv om der er fejl i opener.popWin-tingen ved at indsætte en alert('hej') som første linje i funktionen ...

Øhhh, helt præsist hvor og hvordan. Jeg er stået af for længst.

Jeg smider lige 200 point til dig senere, for dette stykke arbejde du har lagt.
Hvordan gør man egentligt det?

Nå har du givet op roenving....forstår dig egentligt godt.....
jeg er ikke den nemmeste til at forstå dette...
Men kan du ikke lige ligge et svar, så du kan slippe og så få dine point.
Du har allerede hjulpet mig utroligt meget.

Mvh. b.e.h.

Prøv at indsætte en linje i scriptet sådan:

    function popWin(file,back,forward){
      alert('hej');
      if(!newWin.closed)newWin.close();

-- for at afdække, om der er problemer i kontakten fra popuppen til scriptet !-)

Skulle det være interessant har jeg tidligere med udgangspunkt i jes's script lavet lidt tilføjelser, bl.a. alt tekst, centreret åbning, zoom ind og ud med plus/minus taster:

<script type="text/JavaScript">
<!--
// autoSizePowerNodesPop('image1.jpg',300,200,'');
var powerNodesAutoSize=null;
function autoSizePowerNodesPop(file,w,h,altText,extra) {
  var extra=(extra==null||extra=='')?'scrollbars=0':extra;
  str='height='+h+',width='+w+','+extra;if(parseInt(navigator.appVersion)>3){
  str+=',left='+(screen.width-w)/2+',top='+parseInt((screen.height -h)/3);}
  if(powerNodesAutoSize){if(!powerNodesAutoSize.closed){powerNodesAutoSize.close();}}
  powerNodesAutoSize=window.open(file,"pn_Win",str);
  var _opera=(navigator.userAgent.toLowerCase().indexOf("opera")!=-1),_size=(_opera)?32:80;
  txt='<ht'+'ml><he'+'ad><ti'+'tle>Image<\57ti'+'tle><scr'+'ipt type="text/javascript">';
  txt+='function resize(){hh=document.images[0].scrollHeight;ww=document.images[0].scrollWidth;';
  txt+='window.resizeTo(ww+6,hh+'+_size+');}function keyDown(k){switch(k){case 107:';
  txt+='document.images["pn_img"].width+=40;resize();break;case 109:document.images["pn_img"].';
  txt+='width-=40;resize();break;}}<\57scr'+'ipt><\57he'+'ad><bo'+'dy style="overflow:hidden;';
  txt+='margin:0px;padding:0px;" onkeydown="keyDown(event.keyCode);"><ta'+'ble border="0"';
  txt+=' cellspacing="0" cellpadding="0"><t'+'r><t'+'d><i'+'mg src="'+file+'" style="cursor:';
  txt+='hand;border:0px;" onload="resize();" onclick="self.close()" alt="'+altText+'';
  txt+='" name="pn_img" id="pn_img"><\57t'+'d><\57t'+'r>';if(!_opera){txt+='<t'+'r><t'+'d';
  txt+=' align="center" style="padding-top:4px;font:tahoma;font-size:11px;color:#000">';
  txt+='

• Zoom ind
  • Zoom ud<\57t'+'d><\57t'+'r><\57tab'+'le><\57bo'+'dy><\57ht'+'ml>';}
    
    powerNodesAutoSize.document.write(txt);powerNodesAutoSize.document.close();
  

}
//-->
</script>

og

<a href="java script:;" onclick="autoSizePowerNodesPop('<%# Container.ImageEnlargedUrl %>',500,400,'<%# Container.Description %>','');"><img src="<%# Container.ImageUrl %>" width="58" height="58" border="0"></a>

Kan ses live her: http://www.surf.hk.dk/cms.ashx/Billede%20Arkiv/2004-06-10.aspx (klik på thumbnails)

Jamen den popper up nu med et hej og der efter med linje 15 fejl nægtet adgang

Husk nu også selv at lægge et svar, og behold de fleste point selv !-)

-- els velbekomme '-)

Nej pointene er dine du har hjulpet mig meget, jeg takker

-- og så tak for point ;~}