Awesome Box has been archived. This project is no longer supported. Find out why…

Awesome Box

New: v2! Awesome Box is a very simple and unobtrusive Javascript that loads images in the same window, overlaid over the page's content.

What's New?

  1. Internet Explorer 6 Support!
  2. Key navigation using 'n' for next, 'p' for previous and 'x' for close.
  3. Faster and smoother animation.
  4. Better image dimension calculation.

Download

Examples

Single Images

Photo Set

Example of a 2MB image, 2560x1920 — automatically scaled to fit

How to Use

Awesome Box is incredibly easy to use. In the <head> tag of your HTML pages, include the three included Javascript files and the included CSS file:

<script src="http://yui.yahooapis.com/2.2.0/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>
    <script src="http://yui.yahooapis.com/2.2.0/build/animation/animation-min.js" type="text/javascript"></script>
    <script src="/path/to/awesomebox.js" type="text/javascript"></script>

    <link rel="stylesheet" href="/css/awesomebox.css" type="text/css" media="all" />

Now you will want to customize Awesome Box quickly:

  1. Open awesomebox.js
  2. Locate and modify the path to aBox-loading.gif (line 22)
  3. If you are using Google Analytics:
    1. Modify var siteUrl to match your domain (line 23)
    2. Locate line 426, //urchinTracker(aPreload.src.split(siteURL)[1]); and remove the //

Linking to Images

When you are using thumbnails to link to images, you will want the HTML to be in the following format:

<a rel="Slideshow Name" href="link/to/photo.jpg">
    <img src="link/to/thumb.jpg" title="Image Title" alt="Description Text" />
    </a>

Note that the rel="" on the link is optional for slideshows.

Using standard text links:

<a rel="Slideshow Name"href="link/to/photo.jpg" title="Image Title">Description Text</a>

Now Awesome Box should work. Hooray.