Just nu i M3-nätverket
Jump to content

Bild i pop-up-fönster med automatisk storlek?


Adam Gustafsson

Recommended Posts

Adam Gustafsson

Jag har ett stort gäng bilder på min hemsida som jag skulle vilja visa i ett pop-up-fönster. Bilderna är av olika storlekar, och jag undrar ifall man kan få javascript att se hur stora bilderna är så att fönstrets storlek anpassas automatiskt efter hur stor bilden är?

Kan man kanske lägga i i filens namn hur stor den är och få scriptet att läsa av det...?

 

Tacksam för diskussion och hjälp.

 

Hälsningar

Adam

 

Link to comment
Share on other sites

Ett sätt är som sagt att göra som du sa, att sätta bildstorleken i filnamnet. Här är ett exempel:

 

<html>
<head>
<title>Untitled</title>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function Popup(img) {
	strSrc=img.src;
	idx1=strSrc.indexOf('_');
	idx2=strSrc.indexOf('.',idx1);
	arrDimensions=strSrc.substring(idx1+1,idx2).split("x");
	var oWin=window.open(strSrc,'','width='+arrDimensions[0]+',height='+arrDimensions[1]);	
}
//-->
</SCRIPT>
</head>
<body>
<img src="img/Bild1_330x50.gif" onmouseover="this.style.cursor='hand';" onclick="Popup(this);">

</body>
</html>

 

Link to comment
Share on other sites

Adam Gustafsson

Det går åt rätt håll och jag får be om ursäkt att jag var lite otydlig. Jag skulle vilja ha en liten bild att klicka på, en ikon eller "thumbnail" som det kallas, och när man klickar så skickas den stora bilden upp i ett pop-up-fönster. Går det att implementera med den här sköna koden?

 

Jag kommer dessutom att ha flera bilder, i olika storlekar, på en och samma sida, men det verkar ju inte spela någon roll när man lägger upp koden så här... eller?

 

En sista fråga, kan man i pop-up-fönsterskoden (långt ord, säkert inte grammatiskt korrekt) ange att det inte ska vara någon marginal runt bilden som visas, eller är det kört eftersom man inte publicerar en HTML-sida där man kan hålla det lite mer stramt?

 

Hälsningar

Adam

 

[inlägget ändrat 2004-08-24 06:49:52 av Adam Evertsson]

Link to comment
Share on other sites

ag kommer dessutom att ha flera bilder, i olika storlekar, på en och samma sida,

 

Ska dina thumbnails vara lika stora eller ska de ha samma relativa storlek till varandra som full-size-bilderna?

 

 

 

 

Link to comment
Share on other sites

Adam Gustafsson

Jag hade tänkt att till veckans hemsideprojekt ha en ikon för att visa att det finns en bild i sammanhanget, men tar faktiskt på samma gång gärna förslag på hur man hanterar thubmnails till bilder som är olika stora (man har ju fler idéer på gång som bygger på samma funktion).

 

Hälsningar

Adam

 

Link to comment
Share on other sites

Ok, har gjort om scriptet. Lägg in dina bilder som jag gjort så skalar scriptet ned bilderna enligt skalfaktorn ThumbScale. Har även lagt till lite marginal för popupen, genom att skala upp fönsterstorleken till ImgScale*bildstorleken.

 

[log]

