Photos en Popup

ProgYSM Carte Développement Documentation Données Test V pour Végane Yan Morin

Contexte

Plusieurs webmestres publient des albums photos sur leur site. Pour créer cette album, on peut afficher toutes les images sur une seule page web. Cependant, lorsque les images sont trop nombreuses ou trop grandes, il est parfois intéressant d'avoir un index de lien ou de miniatures des images. On veut tout de même voir les images grandeur nature en cliquant sur une photo de l'index.

1. La solution la plus simple est d'ouvrir l'image avec son adresse. Solution simple puisqu'il ne s'agit qu'un lien hypertexte.
Exemple: <a href="image1.gif">Image 1</a>

2. On peut aussi, utiliser une fonction Javascript pour créer une fenêtre "popup" qui affiche l'image.
Exemple: <a href="image1.gif" onclick="window.open(this.href,'windowimage','width=800,height=600');return false;">Image 1</a>

Cependant, ces deux solutions n'ont aucun rendu graphique, de titre ou d'informations complémentaires. En plus, la majorité des fureteurs affiche l'image avec une marge de chaque côté.

Pour ajouter un titre, de l'informations complémentaires, une mise en page différente, une possibilité de retourner à la page précédente ou de fermer la fenêtre "popup", on doit se créer une page HTML. Cependant, le travail peut être pénible s'il faut créer une page pour chaque images, imaginer 100 fichiers HTML pour 100 images!

3. Il serait intéressant de combiner la fenêtre en popup et les pages HTML. Mais ce qui serait encore mieux serait de créer une page HTML selon les informations de l'image. Le script ci-dessous démontre cette solution. L'essentiel du code est qu'il ouvre une nouvelle fenêtre et écrit une page HTML avec une balise image. La balise image utilise les trois informations passées en paramètres à la fonction "popup()".

4. Finalement, dans un contexte de programmation serveur, on pourrait mettre la liste des images (informations: source, hauteur, largeur, description) dans une base de données. Chaque image pourrait être associée à une clé unique. Avec cette clé, on pourrait générer un fichier HTML avec l'image.
Exemple d'appel: <a href="images.php?id=1">Image 1</a>

Essai de la solution #3

Images

Cliquer sur le texte "Images" pour voir l'image en popup...

Code

Insérer le script à l'intérieur des balises <head></head>

strOptions = 'location=0,menubar=0,scrollbars=0,status=0,titlebar=1,toolbar=0,directories=0';
	strOptions+= ','+'width='+pimgWidth+',height='+pimgHeight;

/* ouverture de la fenêtre */
	win = window.open('','frmPhotos',strOptions);

strDocHTML = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"\n'+
'\t"http://www.w3.org/TR/html4/loose.dtd">\n'+
'<html lang="fr">\n\t<head>\n\t\t<title>Photo<\/title>\n'+
'\t\t<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">\n'+
'\t\t<style type="text/css"><\/style>\n'+
'\t<\/head>\n';

strDocHTML += '\n\t<body>\n\n'+
'\t\t<p><a href="/" onclick="window.close();return false;" title="Cliquer pour fermer la fenêtre"><img src="'+pimgSrc+'" width="'+pimgWidth+'" height="'+pimgHeight+'" alt="photographie"></a><\/p>\n';
	strDocHTML += '\n\t<\/body>\n<\/html>';

win.document.open();
	win.document.write(strDocHTML); // on écrit le code HTML dans la nouvelle fenêtre
	win.document.close();
	win.focus();
}
</script>

Compléter ces renseignements ci-dessous pour générer des liens vers ce script.
Source de l'image: Largeur: Hauteur: Lien:

Auteur du script: Yan Morin

Date du script: 2002/11/06 09:16

Modification: 2003/06/01 05:47, ajout de commentaires et des options d'ouvertures.
2004/01/04 09:35, correction des liens, modification href.

Date du script: 2003/01/05 09:35

Version modifiée qui redimensionne la fenêtre aux dimensions de l'image: popupResize.htm

Lire les commentaires | Laisser un commentaire

Rechercher

Sections

Articles

Contexte

Essai de la solution #3

Code