Dreamweaver Tutorials back to dreamweaver tutorials home pagee contact form tutorial page
A value is required.Invalid format.A value is required.Invalid format.
Social Networks Our YouTube.com Channel Facebook Page

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.


jQuery Lightbox example files


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



blog comments powered by Disqus


Dreamweaver Website Templates

Web Hosting Plans That I Use

  • GoDaddy.com Hosting Plans!Godaddy Hosting
  • Unlimited Hosting at HostGatorHostGator Hosting
  • JustHost.com Unlimited DomainsJustHost Hosting
  • Hosting just $4.88/month! - PowwebPow Web Hosting

PHP Luxury Contact Form Tutorial


Great Premium Shopping Cart

  • BigCommerce makes it easy to sell online. Click here to try it free!BigCommerce

    I highly reccommend this product for people who want to create an online store. it's easy to set-up and add products to and easy to manage back-of-house. Can also be used as an Ebay store.

Email Marketing - Recommended links

CSS Drop Down Menu - Dreamweaver

Floating Menu - Dreamweaver

Tabbed Navigation Menu

CSS Text Boxes in Dreamweaver

CSS 3 in Dreamweaver

J Query in Dreamweaver

Transparent Overlays Dreamweaver

CSS in Adobe Dreamweaver

All Types of Links In Dreamweaver

Positioning Elements in Dreamweaver

Unordered List Images Dreamweaver

Create an RSS Feed in Dreamweaver

Website Typography in Dreamweaver

Expanding Text Boxes - Dreamweaver

Make a Donation

Donate for Dreamweaver Tutorials