Lightbox Framework Add-In

Check this page for answers to common questions and issues about your lightbox. Read about the add-in here and download it here.

Support Notes and FAQs

Create a lightbox in 3 easy steps

Step 1: The first thing you need to do is prepare your images. You need the original image (the one that gets popped-up in the lightbox) and a thumbnail image (a smaller representation of the original). You can create thumbnails in any graphics program you like, but there's one I already know you have: Expression Web. It's a feature that's been around since the days of FrontPage.

Here's what to do.

  1. Create a new page and save it as thumbnails.htm.
  2. Right-click the file and set the Exclude from Publishing option. There's no need to publish this file.
  3. When you need a thumbnail, insert the original image on the page (this is the image that will be used in the lightbox pop-up).
  4. Right-click the image and then select Auto Thumbnail.

When you save the page Expression Web will default the name of the thumbnail to the name of the original image with a "_small" after it. Perfect.

To change the size of the thumbnail, click Tools > Page Editor Options > AutoThumbnail.

Step 2: Click Tools > Expression Extras Lightbox > Insert Lightbox... Pick which type of lightbox you want, set its properties, and then click Insert.

Step 3: Add additional images if needed.

Who developed the actual lightbox code?

The foundation of the lightbox runs on the popular open source jQuery javascript library. The excellent lightbox widget, which uses jQuery, is called ariaLightbox and was created by Felix Nagel.

Why is this add-in free?

As I was doing research for a lightbox (see the SEO Tools page for an example), I came across the ariaLightbox widget. Not only did it look great, it was very lightweight, cross-browser compatible, and implemented key accessibility features. It also had options other lightbox widgets did not.

Though it was easy enough to get working, it did take time and effort. Testing different themes was time consuming, too. As was testing property changes. Making edits in code was also a quick way to break a perfectly working lightbox.

To solve the issues I developed an Expression Web 4 add-in to take care of all the site and page "plumbing." It also allowed me to quickly change theme and lightbox property settings. Since the underlying code was free, I felt it only appropriate to offer the add-in for free as well.

How do I add more images to a gallery lightbox?

Switch to Code view and then look for the "eeLightbox" id value. Use Expression Web's Find utility if you can't find it. Once you've located this DIV section, copy and paste additional list items as needed. A few notes to keep in mind:

  1. The list item's HREF parameter displays the original image; the image that gets popped up.
  2. The image tag inside the list item is for the thumbnail image.
  3. Make sure the class rule "last" is applied on the last list item only (i.e. class="seriesLightbox last").

How come when I click an image it simply displays in the page?

The usual culprit is when a lightbox is added to a page and its attached dynamic web template is updated, overwriting the lightbox code in the process.

If this happens, put on your sleuthing hat and look for the following:

  1. There should be two CSS files in the head section of your page called: jquery-ui-1.7.2.custom.css (your theme file) and lightbox.css (the lightbox widget style file).
  2. The bottom of your page needs to include the following three javascript files: jquery.js, ui.core.js, ui.ariaLightbox.js.
  3. There is a function to call your lightbox that needs to be present (you can have one or both of the following script tags; they sit right below the files in the above bullet): <script id="singlelightbox" type="text/javascript"> and/or <script id="serieslightbox" type="text/javascript">.
  4. Make sure the parameters for the javascript functions in the above bullet all have a comma after them except for the last one.
  5. Make sure your site includes the widgets folder. This folder contains the css and js folders and store all the files referenced above.
  6. Make sure your browser is JavaScript enabled.

