Dreamweaver nous offre la possibilité d'afficher des images dynamiques, provenant d'une base de données, nous allons voir comment afficher une ou des vignettes dans une page web, puis les ouvrir en taille normale dans une pop-up.
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 Ouvrir la fenêtre Navigateur En sélectionnant l'image, on va dans les comportements JavaScript (Maj + F3), puis on clique sur Ouvrir la fenêtre Navigateur. 
On spécifie la taille de la pop-up, son nom (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 clique sur Parcourir, 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. 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. 
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. 
Centrer la pop-up Il peut être utile de centrer la pop-up au chargement de la page, pour ce faire on insère un JavaScript dans le document, entre <head> et </head> : <script type="text/javascript">
windowWidth=200;
windowHeight=278;
if (parseInt(navigator.appVersion) >= 4)window.moveTo((screen.width/2)(windowWidth/2+10),(screen.height/2)-(windowHeight/2+20));
</script> Vous pouvez trouver différentes extensions pour placer votre pop-up à l'endroit souhaité, notamment : - Center Popup Window, disponible sur Macromedia Exhange (rubrique Scripting),
- 4Level Open Browser, disponible sur le site de Four Level, comportement ayant les mêmes caractéristiques que celui natif de Dreamweaver mais permettant de spécifier l'emplacement de la pop-up dans la fenêtre, de la centrer horizontalement et/ou verticalement,
- Advanced Open Window, disponible sur DMXzone,
- ou encore l'excellente Windows Suite de Massimo Foti.
|
