todyMedlem sedan mars 200520 inlägg 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>
cyprysMedlem sedan dec. 20003 563 inlägg 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 todyMedlem sedan mars 200520 inlägg Okej, hur löste du det då? Kan lite PHP själv.
todyMedlem sedan mars 200520 inlägg 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 2003772 inlägg 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 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.Medlem sedan apr. 20031 660 inlägg 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 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.Medlem sedan apr. 20031 660 inlägg 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 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.Medlem sedan apr. 20031 660 inlägg 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 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
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>
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 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 2003772 inlägg Ändra dina marginaler till:
topmargin="0" leftmargin="0"
bottommargin kan väl du ta bort helt.
todyMedlem sedan mars 200520 inlägg 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 2003772 inlägg 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 Tack bossse, nu funkar det precis så som jag vill, tack!
