Il est relativement simple d’afficher des images dynamiques dans une pop-up de taille fixe, mais comment ouvrir cette pop-up à la taille de l’image, si nos différentes images dynamiques sont d’une taille différente ?
La fonction GetImageSize de PHP permet de déterminer certaines informations d’une image et de renvoyer ces informations dans un tableau de quatre éléments, à savoir :
- l’index 0 contient la largeur de l’image,
- l’index 1 sa longueur,
- l’index 2 le type d’image (1 = GIF, 2 = JPG, 3 = PNG, 5 = PSD, 6 = BMP),
- l’index 3 contient la chaine à placer dans les balises HTML, à savoir height= »xxx » width= »xxx ».
C’est donc grâce à cette fonction GetImageSize que nous allons déterminer la taille de pop-up à afficher en regard de chaque image dynamique.
Nous allons utiliser l’extension 4Level Open Browser de 4LevelWebs pour ouvrir la pop-up, qui permet de la positionner suivant différents critères, contrairement au comportement natif de Dreamweaver.
Vous pouvez télécharger la base de données ainsi que les images utilisées dans ce tutorial.
- La base de données :
db_video.zip (3.04 KB) - Les images : images.zip (62.88 KB)
Création du jeu d’enregistrement
On crée deux pages, index.php et pop.php, la première affichant les vignettes, la seconde affichant l’image de taille normale en pop-up.
On crée ensuite un jeu d’enregistrement, en sélectionnant les informations qui nous intéresse, en triant le résultat dans l’ordre voulu.
Insertion de l’image
Via le menu Insertion > Commun ou le raccourci clavier CTRL+Alt+I on insère l’image dynamique.
On sélectionne la source de l’image, en cochant la case Source de données puis en cliquant sur le champ de l’image, à savoir jaquette.
Il nous faut ensuite spécifier le dossier où se trouvent les images, on ajoute dans l’URL le nom de ce dossier, ici images, en rajoutant le préfixe « tn_ » (pour thumbnail) devant le champ jaquette, ce qui nous permet de différencier les différentes images, tout en ayant un seul nom de ces mêmes images dans la base de données.
Bien sur vous devez tenir compte de l’arborescence du dossier images, dans l’exemple celui-ci se trouve en racine du serveur.
Comportement 4Level Open Browser
En sélectionnant l’image, on va dans les comportements JavaScript (Maj + F3), puis on clique sur 4Level > 4Level Open Browser.
On spécifie le nom de la pop-up (pas de caractères spéciaux, pas d’espaces, etc), ainsi que les différents éléments à afficher comme la barre de menus, la barre d’adresse, etc.
On peut positionner la pop-up de différentes manières, soit en position absolu en entrant les cordonnées en pixels, soit centré dans la page, soit centré à l’horizontale.
On donne aussi une taille, juste pour s’y retrouver dans le code JavaScript généré par le comportement, afin, plus tard, d’ajouter le script PHP qui va nous permettre d’avoir une taille dynamique en fonction de chaque image.
On clique sur Browse, la fenêtre suivante nous permet de choisir la page à ouvrir en pop-up, à savoir pop.php.
En cliquant sur Paramètres, la nouvelle fenêtre ouverte va nous permettre de spécifier la variable à passer dans la page pop.php, afin d’identifier la bonne image à afficher.
On choisit pop comme nom de variable, c’est ce même nom qui va être utilisé dans le jeu d’enregistrement de la page pop.php, permettant d’afficher l’image de taille normale, correspondante à notre vignette de la page index.php.
Cliquer sur l’icône représentant un éclair ouvre une nouvelle fenêtre qui va nous permettre de choisir le champ contenant les valeurs à passer via cette la variable pop, à savoir le champ id_video.
On clique sur OK dans les différentes fenêtres, afin de prendre en compte les modifications apportées.{mospagebreak }
Région répétée
Si on veut afficher plusieurs images il nous faut faire une région répétée, qui lira les enregistrements présents dans la base de données en boucle, suivant le nombre d’enregistrements spécifiés à afficher.
Afin de garder les conditions d’affichage, on doit bien sûr sélectionner celles-ci en même temps que l’image afin de les inclure dans la région répétée.
Vous pouvez accéder à cette fonction via la fenêtre Application > Comportements de serveur ou via le menu Insertion > Applications dynamiques.
Puis on choisit le nombre d’enregistrements à afficher.
GetImageSize
En sélectionnant l’image et la région répétée, en mode source vous devriez avoir ce code :
<?php do {?>
<a href= »javascript:; » onClick= »Lvl_openWin(‘pop.php?pop=<?php echo $row_rsVideo['id_video']; ?>’,'Jaquette’,’200′,’300′,’0′,’0′,’1′,’width=200,height=300′) »> <img src= »../images/tn_<?php echo $row_rsVideo['jaquette']; ?> » border= »0″ alt= »ma jaquette » /></a>
<?php } while ($row_rsVideo = mysql_fetch_assoc($rsVideo)); ?>
Nous allons ajouter la fonction GetImageSize afin de déterminer la taille de la grande image à afficher, et donc la taille voulu pour la pop-up.
Toujours en mode source, on tape ce code entre le début de la région répétée et le début du lien ouvrant la pop-up :
<?php
$taille_pop = getimagesize(« ../images/$row_rsVideo[jaquette]« );
?>
$taille_pop est le nom de la variable, getimagesize le nom de la fonction, suivi du chemin du dossier contenant nos grandes images puis de la variable du jeu d’enregistrement et le champ contenant le nom des images dans la base de données.
À noter que le chemin du dossier doit être relatif au document.
Puis on modifie le code JavaScript du comportement, afin de placer notre variable PHP permettant de déterminer la taille d’ouverture de la pop-up, en utilisant le tableau PHP et l’index correspondant, à savoir 0 pour la largeur et 1 pour la hauteur :
<?php echo $taille_pop[0]; ?>
ce bout de code va venir s’insérer à la place de la largeur et hauteur déterminé lors de l’application du comportement 4Level Open Browser.
Ce qui nous donne :
<?php do { ?>
<?php $taille_pop = getimagesize(« ../images/$row_rsVideo[jaquette]« ); ?>
<a href= »javascript:; » onClick= »Lvl_openWin(‘pop.php?pop=<?php echo $row_rsVideo['id_video']; ?>‘,’Jaquette’,’<?php echo $taille_pop[0]; ?>‘,’<?php echo $taille_pop[1]; ?>‘,’0′,’0′,’1′,’width=<?php echo $taille_pop[0]; ?>,height=<?php echo $taille_pop[1]; ?>‘) »> <img src= »../images/tn_<?php echo $row_rsVideo['jaquette']; ?> » border= »0″ alt= »ma jaquette » /></a>
<?php } while ($row_rsVideo = mysql_fetch_assoc($rsVideo)); ?>
Page pop.php
On ouvre à présent la page pop.php, dans laquelle nous allons créer un style CSS afin que l’image s’affiche sans marges et donc dans sa totalité.
Dans le panneau Propriétés on fait Nouveau style CSS.
On sélectionne la balise <body>, en cochant Redéfinir la balise HTML et Seulement ce document (on peut exporter le style dans une feuille de style externe par la suite).
On affiche l’onglet Boite, puis dans Remplissage (padding) et Marge (margin) on entre comme valeur 0, en cochant Idem pour tous dans les deux cas.
Le style est ajouté au <head> du document, on peut ajouter le média screen (pour écran).
<style type=« text/css » media=« screen »>
<!–
body {
margin: 0px;
padding: 0px; }
–>
</style>
Jeu d’enregistrement pop.php
On doit maintenant créer le jeu d’enregistrement qui va nous permettre d’afficher l’image dont l’identifiant (video_id) est passé comme valeur de la variable pop dans l’URL, sur un clic d’une des vignettes de la page index.php, plutôt que de créer ce jeu d’enregistrement de toute pièce nous allons copier celui de la page index.php puis le modifier.
Dans les Comportements de serveur de la page index.php on sélectionne le jeu d’enregistrement rsVideo, puis sur un clic droit on fait Copier.
De la même manière dans la page pop.php on fait Coller.
On double clique sur le jeu d’enregistrement, puis on le modifie afin de spécifier la variable permettant de passer la valeur de l’identifiant (video_id) de notre image.
Le Filtre est le champ contenant la valeur de la variable, Paramètre d’URL la méthode grâce à laquelle est passé cette variable et pop le nom de la variable (choisi précédemment dans la page index.php).
Puis on insère l’image dans la page pop.php, en spécifiant le dossier contenant les images, de la même manière que précédemment pour la page index.php, à part le préfixe « tn_ » qui devient inutile.
