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 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:

jQuery lightbox image gallery example thumbnail 1
Columns in Greece
jQuery Lightbox Gallery thumbnail 2
Leaf Close-up
jQuery Lightbox Gallery thumbnail 3
jQuery Lightbox Gallery thumbnail 4
Statue of Liberty
jQuery Lightbox Gallery thumbnail 5
Yawning Lioness
jQuery Lightbox gallery thumbnail 6
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.

jQuery download files - whats included

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

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