All Articles Dreamweaver
Créer un album d'images jQuery Gallery dans Dreamweaver
Geoff Blake on Sat, June 18th | 9 comments
You've probably seen the Lightbox effect at work during your travels on the web, although you may not have known that it was called Lightbox.

Vous avez probablement vu l'effet Lightbox au travail lors de vos voyages sur le web, mais vous ne pouvez pas savoir qu'il a été appelé Visionneuse. Essentiellement, le visiteur clique sur une vignette de la galerie d'image, et une version agrandie apparaît en haut de la page, la gradation des contenus de la page derrière elle. Cet effet largement utilisé rend l'utilisation de jQuery et a été initialement rédigé par Leandro Vieira Pinho. L'effet Lightbox réelle sera déclenchée par des hyperliens que nous mettons sur notre page. Ils sont très lisses, et dans ce tutoriel, vous allez apprendre à construire un dans Dreamweaver !


Etape 1

Premièrement, assurez-vous et téléchargez les fichiers de projet pour ce tutoriel. Décompressez le fichier et de stocker les fichiers du projet dans un endroit dont vous vous souviendrez, comme votre bureau. A l'intérieur des fichiers dans le dossier de projet, vous trouverez deux dossiers plus «actifs» et «images». Ils contiennent tous les composants que nous aurons besoin.


Etape 2

Maintenant, allez-y et le lancement de Dreamweaver et choisissez Site


Étape 3

Ensuite, créez un nouveau fichier vide de la marque, flip en mode Code, puis collez-

Ce code contient les liens vers les extérieurs fichiers JavaScript et CSS que notre page sera nécessaire, ainsi que quelques fonctionnalités supplémentaires. Veillez à enregistrer votre fichier dans le dossier que vous avez défini comme un site ci-dessus.


Etape 4

Maintenant nous sommes prêts pour la structure de la page qui est le cadre qui va tenir notre vignettes. Allez-y et coller

Comme vous pouvez le voir, il ya un extérieur "lightboxgallery"


Etape 5

Maintenant nous avons besoin de nos miniatures. Déposez votre curseur dans la première vignette


Etape 6

Grâce à notre miniatures en place, il est maintenant temps de tout lier et à obtenir le produit le script Lightbox. Comme mentionné précédemment, le script pour notre album va être déclenchée avec des hyperliens, alors nous irons ensemble des liens pour les versions plus grandes de chaque image et ensuite tester nos résultats.

Retournez à la vue de conception, sélectionnez la première vignette graphique, puis sur l'inspecteur Propriétés cliquez sur «Parcourir pour le fichier '(l'icône du dossier à côté du champ Lien). Accédez à l'image en taille réelle correspondante dans le dossier "Images". Dans ce cas, "fullsize1.jpg." Répétez cette opération pour chaque vignette, liant chacune à leur homologue en taille réelle.


Etape 7

Nous sommes enfin prêts à tester les choses! Enregistrez votre fichier, puis choisissez Fichier

Consultez ces

Créer une image Fichiers Galerie Lightbox Project

Comments (9)

You must be logged in to comment. Login Now

  • Hi there, I can't seem to find the project files(zip folder) to download, that is needed for this tutorial???
    • 7 years ago
    • By:
    Reply
  • Powenie
    Hi, They are hyperlinks in the text (in blue) in Step 3, Step 4 and the very last line of this tutorial is a link: "Create Image Gallery Lightbox Project Files". Just click on these to begin downloading the files. Hope this helps Rounik
    • 7 years ago
    • By: Powenie
    Reply
  • Thanks for the reply. I have a website up but I want my photography page to have a lightbox, but when I try and do it on the content page which is an ap div, it doesnt seem to show up at all??? Am I doing something wrong with placing the code maybe???
    • 7 years ago
    • By:
  • Thanks for the previous reply. I now got that done but I have a website already up but I want to have a lightbox on my photography page in the content area. The content area box is an ap div though, and I did the exact same procedure with the code and all but it doesnt show up when I refresh the page????
    • 7 years ago
    • By:
    Reply
  • Un souci ds votre tuto je ne trouve pas les code a copier coller ds dreamweaver ds le fichier que jai telecharger et dc je peu rien fr sur dream sauf si fo recopier ce que vous avez marquer sur votre excemple tuto
    • 6 years ago
    • By:
    Reply
  • wow!!!this tutorial was helpful....but what about prev,next,close and loading icons....hope you will provide the tutorials about that...
    • 6 years ago
    • By:
    Reply
  • azex
    hi, 4 images is looks simple. but, how about if the images is hundred over..? do i need to edited one by one? any other way to simplify it.
    • 6 years ago
    • By: azex
    Reply
  • Ian
    Thanks Geoff, That's a fantastic tutorial for someone like me who sits more on the creative side but sometimes needs to pretend he is a programmer!! The code works perfectly well. I am wondering if there is a fairly simple option - or a tutorial of yours somewhere else - to show how to add descriptive text for each image when it is displayed in the Lightbox, rather than just the "Image 4 of 14" text? Cheers, Ian
    • 6 years ago
    • By: Ian
    Reply
  • Emily
    Is there a way to add HTML content (like another webpage) to pop up in the lightbox as well?
    • 6 years ago
    • By: Emily
    Reply
Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: