Just nu i M3-nätverket
Gå till innehåll
Eforum är stängt för nya inlägg och svar sedan 20 juni 2022. Klicka för att läsa vad som hände och om alternativ.

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

Adam Gustafsson

Startad av Adam Gustafsson,
i Webbutveckling

Rekommendera Poster

Adam Gustafsson

Adam Gustafsson

Postad
Postad

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

 

Länk till kommentar
Dela på andra webbplatser
Anjuna Moon

Anjuna Moon

Postad
Postad

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>

 

Länk till kommentar
Dela på andra webbplatser
Adam Gustafsson

Adam Gustafsson

Postad
  • Trådskapare
Postad

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]

Länk till kommentar
Dela på andra webbplatser
Anjuna Moon

Anjuna Moon

Postad
Postad
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?

 

 

 

 

Länk till kommentar
Dela på andra webbplatser
Adam Gustafsson

Adam Gustafsson

Postad
  • Trådskapare
Postad

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

 

Länk till kommentar
Dela på andra webbplatser
Anjuna Moon

Anjuna Moon

Postad
Postad

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/

 

Länk till kommentar
Dela på andra webbplatser
PatrikA

PatrikA

Postad
Postad

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]

Länk till kommentar
Dela på andra webbplatser
Adam Gustafsson

Adam Gustafsson

Postad
  • Trådskapare
Postad

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

 

Länk till kommentar
Dela på andra webbplatser
  • 4 veckor senare...
Anjuna Moon

Anjuna Moon

Postad
Postad

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/

 

Länk till kommentar
Dela på andra webbplatser
Adam Gustafsson

Adam Gustafsson

Postad
  • Trådskapare
Postad

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.

 

 

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

Gå till ämneslista


×
×
  • Skapa nytt...