HTML and CSS Reference
In-Depth Information
lightbox toggler; when the anchor is clicked, the page it links to is loaded into a div
that is positioned above the current page. Listing 6.1 shows a rough outline.
Listing 6.1
Lightbox pseudo code
var lightbox = {
open: function () {
ajax.loadFragment(this.url, {
target: this.create()
});
return false;
},
close: function () { /* ... */ },
destroy: function () { /* ... */ },
create: function () {
/* Create or return container */
}
};
function anchorLightbox(anchor, options) {
var lb = Object.create(lightbox);
lb.url = anchor.href;
lb.title = anchor.title
||
anchor.href;
Object.extend(lb, options);
anchor.onclick = lb.open;
return lb;
}
Note that the code will not run as provided; it's simply a conceptual exam-
ple. The details of
Object.create
and
Object.extend
will be explained in
Chapter 7,
Objects and Prototypal Inheritance,
and the
ajax.loadFragment
method can be assumed to load the contents of a URL into the DOM element
specified by the
target
option. The
anchorLightbox
function creates a new
object that inherits from the
lightbox
object, sets crucial properties, and returns
the new object. Additionally, it assigns an event handler for the
click
event. Using
DOM0 event properties will do for now but is generally not advisable; we'll see a
better way to add event handlers in Chapter 10,
Feature Detection
.
Unfortunately, the expected behavior fails when the link is clicked. The reason
is that when we assign the
lb.open
method as the event handler, we lose the
implicit binding of
this
to the
lb
object, which only occurs when the function is
