jQuery Image Gallery - Lightbox Tutorial
Share this Dreamweaver Article:
Build an image gallery with the jQuery Lightbox Gallery plugin. Create a photo gallery with thumbnail images, link to the larger images and animate them into a jQuery slideshow gallery with previous and next buttons so your web visitors can shuffle through the photos. Thumbnails will open up into a classy animated background which is fully customizable too.
This example of a web image gallery below is a scaled down version of the jQuery thumbnail gallery but even this image gallery is fully functional, try it! Here is a link to the preview of the jQuery Slideshow gallery that you can make in this jQuery Tutorial. If you prefer, you can watch a Dreamweaver video tutorial explaining how to create an jQuery Image Gallery.
1. Download the jQuery Lightbox Gallery Files
Included in the jQuery image gallery tutorial download 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 JavaScript and css files necessary to make the jQuery image gallery work. Also included are the finished files for you to reference and make sure you are on-track when you create your photo gallery in this Dreamweaver tutorial.
The jQuery Lightbox plugin was originally adapted for use with the jQuery library by the website; Learnrovieira.com. So special thanks to them.
It is recommended that you define a new site in Dreamweaver when creating the jQuery image gallery in this tutorial, and that way you can have it on file in Dreamweaver for when you make a gallery for one of your website projects.
2. Add the HTML to Build the Image Gallery
An all encompassing div has been created with an ID of ‘wrapper’ and inside the wrapper div is a div with an ID of 'Gallery' which will hold all of the jQuery thumbnail gallery images. Unless you are familiar with JavaScript then it is recommended that you do not change the name of the 'gallery' div because it will be used in a function to call the jQuery Lightbox gallery plugin later.
<div id="wrapper"> <div id="gallery"> <!-- This Code makes one HTML complete Thumbnail --> <div class="holder"> <div class="thumb"></div> <!-- end thumb --> <div class="title"> <h3>Title of Thumnail goes here</h3> </div> <!-- end title --> </div> <!-- end holder class --> <!-- Clearing tag to contain the float --> <br class="clearFloat"/> </div> <!-- end gallery --> </div> <!-- end wrapper div -->
In the HTML above, a div with a class of ‘holder’ has been created which will hold the Polaroid effect background image. The holder div will also house a div with a class of ‘thumb’ into which will be inserted a thumbnail image.
The holder div also holds a div with a class of ‘title’ and inside of that div is a h3 tag and that is where you can put the name of each thumbnail image.
Class attributes are used so that the divs ‘holder’, ‘thumb’ and ‘title’ can be re-used in the gallery for each image that is required. It also saves a lot of time to use classes both in HTML coding and for CSS styling. There are 8 images which came with the jQuery image gallery tutorial files so you will need to copy and paste the holder div and its contents eight times in total.
3. Add the CSS styles for the Web Image Gallery
Create a new style sheet in Dreamweaver and copy and paste these styles into it. If you recreated the site files correctly when you downloaded the Dreamweaver tutorial files, then all of the related images and styles should work effectively and you will have a fully styled gallery with a heart shaped background and the blank Polaroid images waiting for the thumbnail images to be inserted.
body { background-color:#9CF; background-image:url(../images/heart-bg.gif); background-position:center 70px; background-repeat:no-repeat; background-attachment:scroll; } #wrapper { height:2000px; width:auto; } #gallery { width:900px; margin-left:auto; margin-right:auto; margin-top:75px; } .holder { width:225px; height:250px; background-image:url(../images/polaroid.png); float:left; } .holder img { border:none; } .thumb { width:140px; height:120px; margin-top:29px; margin-left:43px; margin-right:42px; } .title { width:140px; height:40px; margin-left:auto; margin-right:auto; margin-top:15px; overflow:hidden; } .title h3 { margin:0; font-family:"Comic Sans MS", cursive; font-size:14px; overflow:hidden; color:#333; } .clearFloat { clear:both; }
4. Insert the thumbnails and link to larger images
Place your cursor inside of the 'thumb' div and go to Insert > Image and browse for the ‘thumbs’ folder that came with the jQuery tutorial download. Insert a thumbnail image into each ‘thumb’ class div that you have in your jQuery Slideshow gallery.
Once your thumbnail images have all been inserted into your web image gallery, click on each thumbnail image and look down in the properties panel and just under the source file will be a link box. Use the point to file icon and click and drag it over to the larger image located in the files panel. The link will then be created to the image that will be used in the image gallery with jQuery.
5. Link the jQuery Image Gallery JavaScript files
Links need to be created inside the head tags of your webpage to the jQuery JavaScript files which will create the photo gallery slideshow effects. A link needs to be created to point to the jQuery library and another link needs to point to the jQuery image gallery JavaScript file.
If you know how to set up the links to your JavaScript files then do so now. If you do not know how to set up the links to the jQuery Lightbox JavaScript then copy and paste the code below inside the head tag of your webpage after your CSS file.
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.min.js"></script>
The suggested link to the ‘js’ folder may not be where you have placed your JavaScript folder in your website, so if that is the case, then you will need to change the source folder and file path location manually in order to allow the scripts to connect to the image gallery with jQuery.
To do that browse for the source files by letting Dreamweaver do the work; if you delete the quotation marks and the contents of the ‘src=’ and retype the first quotation mark, an option to browse for the source files appears from a drop down menu like in the example below:
6. Attach jQuery Lightbox Gallery CSS Stylesheet
To help create the image gallery background effects, the style sheet that came with the jQuery tutorial download needs to be attached to the webpage. Click on the 'attach style sheet' icon located in the CSS styles panel.
Browse for the style sheet called ‘lightbox-0.5.css’ located in the CSS folder and attach it by clicking ‘ok.’
7. Call the jQuery Lightbox Plugin
Copy and paste this script into the head of your web page below the other script links. It is a function which will call the jQuery Lightbox plugin and attach it to your image gallery with jQuery.
<script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script>
The jQuery slideshow gallery will work by finding all of the links inside of a div with an ID of ‘gallery’ and applying the jQuery Lightbox to them which will animate the larger linked images into the jQuery image gallery that you should now have working correctly.
By now you should now have finished the jQuery image gallery tutorial, you have created a fully functioning jQuery thumbnail gallery which when the image links are click upon, then open up larger images into a jQuery slideshow gallery. Any problems, leave me a message in the comments section below.
Related Tutorials:
Build a jQuery Image Gallery - Dreamweaver video tutorial
jQuery lightbox html - Dreamweaver article tutorial
jQuery lightbox plugin - Dreamweaver and jQuery Video tutorial
jQuery Lavalamp menu - Dreamweaver and jQuery video tutorial
jQuery Lavalamp menu - Dreamweaver and jQuery article tutorial