Jquery lightbox - Dreamweaver Tutorial - 1 of 2
This is a fantastic jQuery Lightbox video tutorial which will show you how to connect the jQuery lightbox plugin to the thumbnail images on your web page and animate them into a stylish jQuery lightbox popup window. More information Below. Here is the link to part 2
jQuery Lightbox plugin
Take the jQuery Lightbox plugin and animate your images into a Lightbox popup image window that gives your images a professional look. The jQuery Lightbox also has ‘previous’ and ‘next’ buttons allowing you to create a jQuery slideshow with your pictures and your users can cycle through the images as they animate into the center of the web page.
Special thanks should go to leandroviera.com for creating this version of the jQuery Light box. You can either download the necessary files for the Lightbox js from leandroviera.com or you can download the files by clicking on the link just below the jQuery Lightbox video tutorial above.
Included in the jQuery Lightbox Download
Included in the Lightbox with jQuery download files is a folder containing the CSS files which will help animate the jQuery Lightbox html. There is an image folder which contains the previous and next buttons and an animated loading gif. There is the js Lightbox JavaScript files and the jQuery library file. There are also some sample thumbnails and larger counterparts for you to practice with.
How does the jQuery Lightbox work?
To make the jQuery Lightbox plugin work best, you will need thumbnail images which you will insert into your web page. You can then link to the larger version of those images using the point to file icon in Dreamweaver. Then, connect the jQuery light box CSS file and Lightbox js scripts. A simple function written into the head of the web page will call the jQuery Lightbox and will animate the images into a stylish lightbox popup background.
If you have more than one thumbnail image on a page then the Lightbox will apply previous and next buttons and allow your web visitors to cycle through the images in a jQuery slideshow.
All of the information you need to create the jQuery light box are contained within the jQuery Lightbox video tutorial above.
Rather make a jQuery Image Gallery ?
If you prefer you can watch a jQuery Lightbox video tutorial showing you how to make a jQuery image gallery using Polaroid background images like the one above.
Related Tutorials:
Build a jQuery Image Gallery - Dreamweaver article tutorial
jQuery lightbox html - Dreamweaver article tutorial
jQuery Lavalamp menu - Dreamweaver and jQuery video tutorial
jQuery Lavalamp menu - Dreamweaver and jQuery article tutorial