|
Page 1 sur 2 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. 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.
|
db_video.zip (