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 - Html and jQuery Tutorial


jquery lightbox example thumbnail

Click on the Image!

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.

jQuery Lightbox example files



2. Link the Thumbnails to your Larger Images

jQuery lightbox thumbnail and larger image


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.


Linking the jQuery thumbnail image to the larger lightbox image


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:

browsing for the jQuery Lightbox JavaScript Files

You can now point to the correct locations of the jQuery Lightbox files.




4. Attach the jQuery Lightbox CSS style sheet

Attach jQuery 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.







browse for jQuery Style Sheet


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>

jquery lightbox example thumbnail

Class="lightbox"

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



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