Søg
Avatar billede agersten Nybegynder
16. juli 2005 - 10:34 Der er 30 kommentarer og
1 løsning

Pop up vindue med automatisk tilpasning efter billede

Jeg er hobbyfotograf og har en hjemmeside primært med billeder. Jeg arbejder i Frontpage og har brugt deres færdig-gallerier. Jeg vil gerne have gallerier, hvor man har en oversigt (thumbnails) og når man så klikker på billedet skal det poppe op i et vindue, der har tilpasset sig billedet.
Jeg ved spøgsmålet er blevet stillet før, men jeg forstår altså ikke svarene, fordi jeg er totalt novice, så jeg skal virkelig have det bøjet i neon!

På forhånd tak for hjælpen!

/Julie Agersten
Avatar billede roenving Novice
16. juli 2005 - 10:52 #1
Prøv at kigge på: http://roenving.users.whitehat.dk/index.html?/WD1ResizeTilBillede.html

-- og stil så flere spørgsmål, når du har nogen !-)
Avatar billede agersten Nybegynder
16. juli 2005 - 12:07 #2
Altså du siger, den skal sættes ind i head sektionen, så jeg har sat den sådan: <head>
&lt;script language="javascript" type="text/javascript"&gt;<BR>    function
popWin(file){<BR>      newWin=window.open("","ResizeBillede","width=300,height=200,status=no");<BR>      txt='&lt;ht'+'ml&gt;&lt;he'+'ad&gt;&lt;ti'+'tle&gt;Resize
til billede&lt;\57ti'+'tle&gt;&lt;scri';<BR>      txt+='pt language="javascript"
type="text/javascript"&gt;';<BR>      txt+='function
resPic(){h=document.images[0].scrollHeight;';<BR>      txt+='w=document.images[0].scrollWidth;window.resizeTo(w+6,h+32);}&lt;\57scri';<BR>      txt+='pt&gt;&lt;\57he'+'ad&gt;&lt;bo'+'dy
style="overflow:hidden;';<BR>      txt+='border:0px;margin:0px"&gt;&lt;i'+'mg
src="'+file+'" style="top:0px;left:0px;border:0px;';<BR>      txt+='"
onload="resPic();"&gt;&lt;\57bo'+'dy&gt;&lt;\57ht'+'ml&gt;';<BR>      newWin.document.write(txt);<BR>      newWin.document.close();<BR>    }<BR>  &lt;/script&gt;
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
Korrekt?
Den måde jeg skal lave links på - hvor sættes det ind henne, hvordan og hvorledes? Den skal jeg altså ha' skåret godt ud ;)

/Julie
Avatar billede roenving Novice
16. juli 2005 - 12:16 #3
Du skal ikke kopiere koden fra kilden i popup-vinduet med kilden, men direkte fra vinduet, f.eks. til kode-vindue eller Notepad ...

-- og som der står i Vis kode-vinduet laver du links, f.eks. sådan:

<a href="#" onclick="popWin('img/billede.jpg');return false;"><img src="img/billede.jpg" width="150" alt="Klik for fuld størrelse"></a>

Altså skal koden se sådan ud:
<!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">

  <script language="javascript" type="text/javascript">
    function popWin(file){
      newWin=window.open("","ResizeBillede","width=300,height=200,status=no");
      txt='<ht'+'ml><he'+'ad><ti'+'tle>Resize til billede<\57ti'+'tle><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+32);}<\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:0px;';
      txt+='" onload="resPic();"><\57bo'+'dy><\57ht'+'ml>';
      newWin.document.write(txt);
      newWin.document.close();
    }
  </script>


<title>Tomt dokument</title>
</head>
<body>
<a href="#" onclick="popWin('img/billede.jpg');return false;"><img src="img/billede.jpg" width="150" alt="Klik for fuld størrelse"></a>
</body>
</html>

-- og jeg gjorde også din kode noget mere kompatibel ved at indsætte en korrekt doctype samt rette til en tegntabel, som ikke gør folk afhængige af en bestemt slags computer !-)
Avatar billede agersten Nybegynder
16. juli 2005 - 13:07 #4
Nu ser de tud som følger:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="javascript" type="text/javascript">
    function popWin(file){
      newWin=window.open("","ResizeBillede","width=300,height=200,status=no");
      txt='<ht'+'ml><he'+'ad><ti'+'tle>Resize til billede<\57ti'+'tle><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+32);}<\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:0px;';
      txt+='" onload="resPic();"><\57bo'+'dy><\57ht'+'ml>';   
newWin.document.write(txt);    
newWin.document.close();
{ 
</script>

<title>Tomt dokument</title>
</head>
<body>

<div align="center">
  <!--webbot bot="PhotoAlbum" U-Include="photogallery/photo16239/real.htm" clientside TAG="BODY" --></div>
</body>

</html>

Men hvordan gør jeg med links'ne når det er et automatisk Frontpage galleri?
Og din sidste kommentar - he he, okay, hvilke linier er det du har ændret og er det noget jeg bør gøre på alle mine sider? Du kan evt. se min hjemmeside - men hav venligst i tankerne, at det er første gang jeg har lavet en sådan ;) www.julie-agersten.dk
Avatar billede roenving Novice
16. juli 2005 - 13:16 #5
Er det de eneste images, du har på siden, for så kan vi jo sætte funktionen på onload:

Indsæt dette i javascript-blokken:

window.onload = function(){
  var imgs = document.getElementsByTagName("IMG");
  for(i=0;i<imgs.length;i++){
    imgs[i].onclick = function(){popWin(this.src);};
  }
}
Avatar billede agersten Nybegynder
16. juli 2005 - 13:22 #6
De eneste billeder? *GG* jeg synes nu, der er rigeligt, der er da flere hundrede!
Hvor skal jeg præcis sætte det nye ind? *rødme*
Avatar billede roenving Novice
16. juli 2005 - 13:36 #7
Ind i javascript-blokken, f.eks. lige før </script>-tagget !-)

