Avatar billede krusnof Nybegynder
24. maj 2003 - 10:38 Der er 37 kommentarer og
1 løsning

Åbne billede

Jeg har en side med nogle billeder, som alle skal kunne åbnes vha javascript. Det skal foregå på den måde at når man klikker på billede så åbner det op, men ikke i en HTML fil! Jeg mener der er et script der kan åbne et browser-vindue og derefter tilpasse det til billedet! Er der nogle der kan hjælpe mig??

MVH

Kristian
Avatar billede pelkjaer Nybegynder
24. maj 2003 - 10:41 #1
Du kan bare åbne dem i en popup der indeholder:

function autoSize() {
  intwidth = document.images[0].width +50;
  intheight = document.images[0].height +50;
  window.resizeTo(intwidth, intheight);
}

og så fyr det af på body'en
Avatar billede pelkjaer Nybegynder
24. maj 2003 - 10:43 #2
function autoSize() {
  intwidth = document.images[0].width +50;
  intheight = document.images[0].height +50;
  window.resizeTo(intwidth, intheight);
}
autoSize();

burde også kunne gøre det.
Avatar billede jakobclausen Nybegynder
24. maj 2003 - 10:44 #3
<-- Sættes ind mellem <head> og </head> -->

<Script Language="JavaScript">
// Script Source: CodeLifter.com
// Copyright 2003
// Do not remove this notice.

// SETUPS:
// ===============================

// Set the horizontal and vertical position for the popup

PositionX = 100;
PositionY = 100;

// Set these value approximately 20 pixels greater than the
// size of the largest image to be used (needed for Netscape)

defaultWidth  = 500;
defaultHeight = 500;

// Set autoclose true to have the window close automatically
// Set autoclose false to allow multiple popup windows

var AutoClose = true;

// Do not edit below this line...
// ================================
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
function popImage(imageURL,imageTitle){
if (isNN){imgWin=window.open('about:blank','',optNN);}
if (isIE){imgWin=window.open('about:blank','',optIE);}
with (imgWin.document){
writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
writeln('width=100-(document.body.clientWidth-document.images[0].width);');
writeln('height=100-(document.body.clientHeight-document.images[0].height);');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');     
writeln('window.innerWidth=document.images["George"].width;');writeln('window.innerHeight=document.images["George"].height;}}');
writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
else writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
writeln('<img name="George" src='+imageURL+' style="display:block"></body></html>');
close();       
}}
</script>

<-- Sættes ind mellem <body> og </body> -->


<a href="java script:popImage('stortbillede.gif','Some Title')">
<img src="lillebillede.gif" alt="Se stort billlede">
</a>

Se eksempel: www.bokaj.dk/eksperten/gribben/
http://www.codelifter.com/main/javascript/autosizeimagepopup.html
Avatar billede krusnof Nybegynder
24. maj 2003 - 10:45 #4
se nu er jeg en spasser til javascript etc, så hvor skal det stå henne, og vil det være muligt så at åbne flere billeder af gangen? de åbner ikke i samme vindue?
Avatar billede pelkjaer Nybegynder
24. maj 2003 - 10:47 #5
Nej et billede ad gangen da blot åbner alle dine billeder i et dokument indeholdende ovenstående.
Avatar billede jakobclausen Nybegynder
24. maj 2003 - 10:49 #6
krusnof >> jeg har skrevet i koden hvor du skal sætte det ind henne
Avatar billede krusnof Nybegynder
24. maj 2003 - 11:03 #7
Dit eksempel jakobclausen virker ikke på en MAC, der bliver hele billedet ikke vist og den kan ikke skrive æ,ø,å!
Avatar billede jakobclausen Nybegynder
24. maj 2003 - 11:14 #8
krusnof >> Det er meget muligt, har aldrig prøvet på en mac
Avatar billede pelkjaer Nybegynder
24. maj 2003 - 11:18 #9
Avatar billede krusnof Nybegynder
24. maj 2003 - 11:20 #10
den åbner samme billede! og desuden er der en stor hvid kant rundt om på PC! har ikke lige tjekket den på MAC endnu!
Avatar billede pelkjaer Nybegynder
24. maj 2003 - 11:21 #11
ja den hvide kant skal være der :o) kan du ikke lide den er den let at fjerne.

Hvad mener du med at den åbner "samme billede"
Avatar billede pelkjaer Nybegynder
24. maj 2003 - 11:23 #12
Ahh I see
Avatar billede jakobclausen Nybegynder
24. maj 2003 - 11:24 #13
Hvor mange bruger MAc idag?

Jeg tænker på om det betyder meget at det ikek virker på mac ?
Avatar billede roenving Novice
24. maj 2003 - 11:25 #14
>>pelkjaer

