Comment faire une gallerie dynamique avec popups...
Toutes mes galleries sont gérées en PHP, ce qui me
permet -entre autres- d'ouvrir les images dans des
popups dont les dimensions sont automatiquement
définies par la taille
de l'image.
Démonstration :
Pour plus de facilité, il est préferable que les images
et les vignettes aient le même nom, mais elles doivent
être placées dans des répertoires différents
1/ créons un tableau PHP
<table>
<tr>
<?php
$id[1] = "img1"; // les nom correspondent
au noms des images sans l'extension
$id[2] = "img2";
$id[3] = "img3";
$id[4] = "img4";
$id[5] = "img5";
$id[6] = "img6";
$id[7] = "img7";
$id[8] = "img8";
$quant = count($id);
for ($i=1; $i <= $quant; $i++){
$item = $id[$i];// l'image en question
include("thumbnail.txt"); } ?>
// l'extension peut etre n'importe quoi (htm, php, zobi...)
</tr>
</table>
2/ Voici le fameux "thumbnail.txt" :
<?php $size = GetImageSize("images/$item.jpg");
?> // dimensions de l'image
<td width="72">
<a href="javascript:;"
onClick="MM_openBrWindow('pgimg.php3?pgtof=
// on appèle toujours la même page, mais la variable "pgtof"
est égale à la variable "$item"
<?php echo $item; ?>','','width=
// c'est toujour la même variable...
<?php echo $size[0]; ?>,height=
// 0 = la largeur de l'image
<?php echo $size[1];
?>')">
// 1 = la hauteur de l'image
<img src="thumbnails/<?php
echo $item; ?>.jpg" border="0">
// on met une image dont le nom est toujours la variable "$item"
(tant qu'à faire)
</a>
</td>
3/ Le fichier "pgimg.php3" servant de modèle à la
page qui affiche l'image
<html>
<head>
<title>------[ artworks by dreadcaSt ]------</title>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0">
<img src="images/<?php echo
$pgtof; ?>.jpg">
</body>
</html>
Et voila le travail... C'est pas compliqué, mais
c'est bien pratique quand vous avez plein de photos
à mettre en ligne. C'est encore plus pratique avec
une base de données, mais cela ralentit la génération
des pages... C'est mon choix !
A oui... J'oubliais : pensez à mettre le script popup
dans l'en-tête de votre page HTML :
<script language="javascript">
function MM_openBrWindow(theURL,winName,features){
window.open(theURL,winName,features)
}
</script>