Drupal Easy Ajax Content, Lightbox2, Nodes and a few hacks

It seems like every new site I build, there is a need to pull another node in via Ajax. This can be done with the lightbox overlay or by emptying a div and refilling it with another node.

Hacking Lightbox2

Lightbox2 Module has this functionality built in with one flaw. It will pull the whole page in when using the rel="lightmodal" call. To fix this is a easy two step fix:

Number one: Put a ID on the node.tpl content div. This allows jquery to just grab your node.

We added the ID AjaxMe above.

Next in lightbox.js located in the lightbox2 module then js folder we need to add the content div id to the lightmodal .load function. For Drupal 5 it is located at line #608 and for Drupal 6 at line #613 (these numbers will change as updates are made).

else {
  $("#modalContainer").load(src);
}
//Change this line to:

>

else {
  $("#modalContainer").load(src + " #AjaxMe");
}
//Now change it to add the #AjaxMe id.  Other wise it loads the whole page;

That is it. Now if you have a link on your site with the rel="lightmodal" added to it will grab the node and serve it up in a lightbox.

Test it out: Lightbox Ajax Test Link

Next, Using jquery to AJAX a node in to a layout.

you will need the above modified Node.tpl file and jQuery loading on your pages with add_js

Setup your target div:

This is the div we are going to empty then ajax in our node content. This can be text, images or a video. Lets say you make a view of a list of nodes. You would use the view ID then the a tag to target that list.

First the link:

Next the Javascript:

That is it! Try it out:

Test it out: Ajax Test Link

Without the Ajax: View the page without Ajax