hvorfor har du ikke lavet den som noget onclick på billedet -- så ville du _meget_ nemt kunne undgå det der 'den åbner det samme billede' ...
Avatar billede pelkjaer Nybegynder
24. maj 2003 - 11:31 #15
roenving>> I know - det var lige det jeg skulle til at lave om :o)
Avatar billede pelkjaer Nybegynder
24. maj 2003 - 11:39 #16
Således gjort
Avatar billede roenving Novice
24. maj 2003 - 11:52 #17
Hvorfor i hele osv. har du ikke bare overført ved hjælp af this

<img onclick="viewFullSizeImage(this);return false;" src="pic1.jpg" alt="Klik for stor billede" width="50" height="50" border="0" style="cursor:pointer">
Avatar billede krusnof Nybegynder
24. maj 2003 - 11:54 #18
jakobclausen >> Hvor mange bruger Mac? Den anden computer jeg sidder på er Mac og alle mine kunder og de reproanstalter og trykkerier jeg bruger sidder alle med Mac. Selvom du ikke tror det, så sidder de fleste og ser min side på en Mac!

pelkjaer >> kan godt lide at du lige har rettet det, men der er stadig en fejl (har ikke tjekket siden på Mac endnu). Når man åbner det ene billede og derefter det andet mens det første billede er åbent, så åbner den samme billede igen og det er nu umuligt at åbne det andet overhovedet!
Avatar billede krusnof Nybegynder
24. maj 2003 - 11:55 #19
Forresten så gælder det kun den ene vej! Hvis du åbner nr. 2 billede først, så er der ingen problemer!
Avatar billede pelkjaer Nybegynder
24. maj 2003 - 12:12 #20
roenving>>Well I see your point, jeg kan bare umiddelbart ikke greje den. Oprindeligt har jeg jo angivet ID i den første funktion createThePopWin().

Jeg har så forsøgt i den funktion at give id sådan:

this.str = document.getElementById("theImg").src;

og så

function viewFullSizeImage(id) {
  var test = new createThePopWin();
  test.str = document.getElementById(id).src;
  //osv
}

og

onclick="viewFullSizeImage(this);return false;"

Du kan sikkert hjælpe :)
Avatar billede krusnof Nybegynder
24. maj 2003 - 12:14 #21
Jeg fatter ikke en skid, men hvis I kan fixe det således at det virker på både Mac og PC, så er der flere point på vej!
Avatar billede roenving Novice
24. maj 2003 - 12:15 #22
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/JavaScript">
<!--
function createThePopWin(billede) {
  a = "<scr"+"ipt";
  b = "src=autofit.js></scr"+"ipt>";
  str = billede.src;
  arr = new Array();
  arr[0] = "" + a + " " + b + "" ;
  arr[1] = "margin:0px;padding:0px;";
  arr[2] = str;
  return arr;
}

imgWin = 0;
function viewFullSizeImage(billede) {
  what = createThePopWin(billede);
  if (imgWin) {
    if (!imgWin.closed) {
      imgWin.close();
    }
  }
  imgWin = window.open("about:blank", "view", "width=300,height=250,left=0,top=0,resizable=yes");
  imgWin.document.open("text/html", "replace");
  imgWin.document.write('<html>\n<head>\n<title>Faktisk størrelse</title>\n' + what[0] + '\n</head>\n<body style="' + what[1] + '" onload="autoSize();">\n<table height="100%" align="center" cellspacing="0" cellpadding="0" border="0">\n<tr>\n<td valign="middle">\n<table cellspacing="0" cellpadding="0" border="0">\n<tr>\n<td><a href="#" onclick="self.close();"><img src="' + what[2] + '" alt="Klik på billedet for at lukke vinduet" border="0"></a></td>\n</tr>\n</table>\n</td>\n</tr>\n</table>\n</body>\n</html>');
  imgWin.document.close();
  return imgWin;
}
//-->
</script>
</head>
<body>
<img onclick="viewFullSizeImage(this);return false;" src="pic1.jpg" alt="Klik for stor billede" width="50" height="50" border="0" style="cursor:pointer">
<br>
<img onclick="viewFullSizeImage(this);return false;" src="pic2.jpg" alt="Klik for stor billede" width="50" height="50" border="0" style="cursor:pointer">
</body>
</html>
Avatar billede pelkjaer Nybegynder
24. maj 2003 - 12:16 #23
hehe - jeg hænger mig for meget i getElementById - det var jo lige til :o)
Avatar billede pelkjaer Nybegynder
24. maj 2003 - 12:18 #24
Avatar billede roenving Novice
24. maj 2003 - 12:20 #25
jeps ;O)
Avatar billede krusnof Nybegynder
24. maj 2003 - 13:00 #26
nu ser det ud af noget, og jeg skal nok tjekke det på en mac lidt senere, men en ting mangler: Er det ikke muligt at have begge vinduer åbne på én gang?
Avatar billede krusnof Nybegynder
24. maj 2003 - 13:09 #27
Har lige tjekket på Mac! Den åbner ikke billederne i den rigtige størrelse. Nærmere noget der ligner 300x250! Desuden laver den en kæmpe fejl: Hvis man prøver at åbne det ene billede og derefter det andet (altså mens det første stadig er åbent), så bomber IE!
Avatar billede pelkjaer Nybegynder
24. maj 2003 - 13:12 #28
Er sidste problem på mac?