-- og tag så og lav den character-encoding om til den internationale standard iso-8859-1 i stedet for windows-1252 ...

-- og tilstedeværelsen af no-right-click-scripts signalerer et uprofessionelt website ...
Avatar billede agersten Nybegynder
16. juli 2005 - 13:50 #8
Ok til de første to, tak for det :)

Grunden til at jeg har deaktiveret højreklik er meget simpel: jeg tager billeder af heste og har kæmpe problemer med småpiger, der stjæler billederne til deres virtuelle stalde! Jeg er udemærket klar over at man sagtens kan få fat i billedet alligevel, men sorterer føromtalte tøser fra... Og så har jeg sørget for at smække mit navn på det hele, så ingen er i tvivl... Men det er altså grunden! :)
Avatar billede agersten Nybegynder
16. juli 2005 - 14:13 #9
Men anyways hvordan med de gallerier jeg bruger og linket? og iøvrigt hvordan får du dine point? *GG*
Avatar billede roenving Novice
16. juli 2005 - 14:20 #10
Hvordan har du fået båret dig ad med at vende afslutning-tuborgen  ?-)

-- men blokken kan f.eks. se således ud:

<script language="javascript" type="text/javascript">
window.onload = function(){
  var imgs = document.getElementsByTagName("IMG");
  for(i=0;i<imgs.length;i++){
    imgs[i].onclick = function(){popWin(this.src);};
  }
}

    function popWin(file){
      newWin=window.open("","ResizeBillede","width=300,height=200,status=no");
      txt='<ht'+'ml><he'+'ad><ti'+'tle>Resize til billede<\57ti'+'tle><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+32);}<\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:0px;';
      txt+='" onload="resPic();"><\57bo'+'dy><\57ht'+'ml>';
      newWin.document.write(txt);
      newWin.document.close();
    }

</script>
Avatar billede roenving Novice
16. juli 2005 - 14:22 #11
-- og et svar skal du da også have, velbekomme '-)
Avatar billede agersten Nybegynder
16. juli 2005 - 14:49 #12
Altså det ser sådan ud nu:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="javascript" type="text/javascript">
window.onload = function(){
  var imgs = document.getElementsByTagName("IMG");
  for(i=0;i<imgs.length;i++){
    imgs[i].onclick = function(){popWin(this.src);};
  }
}

    function popWin(file){
      newWin=window.open("","ResizeBillede","width=300,height=200,status=no");
      txt='<ht'+'ml><he'+'ad><ti'+'tle>Resize til billede<\57ti'+'tle><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+32);}<\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:0px;';
      txt+='" onload="resPic();"><\57bo'+'dy><\57ht'+'ml>';
      newWin.document.write(txt);
      newWin.document.close();
    }

</script>

<title>Tomt dokument</title>
</head>
<body>

<div align="center">
  <!--webbot bot="PhotoAlbum" U-Include="photogallery/photo16239/real.htm" clientside TAG="BODY" --></div>
</body>

</html>

Men den siger at siden ikke kan vises, når jeg trykker på en thumb. Hvad har jeg glemt? *GG*
Avatar billede roenving Novice
16. juli 2005 - 14:55 #13
Prøv at lægge det op et sted ...
Avatar billede agersten Nybegynder
16. juli 2005 - 15:13 #14
*GG* jeg fandt ud af problemet, havde flyttet billederne... Men der er stadig noget galt! Prøv min hjemmeside om et par min og tryk på linket "test" på forsiden
Avatar billede roenving Novice
16. juli 2005 - 15:44 #15
Lader til, at vi må arbejde en anelse mere, for webbotten indsætter åbenbart noget vis stor-kode, og laver en minimeret udgave, så onloaden kunne være sådan:

window.onload = function(){
  var imgs = document.getElementsByTagName("IMG");
  for(i=0;i<imgs.length;i++){
    var href = imgs[i].parentNode.href;
    imgs[i].parentNode.href = "java script:void(0)";
    imgs[i].onclick = function(){popWin(href);};
  }
}

-- måske skal der arbejdes endnu mere, men prøv lige ...
Avatar billede agersten Nybegynder
16. juli 2005 - 18:36 #16
LOL, prøv at klikke på forskellige billeder - det virker med størrelsen men det er det samme billede, der åbner hver gang! ;)
Avatar billede roenving Novice
16. juli 2005 - 18:38 #17
Okay, så virker den sådan som jeg frygtede, men så må vi jo hente den on-the-fly:

