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?

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

Download

Awesome Box zip package

Examples

Single Images

Use the <em>alt</em> attribute on the <em>img</em> tag for a longer description.

Photo Set

Click next> to continue with the set. Alternatively, you can press <em>p</em> or <em>n</em> on your keyboard to navigate the set. When Awesome Box is open, just copy the URL in your browser to link directly to an image. Press <em>x</em> on your keyboard to close the Awesome Box.

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:

Open awesomebox.js Locate and modify the path to aBox-loading.gif (line 22) If you are using Google Analytics:
Modify var siteUrl to match your domain (line 23) 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.

You are viewing a mobilized version of this site...
View original page here

Mobilized by Mowser Mowser