• Choose a category
• All
• Classic-Fiction

By Root 1113 0

to create some world-class effects. Our client is over the moon; we’ve given him his “Web 2.0,” and now his questionable startup has found favor with several of the big social networking sites. He’s asked us to add in some “stuff” that really cooks: “image galleries, slideshows, fading effects—the works!” And why not? We have the tools, and we have the talent!

It would be a fairly boring Internet (at least visually) without images; much of the content we receive on our web-based travels is in the form of pictures and design elements such as borders, icons, and gradients that help to define our interaction with a web page. When we combine all of these elements with a healthy dose of jQuery, we start to see some vibrant and startling effects emerge. As well as the bog-standard components we’ve come to know and love, jQuery provides the means for implementing some less common, relatively new effects and features that would be difficult to do in JavaScript alone.

Lightboxes

Our client wants Web 2.0, so let’s give him the quintessential Web 2.0 effect: the lightbox. A lightbox—a term borrowed from photography—is used is to display full-sized versions of an image thumbnail in a modal dialog. Typically, the entire background becomes darker to indicate that it’s been disabled. The user must interact with the image (by hitting a close button, for example) to continue working on the page.

Custom Lightbox

Lightboxes are very common these days, and many feature some very complex functionality: animations, transitions, as well as the ability to display video, or to load content via Ajax. As always, there are some excellent plugins available that do all this, and we’ll be visiting one of them in the next section—but for the moment, we’ll build our own lightbox.

Why build our own? For our example, we just want a basic image view without any fanciness, and the kilobytes that fanciness costs us. We’ll also have the chance to look under the hood and see how this type of functionality is implemented.

Our lightbox will be extremely simple: any HTML link that has a class name of lightbox will, when clicked, pop up the image file that the link points to. The picture will be centered on the screen, and the surrounding areas will be disabled and darkened as a visual cue. The effect is demonstrated in Figure 4.1.

Let’s start with the HTML links. They’re just tags pointing at image files with a lightbox class, so we can target them in our jQuery:

chapter_04/01_lightbox/index.html (excerpt)

Pic

When the image is displayed, we want the entire screen to go dark. How do we do this? The easiest way is to add a large div to the page that’s as tall and wide as the screen itself. Inside that div, we’ll add another div into which we’ll load the image.

Figure 4.1. Our lightbox effect

The styling for the overlay is quite straightforward: 100% height and width, and a black background. Later, we’ll fade the opacity of the element to give it its shadowy appearance. One other trick is to add a spinning loader image to the center of this element. When we start loading the image the spinner will display as part of the background. It will appear to vanish when the image loads, but in reality it will simply be hidden behind the image:

chapter_04/01_lightbox/lightbox.css

#lightbox_overlay {

position:absolute;

top:0;

left:0;

height:100%;

width:100%;

background:black url(loader.gif) no-repeat scroll center center;

}

#lightbox_container {

position:absolute;

}

Next, we add a click handler to our lightbox links. When they’re clicked, we’ll add the dark overlay element, the image container, and the image itself. The container isn’t strictly necessary for our bare-bones example, but is helpful when you want to extend the lightbox’s functionality, such as adding borders, descriptions, or Next and Previous buttons:

chapter_04/01_lightbox/script.js (excerpt)

$('a.lightbox').click(function(e) {

// hide scrollbars!

$('body').css('overflow-y', 'hidden');

$('

')

.css('top',