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 =;
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 method as the event handler, we lose the
implicit binding of this to the lb object, which only occurs when the function is
Search WWH ::

Custom Search