JQuery Lightbox Image Gallery - Dreamweaver Tutorial 1 of 3
Create an Image Gallery in Dreamweaver and then attach the JQuery Lightbox plugin to animate a larger image transition into the center stage of you web page. A visually impressive and quick loading image gallery for you web visitiors. link to part 2
J Query Lightbox Image gallery
We’re going to create a jQuery image gallery. We will be creating some class attributes and inserting a Polaroid effect background image with a layered alpha transparency drop shadow. We will then attach the JQuery Light box plug-in and when a visitor clicks upon one of the thumbnail images, a larger version of the image will animate into the center stage of your website using the image gallery script.
The web visitor can then choose whether to cycle throughout the rest of the photo image gallery by clicking on the previous or next buttons, or can view each image individually.
Below is an example of what the free image gallery will look like:
Columns in Greece
Leaf Close-up
Balconies
Statue of Liberty
Yawning Lioness
A Night Owl
Check out the full size animated jQuery image gallery that comes with the image gallery download files for this Dreamweaver tutorial.
If you prefer, you can read a Dreamweaver tutorial article explaining how to create a jQuery image gallery used in this tutorial.
Included in the jQuery slideshow gallery tutorial files are: 8 thumbnail images and their larger counterparts, a heart shaped background image, a blank Polaroid effect background to place your thumbnail images into and the js image gallery and css files necessary to make the jQuery image gallery work.
It is recommended that you define a new site in Dreamweaver and keep the jQuery image gallery on file so that you can re create the photo image gallery for future web design projects.
Also included are the finished image gallery tutorial files for you to reference and make sure you are on-track when you create your photo gallery in this Dreamweaver tutorial.
Once you click on the image gallery download, it is recommended that you define a new site in Dreamweaver and keep the jQuery image gallery on file so that you can re create the photo image gallery for future web design projects. It is fully customizable which means you can change the image gallery background images and even design your own photo background too.
Even the jQuery image gallery script is customizable so you can change the background colors of the image gallery background and how it reacts with the jQuery slideshow gallery.
Related Tutorials:
jQuery Image Gallery - Dreamweaver and jQuery Article tutorial
jQuery lightbox plugin - Dreamweaver and jQuery Video tutorial
jQuery lightbox html - Dreamweaver article tutorial
jQuery Lavalamp menu - Dreamweaver and jQuery video tutorial
jQuery Lavalamp menu - Dreamweaver and jQuery article tutorial