Pop up immagine auto resize: eccovi un buon codice!

**Tr|k`Tr4k** · 02-03-2005, 18:12

Visto che sono stato una settimana in cerca di un codice buono per poter far aprire un pop up con le dimensioni esatte di immagini diverse, ora vi posto il codice che sto usando ed e' ottimo.

PRO: puoi rinominare le foto come vuoi tu
E poi, come succedeva a me per tutti gli altri codici usati, non si mangia parte dell'immagine e non crea lo scroll verticale
CONTRO: sul pop up se clicchi su ingrandisci si ingrandisce la finestra quindi vedi lo sfondo bianco da sotto.

Ringrazion un mio amico che me l'ha inviato per posta:

PAGINA popup.htm

codice:

<HTML> 
<HEAD> 
 <TITLE>Fit the Pic Script</TITLE> 
 <script language='javascript'> 
   var arrTemp=self.location.href.split("?"); 
   var picUrl = (arrTemp.length>0)?arrTemp[1]:""; 
   var NS = (navigator.appName=="Netscape")?true:false; 

     function FitPic() { 
       iWidth = (NS)?window.innerWidth:document.body.clientWidth; 
       iHeight = (NS)?window.innerHeight:document.body.clientHeight; 
       iWidth = document.images[0].width - iWidth; 
       iHeight = document.images[0].height - iHeight; 
       window.resizeBy(iWidth, iHeight); 
       self.focus(); 
     }; 
 </script> 
</HEAD> 
<BODY bgcolor="#000000" onload='FitPic();' topmargin="0"  
marginheight="0" leftmargin="0" marginwidth="0"> 
 <script language='javascript'> 
 document.write( "[img]" + picUrl + "[/img]" ); 
 </script> 
</BODY> 
</HTML>

PAGIINA IN CUI INSERISCI IL LINK PER APRIRE IL POP UP

codice:

<HTML> 
 <HEAD> 
   <TITLE>The Image Gallery</TITLE> 
   <script language="Javascript"> 
   function PopupPic(sPicURL) { 
     window.open( "popup.htm?"+sPicURL, "",  
     "resizable=1,HEIGHT=200,WIDTH=200"); 
   } 
   </script> 
 </HEAD> 
<BODY bgcolor="#FFFFFF"> 
   Image 1
 
   Image 2
 
   Image 3
 
</BODY> 
</HTML>

Spero vi sarà utile,
Roberto

**eloderma** · 07-06-2005, 17:00

ottimo script, grazie

attenzione però che nel tuo post si legge:

Image 1

mentre va scritto:

Image 1

senza spazion fra "java" e "script".

ci ho perso un quarto d'ora

**Piede** · 06-09-2006, 14:29

ciao...
ho usato questo script e funziona perfettamente...
volevo solo sapere se c'è un metodo per far si che si chiudano automaticamente le img quandi si aprono delle altre...
così da nn avere tante finestre aperte...
grazie!

**Xinod** · 06-09-2006, 15:11

codice:

   <script language="Javascript"> 
   function PopupPic(sPicURL) { 
     var popup=window.open( "popup.htm?"+sPicURL, "ingrandita",  
     "resizable=1,HEIGHT=200,WIDTH=200");
     popup.focus();
   } 
   </script>

se definisci il secondo parametro del window.open assegni un nome alla finestra (nel caso specifico "ingrandita")
ulteriori chiamate a quel punto non aprono ulteriori finestre ma ne aggiornano il contenuto

popup.focus riporta in primo piano la popup nel caso sia rimasta precedentemente aperta e finita in secondo piano

ciao

**pietro09** · 07-09-2006, 11:46

Dato che il codice è "un buon codice" e dato che mi è servito, vorrei proporre alcune modifiche dato che ho avuto qualche problema.

1) se si usa IE6 in strict mode, ossia con la direttiva:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

mi pare che non funzioni

2) se si usano foto grandi, la dimensione del popup eccede le diminsioni dello schermo: ad esempio io vedo una immagine con sfondo celeste (angolo superiore sinistro di una fotografia

)

io ho risolto (almeno credo :master: ) sostituendo la funzione PopupPic con la funzione CaricaFoto

codice:

function PopupPic(sPicURL) 
{ 
    w_2 = window.open( "popup.asp?" + sPicURL, "popup", "resizable=1, height=200,width=200"); 
} 

var w_2 = null;
function CaricaFoto(foto1)
{
	if (w_2 != null && w_2.open) w_2.close(); 
	
	w_2 = window.open("", "popup", "width=200px,height=200px,top=0px,left=0px,resizable=yes,scrollbars=no");
	d = w_2.document;
	d.writeln("<h"+"tml>");
	d.writeln("<h"+"ead>");
	d.writeln("<t"+"itle>" + foto1 + "</t"+"itle>");
	d.writeln( "<scrip" + "t language='javascript' type='text/javascript'>function ridimensiona(){window.setTimeout(function() {onsetTimeoutRidimensiona();}, 300);}function onsetTimeoutRidimensiona(){var foto1 = document.getElementById('im1');var maxW = screen.width - 70;var maxH = screen.height - 100;var fattoreW, fattoreH, oldW, oldH, newW, newH;oldW = foto1.width;oldH = foto1.height;fattoreW = maxW / oldW;fattoreH = maxH / oldH;if(fattoreW >= fattoreH){ newW = oldW * fattoreH; newH = oldH * fattoreH; } else { newW = oldW * fattoreW; newH = oldH * fattoreW; } if(newW < foto1.width) {foto1.width = newW;} var w, h;if (self.innerHeight) /* all except Explorer */{w = self.innerWidth;h = self.innerHeight;}else if (document.documentElement && document.documentElement.clientHeight)/*Explorer 6 Strict Mode*/{w = document.documentElement.clientWidth;h = document.documentElement.clientHeight;}else if (document.body) /* other Explorers*/{w = document.body.clientWidth;h = document.body.clientHeight;}window.resizeBy(foto1.width - w, foto1.height - h); } </scrip" + "t>");
	d.writeln( "</h"+"ead>" );
	d.writeln( "<b"+"ody topmargin='0' leftmargin='0' scroll='no' style='margin:0;overflow: hidden'>" );
	d.writeln( "[img]" + foto1 + "[/img]" ) ;
	d.writeln( "</b"+"ody>" );
	d.writeln( "</h"+"tml>" );
	d.close();
	w_2.focus();
}

function window_onunload() 
{
    if (w_2 != null && w_2.open) w_2.close(); 
}

come si vede dal codice, non è necessaria una pagina ausiliaria.
Le dimensioni del popup non eccedono le dimensioni dello schermo
Se si vuole, si può contenere le dimensioni dell'immagine, modificando il src dell'img, ossia, sostituisco:

d.writeln( "<img alt='' src='" + foto1 + "'... con

d.writeln( "<img alt='' src='img1.aspx?img=" + foto1 + "&tic=" + (new Date()).valueOf() + "'

**deheks** · 10-02-2011, 18:22

ciao

data la mia ignoranza in materia, mi limito a copiare ed incollare dove necessario gli script che trovo in questo forum. Per la creazione di pop up di dimensioni variabili in base all'immagine contenuta ho utilizzato i codici riportati sopra (l'ultimo). Purtroppo l'immagine che inserisco nel pop up è troppo grande (il mio intento sarebbe quello di farla aprire con le massime dimensioni possibili in base al settaggio di ciascun monitor di coloro i quali vistano il sito, quindi non vorrei ridurne le dimensioni) di conseguenza ne vedo solo una parte. Come fare per risolvere il problema?
Purtroppo questo >>>

Se si vuole, si può contenere le dimensioni dell'immagine, modificando il src dell'img, ossia, sostituisco: d.writeln( "<img alt='' src='" + foto1 + "'... con d.writeln( "<img alt='' src='img1.aspx?img=" + foto1 + "&tic=" + (new Date()).valueOf() + "'

non è servito

Grazie in anticipo a tutti coloro i quali saranno tanto gentili da aiutarmi

Discussione: Pop up immagine auto resize: eccovi un buon codice!

Strumenti discussione

Ricerca discussione

Visualizza

Pop up immagine auto resize: eccovi un buon codice!

Re: Pop up immagine auto resize: eccovi un buon codice!

Permessi di invio