Comment passer des images dans Dreamweaver CS5

Étape 1

Téléchargez le fichier Lightbox prédéfini de votre choix et décompressez-le. Vous trouverez une série de quatre dossiers et un fichier index.html. Les dossiers sont "css", qui contient des fichiers avec des feuilles de style en cascade, "photos", qui contient deux copies de chacune des photos que vous utiliserez, une avec une vignette, une autre en pleine résolution, "images", Il contient les icônes utilisées pour les boutons et les commandes, ainsi que "JS", qui contient les fichiers Javascript que vous utiliserez.

Étape 2

Copiez vos propres images et les vignettes dans le dossier "photos", assurez-vous que dans les vignettes vous préfixez le nom de l'image avec "thumb_". Par exemple, "car.jpg" aurait une vignette de "thumb_car.jpg". Assurez-vous que chaque image a sa vignette correspondante.

Étape 3

Copiez la lightbox dans le répertoire de travail pour créer la copie locale de votre site Web et ouvrez votre page Web dans Dreamweaver. Utilisez l’outil "Lier les images" pour lier les vignettes de votre page Web aux endroits où vous le souhaitez.

Étape 4

Cliquez sur chaque image miniature et examinez la zone de propriétés de l’élément de l’application Dreamweaver. Une option vous permet de créer un lien autour de cette vignette. À côté de cette zone de texte, il y a une icône "directement dans le fichier". Cliquez dessus et faites glisser la flèche qui agrandit l'image dans l'image de cette vignette. Répétez cette procédure jusqu'à ce que vous ayez lié la vignette de chaque image.

Étape 5

Cliquez sur la fenêtre de code du fichier HTML et faites défiler jusqu'à l'en-tête. Dans la tête et écrivez une étiquette qui ressemble à ceci:

Étape 6

Ajoutez une deuxième balise de script, comme ceci:

La balise de script que vous ajoutez affiche la barre d'outils "jQuery" et arrête le code javascript spécifique. Le nom du code peut varier en fonction de la boîte à lumière utilisée.

Étape 7

Définissez la fonction "hook" dans votre lightbox à partir du code source indiqué, dans une fonction Javascript ressemblant à ceci:

Étape 8

Faites défiler vers le bas et recherchez chaque étiquette qui entoure une étiquette . Entrez le texte suivant dans chaque balise:

class = "lightbox"

juste avant le fermoir de fermeture de la balise. Par exemple, cela pourrait être comme ça:

Étape 9

Liez le fichier CSS qui accompagne la lightbox à l'en-tête de votre document HTML. Pour ce faire, utilisez la fonction "Joindre une feuille de style" de Dreamweaver dans le panneau Fichiers. Recherchez le fichier jQuery.css et associez-le.