webForumDet fria alternativet
Logga in / Bli medlem

Javascriptpopup, anpassar sig till bild.

JavaScript

20 svar · 569 visningar · startad av tody

todyMedlem sedan mars 200520 inlägg
Frågan#1

Hej

Har ett problem jag skulle vilja ha hjälp med;

Har ett bildgalleri där man kan klicka på en bild så öppnas den i
ett popupfönster, men jag vill att detta popupfönster ska
anpassa sig till bildens storlek, alltså fall bilden är på width=450,
height="600" så ska popuprutan bli lika stor. Är bilden bara
width="50", height="150" så ska popuprutan bli så stor.

Hur löser man de?

Så här ser det ut nu http://tody.1go.dk/bilduppladdning/bildvis.php klicka tex på
bilden test så ser ni att inte hela bilden visas i popupfönstret.

Så här ser min javascriptskod ut:

<script language="JavaScript">
<!-- Begin
function popUp(url) {
props=window.open(url, 'poppage', 'toolbar=no, scrollbars=no,
 location=0, statusbars=no, menubar=no, resizable=no,
 width=200, height=300, left = 100, top = 100');
}
</script>
cypryss avatarcyprysMedlem sedan dec. 20003 563 inlägg
#2

Det enda sättet jag löst just det problemet på är genom att läsa av bredden på bilden m.h.a. serverspråket jag använt. (ASP, .NET, php)

Sen skrivit in det direkt i javascriptkoden.

solbulleMedlem sedan mars 20015 287 inlägg
#3

http://www.webforum.nu/showthread.php?s=&postid=393254#post393254

Finns en uppsjö svar om du söker lite.

todyMedlem sedan mars 200520 inlägg
#4

Okej, hur löste du det då? Kan lite PHP själv.

todyMedlem sedan mars 200520 inlägg
#5

Missade ditt inlägg. Har försökt söka men inte riktigt vetat vad
jag ska söka på, får ursäkta fall jag tar upp redan löst tråd.

Kollade på den andra tråden men förstod inte riktigt hur jag ska
infoga koden så det blir rätt, har försökt men de blir fel.

Koden som stod i andra tråden:

<body onLoad="storlek()"  onresize="storlek()" >

<script language="JavaScript" type="text/javascript">
<!--
function storlek(){
resizeTo(document.images['foo'].width,document.images['foo'].height)
}
//-->
</script>

Java-scriptskoden ska jag lägga längst upp mellan head taggarna förstår jag men sedan den andra koden?

bossseMedlem sedan juni 2003771 inlägg
#6

Här ett som jag länkat direkt till bilder på webben!

<html> 
<head> 
<script type="text/javascript"> 
function bild(filename,winTitle) 
{ 
var myImage = new Image(); 
myImage.src=filename; 
properties='height=0,width=0'; 
var imgWindow = window.open('','',properties); 
html = '<html>';
html += '<head>';
html += '<title>'+winTitle+'</title>'; 
html += '<style type=text/css> body {overflow:hidden;} </style>';
html += '</head>'; 
html += '<body onBlur="window.close()" topmargin="0" leftmargin="0" >'; 
html += '<img src="'+myImage.src+'" onLoad="resizeTo (document.bild.width,document.bild.height); moveTo(50,200);" name="bild" OnClick="window.close();">'; 
html += '</body>'; 
html += '</html>'; 
imgWindow.document.write(html); 
} 
</script> 
</head> 
<body> 
Detta funkar väl som du tänkt? <br>
Stäng popupbilden genom att klicka var du vill på den. <br>
Funka i vart fall i Ie och Firefox,
<p align=right> 
<a href="javascript:bild(' [url]http://www.nordensark.se/bilder/leo.jpg[/url] ')"> 
<img src=" [url]http://www.nordensark.se/bilder/leo.jpg[/url]" height="50" width="50" alt="bilbeskrivning"></a> 
<a href="javascript:bild(' [url]http://ftp.sunet.se/pub/pictures/animals/birds/duck2.jpg[/url]')"> 
<img src=" [url]http://ftp.sunet.se/pub/pictures/animals/birds/duck2.jpg[/url] " height="50" width="50" alt="bilbeskrivning"></a> 
<a href="javascript:bild('http://www.huntingground.freeserve.co.uk/scripts/pic04.jpg')"> 
<img src=" [url]http://www.huntingground.freeserve.co.uk/scripts/pic04.jpg[/url] " height="50" width="50" alt="bilbeskrivning"></a> 
<a href="javascript:bild('http://lava.nationalgeographic.com/pod/pictures/normal/05751_44.jpg')"> 
<img src=" [url]http://lava.nationalgeographic.com/pod/pictures/normal/05751_44.jpg[/url]" height="50" width="50" alt="bilbeskrivning"></a> 
</p> 
</body> 
</html>
todyMedlem sedan mars 200520 inlägg
#7

Förstår inte hur jag ska få din koda att fungera bossse :/.
Någon annan som har någon kod eller kan beskriva för mig hur
jag ska lösa det.

Som sagt denna koden stod i en annan tråd:

<body onLoad="storlek()"  onresize="storlek()" >

<script language="JavaScript" type="text/javascript">
<!--
function storlek(){
resizeTo(document.images['foo'].width,document.images['foo'].height)
}
//-->
</script>

Förstår inte vart jag ska lägga in <body onLoad="storlek()"
onresize="storlek()" >, ska det läggas i body taggen på den
sidan mankan klicka på en bild för att den ska bli större? Den
andra kodsnutten förstår jag att jag ska lägga längst upp mellan
headtaggarna, men som sagt hur gör jag med bodykoden?

J.N.s avatarJ.N.Medlem sedan apr. 20031 660 inlägg
#8

HEJ!

Det ska ligga på den sidan som du öppnar; det är ju den sidan du vill anpassa genom att kalla på funktionen.

Du har inte missat att skriva name="foo" på bilden?
Annars lär du få ett scriptfel.

todyMedlem sedan mars 200520 inlägg
#9

Hej igen,

Så här ser min kod ut nu, kanske blir lättare om jag lägger upp allt att förstå:

<html>
<head>
<LINK REL="stylesheet" HREF="style.css" TYPE="text/css">

<script language="JavaScript" type="text/javascript">
<!--
function storlek(){
resizeTo(document.images['foo'].width,document.images['foo'].height)
}
//-->
</script>

</head>
<body onLoad="storlek()"  onresize="storlek()" >

<?PHP
$objConn = include('connect.php');

$sql = "SELECT * FROM $tabell ORDER BY datum DESC"; 
$result = mysql_query($sql);
?>

<table>
<?
while($rad = mysql_fetch_array($result)) {
?>

<td class="bildgalleri" bgcolor="#F8F8F8" onMouseover="this.bgColor='#FFFFFF'" onMouseout="this.bgColor='#F8F8F8'">

<A HREF="javascript:popUp('bilder/<?php echo $rad['filenamn'] ?>')">
<img name="foo" class="bildgalleri2" width="120" height="120" src="bilder/<?php echo $rad['filenamn'] ?>"></A>
<br>
<? echo $rad['rubrik']; ?>
  </td>

<?
}
?>
</table>
</body>
</html>

Hoppas ni vet vad jag gjort för fel :/

J.N.s avatarJ.N.Medlem sedan apr. 20031 660 inlägg
#10

HEJ!

Jag citerar mig själv:

J.N. skrev:

Det ska ligga på den sidan som du öppnar; det är ju den sidan du vill anpassa genom att kalla på funktionen.

Denna sida, eftersom du loopar genom ett recordset, visar ju alla bilder.

todyMedlem sedan mars 200520 inlägg
#11

Jo, men jag har ju ingen specifik sida för att visa en bild, utan den kommer ju automatiskt när man klickar på länken.

J.N.s avatarJ.N.Medlem sedan apr. 20031 660 inlägg
#12

HEJ!

tody skrev:

Jo, men jag har ju ingen specifik sida för att visa en bild, utan den kommer ju automatiskt när man klickar på länken.

Ja, nu ser jag ju!

bilder/<?php echo $rad['filenamn']?>
blir ju
bilder/bild.jpg

Och det är en helt annan sak!
Du öppnar ju endast bilden, inte en sida!
En bildsida är ju endast en bild, ingen kod av något slag alls.

Gör om länken till en php/html/asp-sida, lägg till javascriptet där istället, så blir det bättre!

todyMedlem sedan mars 200520 inlägg
#13

Men går det inte ordna utan att behöva göra en sida till. För då blir det ju ingen popupfunktion direkt, måste väll gå att lösa på något sätt?

todyMedlem sedan mars 200520 inlägg
#14

bossse skrev:

Här ett som jag länkat direkt till bilder på webben!

<html> 
<head> 
<script type="text/javascript"> 
function bild(filename,winTitle) 
{ 
var myImage = new Image(); 
myImage.src=filename; 
properties='height=0,width=0'; 
var imgWindow = window.open('','',properties); 
html = '<html>';
html += '<head>';
html += '<title>'+winTitle+'</title>'; 
html += '<style type=text/css> body {overflow:hidden;} </style>';
html += '</head>'; 
html += '<body onBlur="window.close()" topmargin="0" leftmargin="0" >'; 
html += '<img src="'+myImage.src+'" onLoad="resizeTo (document.bild.width,document.bild.height); moveTo(50,200);" name="bild" OnClick="window.close();">'; 
html += '</body>'; 
html += '</html>'; 
imgWindow.document.write(html); 
} 
</script> 
</head> 
<body> 
Detta funkar väl som du tänkt? <br>
Stäng popupbilden genom att klicka var du vill på den. <br>
Funka i vart fall i Ie och Firefox,
<p align=right> 
<a href="javascript:bild(' [url]http://www.nordensark.se/bilder/leo.jpg[/url] ')"> 
<img src=" [url]http://www.nordensark.se/bilder/leo.jpg[/url]" height="50" width="50" alt="bilbeskrivning"></a> 
<a href="javascript:bild(' [url]http://ftp.sunet.se/pub/pictures/animals/birds/duck2.jpg[/url]')"> 
<img src=" [url]http://ftp.sunet.se/pub/pictures/animals/birds/duck2.jpg[/url] " height="50" width="50" alt="bilbeskrivning"></a> 
<a href="javascript:bild('http://www.huntingground.freeserve.co.uk/scripts/pic04.jpg')"> 
<img src=" [url]http://www.huntingground.freeserve.co.uk/scripts/pic04.jpg[/url] " height="50" width="50" alt="bilbeskrivning"></a> 
<a href="javascript:bild('http://lava.nationalgeographic.com/pod/pictures/normal/05751_44.jpg')"> 
<img src=" [url]http://lava.nationalgeographic.com/pod/pictures/normal/05751_44.jpg[/url]" height="50" width="50" alt="bilbeskrivning"></a> 
</p> 
</body> 
</html>

Testade att köra den koden som du skrev bossse, men hur gör jag ifall jag vill komma ner i mappen bilder/, har aldrig pysslat med javascript så vet inte riktigt hur jag ska greja det.

Försökte med denna koden, men vill inte funka:

<script type="text/javascript">
function bild(filename,winTitle)
{
var myImage = new Image();
myImage.src=filename;
properties='height=0,width=0';
var imgWindow = window.open('','',properties);
html = '<html>';
html += '<head>';
html += '<title>'+winTitle+'</title>';
html += '<style type=text/css> body {overflow:hidden;} </style>';
html += '</head>';
html += '<body onBlur="window.close()" topmargin="0" leftmargin="0" >';
html += '<img src="bilder/'+myImage.src+'" onLoad="resizeTo (document.bild.width,document.bild.height); moveTo(50,200);" name="bild" OnClick="window.close();">';
html += '</body>';
html += '</html>';
imgWindow.document.write(html);
}
</script>

nitro2k01s avatarnitro2k01Medlem sedan aug. 20039 340 inlägg
#15

Rekommenderar följande ändringar:

<script type="text/javascript"> 
function bild(filename,winTitle) 
{ 
var myImage = new Image(); 
myImage.src=[b]"bilder/"[/b]+filename; 
properties='left=50,height=200'; 
// OBS! Ta bort mellarummet mellan about och : blank
var imgWindow = window.open('about:blank','_blank',properties); 
html = '<html>';
html += '<head>';
html += '<title>'+winTitle+'</title>'; 
html += '<style type=text/css> body {overflow:hidden; margin: 0px;} </style>';
html += '</head>'; 
html += '<body onblur="self.close()" topmargin="0" leftmargin="0" >'; 
html += '<img src="'+myImage.src+'" onload="resizeTo (this.width,this.height);" name="bild" onclick="self.close();" />'; 
html += '</body>'; 
html += '</html>'; 
imgWindow.document.write(html); 
} 
</script>

Var i strukturen finns "bilder"?

/Redigerat

todyMedlem sedan mars 200520 inlägg
#16

Nu funkar det nästan perfekt!

Bara det att inte riktigt hela bilden kommer med, kolla på http://tody.1go.dk/bilduppladdning/bildvis.php , klicka på valfri bild så ser du/ni att inte riktigt hela bilden syns.

Vad kan vara fel?

Koden ser nu ut så här:

<html>
<head>
<LINK REL="stylesheet" HREF="style.css" TYPE="text/css">

<script type="text/javascript"> 
function bild(filename,winTitle) 
{ 
var myImage = new Image(); 
myImage.src="bilder/"+filename;
properties='height=0,width=0'; 
var imgWindow = window.open('','',properties); 
html = '<html>';
html += '<head>';
html += '<title>'+winTitle+'</title>'; 
html += '<style type=text/css> body {overflow:hidden;} </style>';
html += '</head>'; 
html += '<body onBlur="window.close()" topmargin="10" leftmargin="10" bottommargin="10">'; 
html += '<img src="'+myImage.src+'" onLoad="resizeTo (document.bild.width,document.bild.height); moveTo(50,200);" name="bild" OnClick="window.close();">'; 
html += '</body>'; 
html += '</html>'; 
imgWindow.document.write(html); 
} 
</script> 

</head>
<body>

<?PHP
$objConn = include('connect.php');

$sql = "SELECT * FROM $tabell ORDER BY datum DESC"; 
$result = mysql_query($sql);
?>

<table>
<?
while($rad = mysql_fetch_array($result)) {
?>

<td class="bildgalleri" bgcolor="#F8F8F8" onMouseover="this.bgColor='#FFFFFF'" onMouseout="this.bgColor='#F8F8F8'">

<A HREF="javascript:bild('<?php echo $rad['filenamn'] ?>')">
<img name="bild" target="_blank" class="bildgalleri2" width="120" height="120" src="bilder/<?php echo $rad['filenamn'] ?>"></A>
<br>
<? echo $rad['rubrik']; ?>
  </td>

<?
}
?>
</table>
</body>
</html>
bossseMedlem sedan juni 2003771 inlägg
#17

Ändra dina marginaler till:

topmargin="0" leftmargin="0"

bottommargin kan väl du ta bort helt.

todyMedlem sedan mars 200520 inlägg
#18

Men var tvungen att lägga till det så bilden kom utanför kanten något, men hela bilden syns ju inte ändå.

Alltså längst ner försvinner endel av bilden.

bossseMedlem sedan juni 2003771 inlägg
#19

Testa då med dessa ändringar på tre rader i scriptet.

html += '<style type=text/css> body {overflow:hidden;} #bild {margin-left:5px; margin-top:5px; margin-right:5px; margin-bottom:5px}</style>';

html += '<body onBlur="window.close()" id="bild">';
 
html += '<img src="'+myImage.src+'"  onLoad="resizeTo (document.bild.width+20,document.bild.height+40); moveTo(50,200);" name="bild" OnClick="window.close();">';
todyMedlem sedan mars 200520 inlägg
#20

Tack bossse, nu funkar det precis så som jag vill, tack!

273 ms totalt · 4 externa anrop · v20260731065814-full.6fe65c25
121 ms — deklarationer (db)
0 ms — hämta statistik (cache)
148 ms — hämta tråd, inlägg och bilagor (db)
120 ms — ändringar (db)