Det forstår jeg nu ikke, fordi det tager flg. højde for:

    if (!imgWin.closed) {
      imgWin.close();
    }

Størrelsen er let at tilpasse - du kan i autofit lave forskellige browserchecks, og så smide x antal pixel på.
Avatar billede krusnof Nybegynder
24. maj 2003 - 13:17 #29
Jeg begynder nu at tvivle på at dette er den rette metode at gøre det på! Jeg har en del små thumbs som vises på en side! Når jeg så klikker på dem, så skal de kunne poppe op og være normal størrelse! Dvs. jeg har small1.jpg og large1.jpg! Er der så evt. en nemmere metode, andet end en HTML-side til dem alle sammen?
Avatar billede krusnof Nybegynder
24. maj 2003 - 13:19 #30
jakobclausens script minder mere om det jeg gerne vil have! bare det også virker på Mac!
Avatar billede pelkjaer Nybegynder
24. maj 2003 - 15:06 #31
Det her er sq' da noget smartere hvis jeg selv skal sige det, det er langt mere automatiseret - nu skal vi bare ha det til at virker perfekt :)

Start med at udskifte funktionen createThePopWin(pic) med:

function createThePopWin(pic) {
  a = "<scr"+"ipt";
  b = "src=autofit.js></scr"+"ipt>";
  strtemp = pic.src;
  str = strtemp.replace(".jpg", "_stor.jpg");
  arr = new Array();
  arr[0] = "" + a + " " + b + "" ;
  arr[1] = "margin:0px;padding:0px;";
  arr[2] = str;
  return arr;
}

Nu skal du så bare sørge for, at når du indsætter en thumnail helt som før, så findes der også en med "_stor" efter.

Dvs. har du en thumb der hedder "pic.jpg" så skal du også have en stor der hedder "pic_stor.jpg" - så klarer scriptet resten.

---

Det med at vinduet ikke passer helt i Mac, kan jeg af gode grunde ikke teste, men prøv følgende istedet for det oprindelige autofit script:

function autoSize() {
  if (navigator.appVersion.indexOf("Mac") != -1) {
    intwidth = document.images[0].width +50;
    intheight = document.images[0].height +50;
    window.resizeTo(intwidth, intheight);
  } else {
    intwidth = document.images[0].width;
    intheight = document.images[0].height;
    window.resizeTo(intwidth, intheight);
  }
}

Det der så sker når en mac læser popup'en, er at den lægger 50 pixels til bredde og højde - disse kan du så tilpasse så du mener det er korrekt.
Avatar billede krusnof Nybegynder
25. maj 2003 - 11:01 #32
Jamen jeg giver dig ret i at det er et skide smart script! men da de fleste brugere der ser siden er Mac-brugere, så opstår der et lille problem! Billederne er i forskellige størrelser, gør det så noget?
Avatar billede pelkjaer Nybegynder
25. maj 2003 - 11:52 #33
Nææ hvad skulle det gøre?

Hvis du mener at popup'en størrelse ikke er perfekt, kan du jo justere det her:

if (navigator.appVersion.indexOf("Mac") != -1) {
    intwidth = document.images[0].width +50;
    intheight = document.images[0].height +50;
    //osv
Avatar billede krusnof Nybegynder
27. maj 2003 - 22:36 #34
ja jeg er lidt forvirret nu! vil du ikke lige sætte det fuldendte script op med alt hvad der kræves?!
Avatar billede krusnof Nybegynder
26. oktober 2003 - 01:34 #35
virker ikke...
Avatar billede roenving Novice
26. oktober 2003 - 07:11 #36
Avatar billede krusnof Nybegynder
26. oktober 2003 - 10:14 #37
Virker den i Netscape og på Mac?
Avatar billede roenving Novice
26. oktober 2003 - 10:20 #38
Den virker i Mozilla, men tilpasningen er ikke helt perfekt ...

-- jeg har desværre ikke fået nogle kommentarer om Mac !-|
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