Tip: You can see all the parts and where they go by looking at the source of the Expression Extras Lightbox Framework Add-In (nah, that's not a mouthful) page.

Tip: To prevent your DWT from overwriting the lightbox code, you can create the lightobox on a non-attached page in the same folder as the page you want the lightbox on. When finished, copy the lightbox code and paste outside the non-editable regions of your DWT-based page.

When in Doubt, Chunk it Out

So you've read all the support notes and FAQs and your lightbox still isn't working. You've sent me a dozen or so emails and never got a response (and never ever ever will, I promise). No one else knows anything about what you're talking about. What to do? What to do? Here's what to do.

Copy the page with the errant lightbox to a new page and save. If attached, remove the dynamic web template. Starting from the bottom of the page, delete chunks of content. We'll call this technique "chunking." Start with chunking sentences (you may want to start with paragraphs if you have an exceptionally long page). After you delete a chunk, save the page and then view it. If the lightbox doesn't work, repeat the chunking. Do this until the lightbox works.

When the lightbox finally cooperates, go back to your original page and find the last chunk you deleted. Maybe there was an errant DIV tag some where in there. Maybe you had some HTML markup on display that was the issue. Or maybe it was some odd combination of characters that conflicted with the current phase of the moon. Whatever the issue ends up being, fix it.

Can I use another background color instead of the 10 provided?

Yes. The provided background colors are just examples. You can enter any valid HEX color.

Tip: To get the name of a color you like, create a page called colors.htm (set it to Exclude from Publishing). Add a table with several rows and columns. Right-click a cell and then select Cell Properties. Go to the Backbround color drop-down, click it and then click More Colors. This will bring up Expression Web's More Colors window. You'll see a button with an eye dropper icon on it. Click the button and then hover over the color you want. You can hover any where on your screen, not just in Expression Web. Click your mouse when you're over the color you want and Expression Web will insert the HEX color in the table cell. Copy the HEX code and use it as your lightbox background color.

Why is the offset option disabled in gallery mode?

The offset property does not work with gallery lightboxes. It works with a single lightbox widget, but not the gallery. I'm not sure why, so it's disabled for now.

Why doesn't the ajax-loader.gif display?

First, make sure the file is located in the same folder as the lightbox.css file. Both files should be in your widgets/css/ folder.

Secondly, view the image in your browser using a direct path. For example, for this site the path would be: http://www.expressionextras.com/widgets/css/ajax-loader.gif.

If you see something similar to the text below when viewing the image, then the site does not recognize the file. Delete the file from your server-based site and then re-publish the image from your local site. This should clear up the issue.

vti_encoding:SR|utf8-nl vti_author:SR|XYZPC\\Standard vti_modifiedby:SR|XYZPC\\Standard vti_timelastmodified:TR|15 Jan 2011 17:30:43 -0000 vti_timecreated:TR|16 Jan 2010 13:44:26 -0000 vti_extenderversion:SR|12.0.0.6211 vti_nexttolasttimemodified:TR|16 Jan 2010 13:44:26 -0000 vti_cacheddtm:TX|15 Jan 2011 17:30:43 -0000 vti_filesize:IR|3951 vti_lastwidth:IX|128 vti_lastheight:IX|15 vti_backlinkinfo:VX|page/temp/style.css page/temp/style.css vti_syncwith_www.expressionextras.com\:80:TW|15 Jan 2011 17:30:43 -0000
  

Can I make changes to the CSS files? Use another ajax-loader.gif?

Absolutely! Change them to your heart's content. Just remember that everytime you run the Lightbox Framework add-in all the original files will be imported back into your site. Rename the files if you don't want them overwritten.

Can I have multiple themes per page?

No. All lightbox properties and themes are applied to every lightbox on a page. You can, however, have a different lightbox theme on different pages.

What is the folder "widgets" for and why is it called "widgets?"

The widgets folder stores all the necessary jQuery javascript files, jQuery theme files, jQuery CSS files, and ariaLightbox files. If you delete this folder, your lightbox won't work.

It's called "widgets" instead of something else, like "lightbox," since future add-ins might take advantage of these folders. There are also many jQuery widgets available on the Web that you may want to incorporate into your site. Instead of creating folders for each widget and duplicating the required jQuery files, you can use one generic folder.

I see many folders in the widget's CSS folder. Can I delete them?

Every theme gets its own folder. When you apply a theme a folder with that theme name gets created. The only theme folder you need is the one you decide to use. All others can be deleted.

Is there a minified version of the ariaLightbox widget?

Yes. The add-in installs the minified version of the jQuery library as well as a minified version of the ariaLightbox widget. Both are located in the add-in's installation folder (usually \Program Files\Expression Extras\). Import the min files into the widgets/js folder and then replace jquery.js with jquery-1.3.min.js and ui.ariaLightbox.js with ui.ariaLightbox_min.js.

How do I remove the add-in?

Working with Add-ins has all the info you need on how to remove and uninstall an Expression Web add-in.

What version of jQuery and the ariaLightbox widget does the add-in use?

  • jQuery versions used: jQuery 1.3.x and UI 1.7.x
  • ariaLightbox version used: 1.0