The problem is that when the thumbnails are loaded onto the page (via Ajax, i.e. jQuery's .load() function) they do not have any events bound to them.

/* Your lightbox plugin */
//AN_Xml:$("photos a").ceebox();  
//AN_Xml:
//AN_Xml:/* Basics of Ajax */
//AN_Xml:$("nav a").click(function(e) {
//AN_Xml:    e.preventDefault();
//AN_Xml:    $("#main-content").load(this.href);  /* Thumbnails loaded from here */
//AN_Xml:});

The way that the lightbox plugin (probably) works is that it binds click events to the elements you passed in that selector (the thumbnails) when the page loads, and those click events do the lightbox action. Since the newly loaded thumbnails have no click event, the lightbox action does't work.

One way to fix it is to call the lightbox plugin after the content loads, in the callback function of the load function:

$("photos a").ceebox();  
//AN_Xml:
//AN_Xml:$("nav a").click(function(e) {
//AN_Xml:    e.preventDefault();
//AN_Xml:    $("#main-content").load(this.href, function() {
//AN_Xml:
//AN_Xml:              /* Callback function */
//AN_Xml:              $("photos a").ceebox();  /* Call this again */
//AN_Xml:
//AN_Xml:    });
//AN_Xml:});

A little repetitive, but that'll do the trick.

A Better Way with Delegate

While this is "just how JavaScript works" it's a known pain in the butt. Since jQuery is a library that exists to ease pains like this, of course it has a better way. That way is the .delegate() function, where instead of binding events to the individual elements, you bind an event to an element higher up the DOM tree, which isn't likely to be replaced via Ajax, which watches for those clicks.

This relies on something called event bubbling, which is a neat and important concept in JavaScript (really: the DOM model). If you click on a thumbnail, it will trigger a click event on that element, then a click event on it's parent element, and a click event on it's parent's parent element, all the way up to the root element. Because of this, we can watch for clicks on deeper-down elements from higher-up elements.

Unfortunately with our lightbox example, you would have to alter the plugin itself to get it to use delegate instead of binding directly to the elements. Definitely do-able but trickier, since you probably aren't as intimately familiar with that plugin's code as you are your own.

Listen to Remy Sharp

As this article was drafting, Remy Sharp put out a video screencast about this exact topic. He's way better at explaining it than me, so please go watch that.

Advertise here with BSA

Just One Of Those Things You Need To Understand About JavaScript is a post from CSS-Tricks

95% of traffic to CSS-Tricks has a screen resolution of larger than 1024x768.

And I got all kinds of responses like: That's such a skewed statistic!!!

How are my own stats on my own website skewed?

OK, I know what they meant, they meant that that 95% number isn't indicative of most websites, it's only CSS-Tricks visitors. So people shouldn't quote that number out of context or use it to inform design decisions on other websites.

But that highlights an interesting point. Who cares what the global average of internet user screen size is? The only stats that matter are your own. Unless you are starting a new project from scratch and need a baseline, in which case I think you are better off finding a related website and kindly asking for their numbers than using a global average.

That said, I'm not sure that particular statistic will inform my design decisions either. As I tinker with a redesign, I plan to support all screens large and small.

Advertise here with BSA

The Stats That Matter: Your Site’s Stats is a post from CSS-Tricks

Developers: We've released the Wufoo Form Embed Kit, which is a way you can build form embedding integration with other apps easily. As in, you don't have to learn our APIs or do custom design work. Would make for neat CMS plugins!

Designers: If you didn't know you could apply your own custom CSS to Wufoo forms and completely transform their appearance, you can, and here's a tutorial getting you up to speed. And did you know you can customize the look of radio buttons and checkboxes with just CSS?

Advertise here with BSA

New at Wufoo is a post from CSS-Tricks