JQuery Lightbox - Html and jQuery Tutorial
Discover how to put the great jQuery Lightbox plug-in on your website with this Dreamweaver and jQuery tutorial. Learn the jQuery Lightbox html, how to set-up the script hooks, and attach the necessary style sheets to make the jQuery Lightbox spring into life and display your images in a stylish and modern fashion. This is such a fantastic jQuery Lightbox tutorial that you will have your first jQuery Lightbox example up in minutes.
1. Download the Jquery Lightbox Files
If you prefer, you can watch a jQuery video tutorial explaining how to install the jQuery Lightbox Plugin.
The jQuery Lightbox plugin once originally adapted for use with the jQuery library by the website Learnrovieira.com and you can either download the jQuery Lightbox example and plugin from there or, if you prefer you may download the jQuery Lightbox files from here too:
Included in the jQuery Lightbox files are a folder with the jQuery CSS files necessary to style an animated jQuery Lightbox example. There is a folder called images which hold the buttons and animated gifs that accompany the jQuery Lightbox plugin. There is a folder called ‘js’ which contains two JavaScript files; the simple jQuery Lightbox minified file and the jQuery library file. It is the JavaScript files which will take the jQuery Lightbox div links and together with the css animate the Lightbox.
There is a folder called ‘photos’ with some sample images if you first want to practice the technique in this jQuery tutorial before applying the jQuery Lightbox to your own images.
2. Link the Thumbnails to your Larger Images
To make the simple jQuery Lightbox work, you will need to insert a thumbnail version of your image into your webpage.
You can then create a link from the thumbnail image to the larger image you wish to animate with the jQuery Lightbox plugin.
In this jQuery Lightbox example, the thumbnail image is 140 by 120 and the larger image that will be linked to is 500 by 300.
Dreamweaver is fantastic for linking, not only to other web pages but also linking to other images.
Most of you will know how to insert an image into a Dreamweaver web page, but for those of you who don’t, place your cursor where you would like to insert the image then go to Insert > Image.
Dreamweaver is fantastic for linking not only to other web pages but also linking to other images. Once your thumbnail image has been inserted into your webpage, click on the 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 jQuery Lightbox div.
A function is needed to hook onto the larger images and animate them with the jQuery Lightbox plugin. You may have other images or links to images that you do not want to be animated by the simple jQuery Lightbox so a way of indicating to the jQuery Lightbox which images to animate needs to be established.
When the thumbnail images were linked to the larger images, an html link was created in the code. Adding a class attribute to the links html and then calling on that class with a function, is a great way to ensure that only specific images or links will be animated with the jQuery Lightbox plugin.
Find the link text which links to your larger image and before the closing angle bracket, add a class attribute to the link and call it 'lightbox' like in the following example:
<!-- add a class of lightbox to your large image links --> <a href="images/butterfly-lge.jpg" class="lightbox">
3. Link the jQuery JavaScript Files
A link needs to be provided inside the head tags of your webpage to the jQuery JavaScript files which will take the jQuery Lightbox html and give it the lightbox animation effects.
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. Probably the best location to paste the code will be just below your CSS file link after the title tag.
<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 location manually.
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:
You can now point to the correct locations of the jQuery Lightbox files.
4. Attach the jQuery Lightbox CSS style sheet
Separate from your own CSS style sheet, the style sheet which came with the jQuery Lightbox tutorial download files needs to be attached. Click on the ‘attach new style sheet icon’ located in the CSS styles panel of Dreamweaver.
Then browse for the file and add it as a link. If you wish you can set the media type to screen.
The style sheet for the jQuery Lightbox will now be added and will be visible at the top of your current webpage next to your source code icon.
5. 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 attach to the jQuery Lightbox html and animate the images with the jQuery Lightbox plugin.
<script type="text/javascript"> $(function() { $('.lightbox a').lightBox(); }); </script>
It works by finding all of the links with a class of ‘Lightbox’ and attaches the simple jQuery Lightbox plugin. Only links with a class of ‘Lightbox’ will be animated so rest assured that your other page links won’t suddenly open in an animated jQuery Lightbox example.
Now at the end of this jQuery Lightbox tutorial, you should have a working jQuery Lightbox example like the butterfly image here.
Share this Dreamweaver Article:
Related Tutorials:
jQuery Lightbox plugin - jQuery and Dreamweaver video Tutorial
Build an Image Gallery with jQuery Lightbox - jQuery video Tutorial
Build a jQuery Image Gallery - Dreamweaver video tutorial
jQuery Lavalamp menu - Dreamweaver and jQuery video tutorial
jQuery Lavalamp menu - Dreamweaver and jQuery article tutorial