<html>
<head>
<title>Untitled</title>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
var ThumbScale=0.2;
var ImgScale=1.05;
function Popup(img) {
strSrc=img.src;
arrDim=GetDimensions(img);
var oWin=window.open(strSrc,'','menubar=no,resizable=no,scrollbars=no,titlebar=no,toolbar=no,width='+arrDim[0]*ImgScale+',height='+arrDim[1]*ImgScale); 
}
function GetDimensions(img) {
strSrc=img.src;
idx1=strSrc.indexOf('_');
idx2=strSrc.indexOf('.',idx1);
return(strSrc.substring(idx1+1,idx2).split("x"));
}
function SetThumbs() {
oGallery=document.getElementById("gallery");
for (node in oGallery.childNodes) {
	el=oGallery.childNodes[node];
	if (el.tagName=='IMG') {
		arrDim=GetDimensions(el);
		w=arrDim[0]*ThumbScale;
		h=arrDim[1]*ThumbScale;
		el.style.width=w;
		el.style.height=h;
	}
}	
oGallery.style.visibility='visible';
}
//-->
</SCRIPT>
</head>
<body onload="SetThumbs();">
<div id="gallery" style="visibility:hidden;width:800px;height:400px;">
<img src="img/Bild1_685x527.gif"  onmouseover="this.style.cursor='hand';" onclick="Popup(this);">
<img src="img/Bild1_685x527.gif"  onmouseover="this.style.cursor='hand';" onclick="Popup(this);">
<img src="img/Bild1_685x527.gif"  onmouseover="this.style.cursor='hand';" onclick="Popup(this);">
</div>
</body>
</html>

[/log]

 

AnjunaMoon

____________________________________________________________

/* There is nothing more permanent than a temporary solution... */

Stoppa mjukvarupatenten nu! http://www.ffii.se/

 

Link to comment
Share on other sites

Jag har ett script jag brukar använda som förutom sätter fönstrets storlek efter bilden också gör det möjligt att dra i fönstrets kanter och förstora/förminska/stretcha bilden.

 

[log]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

<HEAD>

<title>Bild</title>

<style>

BODY { MARGIN: 0px }

</style>

<script language="JavaScript">

function ZoomPic()

{

document.all["Objekt"].style.width=window.document.body.clientWidth

document.all["Objekt"].style.height=window.document.body.clientHeight

}

 

function CheckW()

{

window.resizeTo((document.img.width + 12),(document.img.height + 30));

window.focus();

}

</script>

</HEAD>

<body onload="CheckW();" onresize="ZoomPic()">

<div align="center">

<a href="javascript:self.close();"><img name="img" src="" & Request.QueryString["filepath"] & "" id="Objekt" alt="Ändra storlek på bilden genom att dra i kanterna!" border="0"></a>

</div>

</body>

</HTML>[/log]

Min kodsnutt använder tar sökvägen till bilden i en querystringen för att visa bilden på sidan, har använt detta exempel i asp och asp.net så du måste kanske ändra om lite för att det ska fungera för dig. Eventuellt använda javascript för att hämta ut sökvägen om du inte använder asp.

 

[inlägget ändrat 2004-08-24 10:12:39 av Patrik Ahlberg]

Link to comment
Share on other sites

Adam Gustafsson

Det funkar finfint! Tack så mycket, Anjuna Moon.

Men för att inte avsluta den här trevliga tråden så styr jag tillbaks till din förra fråga och vrider lite på den.

Om jag nu skulle vilja ha en liten ikon (på varenda bild på hela sidan), typ 16x16 pixlar, för att visa att det finns en bild och att om du klickar på ikonen så kommer bilden fram (vars storlek styrs enligt filnamnet som du redan visat). Går detta att fixa, och vad som är ännu mer intressant, orkar du med att hjälpa mig med det?

 

Morniga hälsningar

Adam

 

Link to comment
Share on other sites

  • 4 weeks later...

Hej igen Adam, sent omsider har jag nu redigerat in mitt script i din kod (mailade rubbet precis). Hör av dig om du har frågor kring det.

 

AnjunaMoon

____________________________________________________________

/* There is nothing more permanent than a temporary solution... */

Stoppa mjukvarupatenten nu! http://www.ffii.se/

 

Link to comment
Share on other sites

Adam Gustafsson

Toppenunderbart!

 

Nu är det precis så som jag vill ha det. Jag bugar och bockar, poäng utdelas naturligtvis. För er som är nyfikna på hur det ser ut i verkligheten kan titta på skriptet in action - surfa till http://www.intresseklubben.nu/ssg/landskap_skane.htm.

Klickar man på kamera-ikonen nu så poppar det upp en fönster precis som jag har efterlyst det.

 

Tills nästa gång - simma lugnt!

 

 

Adam E.

 

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...