Introduzione
In moltissimi siti capita la necessità di mostrare immagini a dimensione naturale, a seconda dell'oggetto del sito, ad esempio prodotti, foto di persone o di paesaggi, quadri e così via, e la scelta maggiormente convincente, sia per l'utente che per lo sviluppatore, è quella dell'utilizzo di un popup in cui mostrare l'immagine.
È di certo molto eleganto che il popup sia grande esattamente quanto le dimensioni (larghezza ed altezza) dell'immagine... ma è oltremodo scomodo utilizzare file diversi per ogni immagine, o funzioni diverse per lo stesso file, quando possiamo utilizzare un solo file Html per mostrare tutte le immagini che intendiamo far visualizzare ai nostri utenti.
In questo articolo scopriremo come realizzare quanto detto fion a questo momento. Buona lettura!
Cosa ci serve
Per realizzare un visualizzatore di immagini come quello descritto fino a questo momento, abbiamo bisogno di due file Html e di una serie di immagini (ad esempio *.jpg).
Le immagini dovranno essere necessariamente nominate come immagine1.jpg, immagine2.jpg, immagine3.jpg, e cosi via, per il motivo che capiremo in fase di analisi dello script.
Nomineremo i due file Html come index.html ed immagine.html, i quali si occupano rispettivamente dell'elenco dei file immagine da visualizzare, e del visualizzatore stesso in popup.
In file sommario: index.html
Il file che farà da sommario alla nostra applicazione è appunto index.html, il quale contiene i link al file che farà da visualizzatore, e lo script per aprirlo in popup. Vediamo il suo codice opportunamente commentato:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="IT">
<head>
<title>Visualizzare immagini in popup ridimensionabili</title>
<basefont size="2" face="Verdana">
<script language="javascript" type="text/javascript">
<!--
<span style="color:008080">// Creo lo script per l'apertura del popup</span>
function ApriImmagini(file)
{
var prop = "top=100, left=100"; <span style="color:008080">// Altre proprietà... eccetto width ed height!</span>
window.open(file, null, prop);
}
//-->
</script>
</head>
<body link="#0000FF" alink="#FF0000" vlink="#0000FF">
<div align="center">
<!-- Creo una serie di link con una QueryString associata -->
<a href="javascript:ApriImmagini('immagine.html?id=1')">APRI L'IMMAGINE # 1</a> ::
<a href="javascript:ApriImmagini('immagine.html?id=2')">APRI L'IMMAGINE # 2</a> ::
<a href="javascript:ApriImmagini('immagine.html?id=3')">APRI L'IMMAGINE # 3</a>
</div>
</body>
</html>
Spendiamo ancora qualche parola in merito al codice appena visionato, parola che, se non dovesse tornare troppo utile o chiara in questo momento, di certo sarà preziosa per il prosieguo della lettura di questo articolo.
Il codice
<a href="javascript:ApriImmagini('<span style="color:#Ba1b2a">immagine.html?id=1</span>')">
come già detto, contiene un link che punta al file immagine.html con un valore associato dopo l'estensione del file, ovvero ?id=X, dove X in questo caso rappresenta un valore numerico (1, 2, 3, ecc...). Quseto valorà verrà memorizzato in una variabile e servirà a richiamare dinamicamente le immagini nel popup.
In visualizzatore: immagine.html
Siamo giunti alla fase clou della nostra applicazione, il file che visualizzerà le singole immagini in un popup che si ridimensionerà a seconda delle dimensioni dell'immagine caricata.
Prima di dettarne le specifiche, vediamo il suo codice completo opportunamente commentato:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="IT">
<head>
<title>Visualizzare immagini in popup ridimensionabili</title>
<basefont size="2" face="Verdana">
</head>
<body link="#0000FF" alink="#FF0000" vlink="#0000FF" topmargin="0" leftmargin="0">
<script language="javascript" type="text/javascript">
<!--
<span style="color:008080">// Recupero l'intera QueryString della pagina</span>
var querystring = location.search;
<span style="color:008080">// Ne catturo solo il valore (ovvero ciò che viene scritto dopo =)</span>
var id = querystring.substr(4);
<span style="color:008080">// Mostro dinamicamente l'immagine a video e le assegno un nome</span>
document.write("<img src='immagine" + id + ".jpg' name='immaginÈ>");
function ReimpostaDimensioni()
{
<span style="color:008080">// Ridimensiono l'immagine a seconda della sua larghezza e della sua altezza</span>
window.resizeTo(immagine.width, immagine.height);
}
window.setTimeout("ReimpostaDimensioni()", 1000);
//-->
</script>
</body>
</html>
Per prima cosa è necessario impostare (in Html o volendo anche con i Css) i margini della pagina a zero (0) pixel; poi, come già accennato nei commenti al codice, recupero l'intera QueryString della pagina e la memorizzo in una variabile che chiamo querystring, di cui, utilizzando il metodo substr() dell'oggetto String(), ne calcolo solo il valore effettivo, ovvero quello che viene scritto dopo il simbolo di uguaglianza (=); a questo punto mostro dinamicamente a video l'immagine, utilizzando la variabile id (nella la quale ho memorizzato il solo valore della QueryString della pagina):
document.write("<img src='immagine"<span style="color:#Ba1b2a"> + id + </span>".jpg' name='immaginÈ>");
A questo punto, grazie al metodo resizeTo(X, Y) dell'oggetto window, posso ridimensionare il popup in funzione del nome che ho assegnato all'immagine, ovvero grazie alle proprietà immagine.width e immagine.height.
Sono dovuto ricorrere ad una temporizzazione per evitare che il popup possa, a seconda dei browser o delle impostazioni della cache di ogni singolo utente, aprirsi in maniera non corretta la prima volta che la pagina viene visualizzata: in questo modo si aprirà delle sue dimensioni naturali e si ridimensionerà in automatico dopo un secondo.
Il codice puro, privo di commenti
Come sempre, per chiarezza mostro il codice di questo script privo di commenti:
<script language="javascript" type="text/javascript">
<!--
var querystring = location.search;
var id = querystring.substr(4);
document.write("<img src='immagine" + id + ".jpg' name='immaginÈ>");
function ReimpostaDimensioni()
{
window.resizeTo(immagine.width, immagine.height);
}
window.setTimeout("ReimpostaDimensioni()", 1000);
//-->
</script>
