Introduction to Jquery Jquery Lightbox

INTRODUCTION TO JQUERY – JQUERY LIGHTBOX

Displaying a gallery of photos is such a common task that you will find dozens of different ways to show off your images. One very popular technique dims the web page and displays the larger version of the thumbnail as if it were floating on top of the browser window.

The most well known version of this methodis a JavaScript program called Lightbox ( There have been many imitations of the original, as well as one scriptcreated to work with jQuery. jQuerylightBox ( is a jQueryplug-in thatwith just a single line of code creates aspectacular way to present images as part of a portfolio, gallery or slideshow.

The jQuerylightBoxplugin,created by LeandroVieira Pinho, is a veryeasy way to create anattractive, single-pagephoto gallery. You cannavigate through a seriesof photos by clicking aNext or Previous buttonthat appears when youmouse over the image. Inaddition, the left andrightarrow keys, as wellas the P and N keys, letyou navigate through thegallery of large images.

The Basics

jQuery lightBox is very easy to use - you just need to set up your web page withlinks to the images you wish to display, attach.css and .js files to the page and addone line of code to call the light box into action.

Set up your gallery page.

There is not really much you need to do - just add links to the larger images youwish to display on the page. These could be links added to thumbnail images – sowhen the thumbnail is clicked the larger image appears. The important thing toremember is that the link points to a graphic file - a .png, .jpeg, or .gif file – not to a web page.

In addition, you need a way to identify just the gallery links (as opposed toother links on the page). One way is to wrap the links in a <div> tag with a specificID - gallery, for example. Then you can target just those links with a selectorlike '#gallery a'. Another approach is to add specific class names to eachgallery link: for example, <a href="images/terrier.jpg"class="gallery">. Thenyou can target those links with a selector like 'a.gallery'. This last method ishandy if the links are scattered around the page and arenot contained in a single<div.

Note: To add a caption to a photo, just supply a title attribute to the <a> tag that links to the large image.

For example:

<a href="images/potato.jpg" title="A handsome terrier">

Download the jQuery lightBox files and put them into your site.

You can find the files at

There are a handful offiles you will need - a JavaScript file, a CSS file and several graphics files.

The JavaScript file is named something like jquery.lightbox-0.5.js where 0.5represents a version number. Your best choice is the minified version - jquery.lightbox-0.5.min.js - which is a compressed version of the file. You can place this file anywhere in your site though a commonapproach is to put external JavaScript files in a folder (named something likejs or libs) in the root folder of your site.

The CSS file, jquery.lightbox-0.5.css, can also go anywhere in your site. Youmight want to put this in a folder where you keep all of your external CSSfiles, or if you are just adding the light box effect to a single page on your siteyou can put the file in the same folder as the light box enhanced web page.

jQuery lightBox depends on five graphic files: lightbox-blank.gif, lightboxbtn-close.gif, lightbox-btn-next.gif, lightbox-btn-prev.gif and lightbox-icoloading.gif. Some of these images are buttons for moving between imagesand closing the large image overlay. All five files should be located in a foldernamed images, which is located in the same folder as your lightBox-enhanced web page. In other words, the jQuery lightBoxplug-in expects theimages to be in a specific location

Attach the external style sheet to your page.

QuerylightBox uses some fancy CSS to achieve the dark, transparent overlayeffect and display the pop-up image. Attach this file as you would any CSS file.

For example:

Most JavaScript programmers place any style sheet information before theirJavaScript programming - some JavaScript programs depend on having thestyle sheet information available first, in order for the program to work correctly.

That is especially true of many jQueryplug-ins - so get in the habit of placingall style sheets before JavaScript files and programs.

Attach the JavaScript files.

jQuerylightBox gets most of its power from the jQuery library, soyou must first attach the jQuery file to the page. Also, the lightBoxJavaScript file (like any JavaScript that usesjQuery) must be attached after the jQuery file.

For example:

Add a <script> tag, the jQuery ready( ) function and call lightBox.

GettinglightBox to work requires just a single line of JavaScript. You need to put that code inside a jQueryready( ) function, which is run when the browser has processed the HTML and is ready to manipulate the DOM.

Forexample:

$(document).ready(function( )

{

$('#gallery a').lightBox( );

});

</script>

The lightBox( ) function must be applied to just the links that point to the imagefiles you wish to display. You use a jQuery selector - $('#gallery a') - for example, to tell lightBox which links to use. In this example, any <a> tag inside anothertag with an ID of gallery becomes part of the lightBox effect.

lightBox works really well with a gallery of thumbnails to create a slideshow effect where a visitor canclick a Next button to step through each photo in the gallery. However, you can also use it to display a singleimage on a page. Alternatively, you can apply lightBox to different images on a page so they arenot part of thesame gallery. In other words, each image will open independently, so the images arenot connected withNext or Previous buttons.You just need to supply a jQuery selector to select a single image - for example, apply an ID to a link and then call lightBox on just that one link:

$('#soloImage').lightBox( );

Now, when you click each of the gallery links, a transparent background appears over the page and a large version of the image appears in the middle of the window.

Customizing lightBox

While the general look of thelightBox effect is really impressive you may want to adjust its appearance a little. You can customize a variety of different parts of the light-Box look including the buttons that let you close the lightBox window or navigate to the previous and next images. You can also change the colour and opacity of thetransparent background that overlays the page or change the background colour ofthe caption box and picture frame.

lightBox options

The lightBoxplug-in lets you supply custom options that affect the appearance ofthe light box effect. Basically, you pass a JavaScript object literal tothe lightBox function containing the names of the options you wish to set and thevalues you wish to set them to. For example, to change the background colour andopacity of the background placed over the page.

You can create a variable containingyour new settings and pass that to lightBox like this:

var lbOptions = {

overlayBgColor: '#FF0033',

overlayOpacity: .5

}

$('#gallery a').lightBox(lbOptions);

In this example, the colour of the overlay is set to a bright red #FF0033 and itsopacity is set to 50% (.5).

jQuerylightBox accepts a lot of different options (visit for the complete list), but here arethe most useful:

overlayBgColor - The background colour that covers the page while lightBox displaysan image. This option accepts a hex colour value like #FF0033 which mustbe inside quotes:

overlayBgColor: '#FF0033'.

overlayOpacity - The opacity of the overlay. This option sets how much of thepage below the overlay should show through. You specify a number from 0 to 1. .5, for example, is 50% opacity. If you donot want to be able to see through theoverlay - for example, you want to completely black out the rest of the webpage while the image appears - set this option to 1.

containerResizeSpeed - When you move from image to image in a lightBox-poweredpage the box containing the image is animated as it changes size fromthe dimensions of the current image to match the dimensions of the nextimage. You can control the speed of this transition by setting this option. Thedefault is 400, meaning 400 milliseconds, or slightly less than half of a second.

txtImag- When displaying multiple images, a message appears below the currentimage announcing which image you are viewing and the total number ofimages. For example, “Image1 of 20”. You can change the default wordImage to something else (like Photo) by setting this option.

txtOf - Same as txtImage, but replaces the default of with the word of yourchoice. Changing this setting comes in handy if the page uses a language otherthan English or you want the message to read something universal - like “Photo1/6”.

imageBtnClose - The path to the image used for the Close button on the pop-upimage window. Normally, this option points to images/lightbox-btn-close.gif butyou can change that setting to point to a different location or to a different filename or type (for example, a PNG file).

imageBtnPrev - The path to the image used for the Previous button on the popupimage window: normally images/lightbox-btn-prev.gif.

imageBtnNext - The path to the image used for the Close button on the pop-up image window - normally images/lightbox-btn-next.gif.

imageLoading- The path to the image used for the Close button on the pop-upimage window. Normally this points to images/lightbox-ico-loading.gif but youcan change the setting to point to a different location or to a different file nameor type (for example, a PNG file).

imageBlank- InternetExplorer6 needs a special image that allows it to respondcorrectly to the mouse hovering over the image to display Next and Previousbuttons. Normally, this option points to images/lightbox-blank.gif. There is reallyno reason to change this setting unless you want to move the image to a different folder - thus changing the path.

Here is an example of how you might set these options Say you want to change thecaption text to read “Photo 1/6” and the speed at which the images change sizewhile navigating through the gallery and you want to use PNG files for the Close,Previous and Next buttons.

Just set up an object literal with those values and passit to the lightBox function like this:

var lbOptions = {

txtImage: 'Photo',

txtOf: '/',

containerResizeSpeed: 1000,

imageBtnClose: 'images/close.png',

imageBtnPrev: 'images/previous.png',

imageBtnNext: 'images/next.png'

}

$('#gallery a').lightBox(lbOptions);

In this example, the lightBox options are stored in a variable - lbOptions- in this case and then passed to the lightBox( )function. You can also simply pass theobject literal to the function (and skip the creating a variable step). For example,the above code could also be written like this:

$('#gallery a').lightBox({

txtImage: 'Photo',

txtOf: '/',

containerResizeSpeed: 1000,

imageBtnClose: 'images/close.png',

imageBtnPrev: 'images/previous.png',

imageBtnNext: 'images/next.png'

});

Both examples work exactly the same way, so use the method that is easiest for you.

lightBox images

As previously mentioned, you can use any images you would like to replacethe ones supplied with the lightBoxplug-in. You only need to set the properoptions (like imageBtnClose or imageBtnPrev) to point to your new image files.

Another method to use your own images is to simply name your images identicallyto the ones supplied with the plug-in and put your new images into theimages folder. That way you donot need to change any of the plug-in’s default settings.

However, the images you use should be close in size to the ones supplied with theplug-in. The Close, Previous and Next buttons are all 63pixels wide by 32pixels tall while the loading image is 32pixels square.

Note: You can create your own “Thisimageisnowloading” icon at the Web 2.0 Ajax icon generator: At this site, you can choose from over 20 different animated designs and even choosebackground and foreground colours for the icon.

Note: You donot need to use lightBox’s optionsettings to customize the look of yourlightBox. Simply replacing the suppliedgraphics and altering the CSS file letsyou tweak the design to better matchyour site.

lightBox CSS

A few of lightBox’s visual elements can only be controlled via CSS. For example, tochange the font used for captions, you have to edit the #lightbox-image-detailscaptionstyle in the CSS file supplied with lightBox.

In addition, to change the:

Background colour of the frame surrounding the pop-up image, edit the background-color property of the #lightbox-container-image-box style.

Background colour of the caption box, edit the #lightbox-container-image-databoxstyle.

Text formatting for the caption, edit the #lightbox-image-details-caption style.

Text formatting for the photo numbers, edit the #lightbox-image-detailscurrentNumberstyle.

Tutorial: lightBox Photo Gallery

Although jQuerylightBox is really easy to use, it is always helpful to have a step-by-step tutorial showing you how it is done. You will now take a page with abasic set of thumbnail images and turn it into a lightBox slide show.

Locate, download and unzip the folder named jQuery LightBox Site Filesfound on BREOto your MySites folder and rename the folder as jQuery LightBox.

Create a new Dreamweaver site pointing to this folder.

The folder jQueryLightBox contains all the files that you need – the jQuery library file, the lightBoxJavaScipt and CSS files and all the images required.

Open the file lightbox\lightbox.html.

This file contains a simple group of thumbnail images. Each image is linked to a larger version of the photo and all of the thumbnails are contained within a <div> tagwith an ID of gallery.

The first step is to attach the CSS file used by lightBox.

In the <head> of the document, locate the empty line below the <link> tag which attaches the gallery.cssstyle sheet file. On that line, type:

The lightbox.css file contains all of the styles used to format the background that lies over the web page, the pop-up image and the photo caption text.

Next,you need to attach the plug-in’s JavaScript file.

On the blank line immediately after the <script> tag that attaches the jquery.jsfile to this page, type:

Remember that you need to loadany jQueryplug-in files after the jquery.js file itself.

This page already has another <script> tag complete with the jQuery ready( )function and the preloading/rollover code. You just need to add the lightBox function and you set to go.

Click in blank line directly below $(document).ready(function( ) and type:

$('#gallery a').lightBox( );

All of the links that point to larger images are contained inside a <div> tag withthe ID gallery. Thus, $('#gallery a')selects those and the .lightBox( ) functionapplies the lightBox effect to the page.

Save the page and preview it in a web browser. Click one of the thumbnail images. Nowyou can see why plug-ins are so useful - you donot really have to do any programmingto get some fantastic effects!

We are missing captions for each photo. To add a caption,you donot need any JavaScript - just an HTML title attribute added to an<a>tag.

In the <body> of the page, locate <a href="images/large/blue.jpg"> and addtitle="Bluestill life" to the tag, so it looks like this:

Save the file and preview it in a web browser. Click the first thumbnail on theleft and the caption appears. Add title attributes to the other <a> tags in this<div>.

Now, you will adjust some of lightBox’s default settings to customize itslook.

Now adding an object literal between thelightBox( ) function’s parentheses.

The new code is shown below:

$('#gallery a').lightBox({

txtImage: 'Photo',

overlayOpacity: .5,

overlayBgColor: '#003376'

});

This code passes an object literal to the lightBox( ) function. Anobject literal is made up of a property name followed by a colon and then avalue. Thus,txtImage is the name of an option for lightBox andyou are setting its value to Photo. This particular option changes the default textthat appears in a pop-up box “Image1 of 6” to read “Photo1 of 6”.

The nexttwo options change the opacity to 50% and assign a different background colourfor the overlay on the page.

Save the page and preview it in a web browser.

A - JavaScript - JQuery lightBox.docVersion 1

Page 1 of 13