window.onload = function(){
  var imgs = document.getElementsByTagName("IMG");
  for(i=0;i<imgs.length;i++){
    imgs[i].parentNode.onclick = function(){return false;};
    imgs[i].onclick = function(){popWin(this.parentNode.href);};
  }
}
Avatar billede agersten Nybegynder
16. juli 2005 - 18:45 #18
Den virker efter hensigten men beskærer desværre billederne en del forneden!
Avatar billede roenving Novice
16. juli 2005 - 18:49 #19
Det gør den da ikke hos mig ?-)
Avatar billede agersten Nybegynder
16. juli 2005 - 18:58 #20
hos mig skærer den af så hestene mister fødderne eller min signatur mangler noget. Det var da mærkeligt!
Avatar billede roenving Novice
16. juli 2005 - 19:02 #21
Jeg gætter på, at det er statusbaren, der ikke er taget højde for, så du kan prøve dig lidt frem med tallet 32 i denne linje:

txt+='w=document.images[0].scrollWidth;window.resizeTo(w+6,h+32);}<\57scri';

-- et gæt er, at du skal op omkring 54-56 i stedet ...
Avatar billede agersten Nybegynder
16. juli 2005 - 19:02 #22
Kan jeg iøvrigt fjerne titlen, så vinduet ikke hedder "resize til billede". Altså jeg mener, om der sker noget ved, at jeg fjerner det i javascriptet? Desuden tager det min computer rigtig lang tid at få det "store" billede frem, men det er nok bare fordi den er røv dårlig - HD'en er gået ned, så den skal skiftes, død belastende at arbejde med *GG*
Avatar billede agersten Nybegynder
16. juli 2005 - 19:05 #23
Jeg skrev 56, det giver en minimal lille hvid linie hos mig, knapt synlig, hvordan ser den ud hos dig?
Avatar billede agersten Nybegynder
16. juli 2005 - 19:06 #24
ændrede det lige til 55, nu er det perfekt :D
Avatar billede roenving Novice
16. juli 2005 - 19:07 #25
Nej, du kan bare udskifte den tekst med noget andet !-)

-- min browser er indstillet til at respektere, at der står status=no ...
Avatar billede agersten Nybegynder
16. juli 2005 - 19:09 #26
OK, jamen så skal du have tusind tak for alt din hjælp, nu vil jeg gå i gang med en større opdatering! :D
Hav en rigtig god weekend!

Hilsen Julie
Avatar billede agersten Nybegynder
16. juli 2005 - 23:06 #27
Hej igen

Håber du læser dette - er nemlig stødt på et lille problem: alle de sider hvor jeg har gallerier og det nye javascript, har jeg også en tilbage-knap, men den virker ikke mere. Den åbner som om, jeg har trykket på en thumbnail og fører derfor ikke tilbage til foregående side :(
Avatar billede roenving Novice
16. juli 2005 - 23:13 #28
Så må vi jo undtage det billede (det var iøvrigt derfor jeg nævnte det der med at de var de eneste !-)

Billeder/Ikoner/home.gif

window.onload = function(){
  var imgs = document.getElementsByTagName("IMG");
  for(i=0;i<imgs.length;i++){
    if(imgs[i].src.indexOf('Billeder/Ikoner')>-1)
      continue;
    imgs[i].parentNode.onclick = function(){return false;};
    imgs[i].onclick = function(){popWin(this.parentNode.href);};
  }
}
Avatar billede agersten Nybegynder
17. juli 2005 - 00:18 #29
Skal jeg sætte Billeder/Ikoner/home.gif ind nogen steder? For som det er nu, kan man ikke se den lille pil, når jeg oploader... Jeg fjernede den nemlig på alle siderne *G*
Avatar billede roenving Novice
17. juli 2005 - 00:24 #30
Det jeg har gjort i ovenstående er simpelthen at sige, alle billeder, som i stien har en hevisning til Billede/Ikoner skal springes over ...

-- og jeg var jo nødt til at finde ud af filnavnet, da det sandsynligvis var det eneste, man med sikkerhed kunne finde, så det var egentlig en fejl, at jeg ikke fik det slettet igen !-)
Avatar billede agersten Nybegynder
17. juli 2005 - 00:27 #31
aah så det skal jeg ikke gøre mere ved... bare mærkeligt jeg ikke kan se pilen når jeg uploader... nå men jeg må jo prøve mig lidt frem ;) endnu engang tak!
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
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 5 27/04/202620:09 03/05/202613:59
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 15:10 WINDOWS KOMPABILITET Af snestrup2000 i Windows
22/0720:19 DVB T2 tuner med optagefunktion Af ErikHg i Andet hardware
20/0716:00 Fildeling mellem 2 windows 11 systemer Af knudg i Windows
20/0714:16 Smartwatch med faldalarm og sos Af hkv i Fitness & Smartwatches
20/0711:23 System til bordreservation Af Strawberry i PHP
White papers
Flere white papers »