Drupal Easy Ajax Content, Lightbox2, Nodes and a few hacks
Posted: erik-hedin 14 October 2009
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:
Content to be emptied!
Test it out: Ajax Test Link
Without the Ajax: View the page without Ajax
gorgeous, thankyou very much
Superb tip. Works like a charm. Thanks!
I cannot find the line in lightbox.js in the last lightbox2 dev
The closest thing I find is at #635
else {
// Use a callback to show the new image, otherwise you get flicker.
$("#modalContainer").hide().load(src, function () {$('#modalContainer').css({'zIndex': '10500'}).show();});
}
How this should be changed?
Thanks!
Hi,
Thanks for this tutorial and the code. They're great. Very clear and I have the lightbox working...I have the ajax to node with jquery working also but I have one problem with the functionality-which I would think could also be useful to others.
I'm trying to set up a page that displays a number of node teasers with a 'read more' link at the bottom of each one. That link opens up the full node below the teaser with Ajax. No problem, this works. Except, I quickly realized that every article opens up in the same div...under the first article on the page rather than under the actual article itself.
So, I now have the target div created dynamically via a view and it uses the node id so that each article has a unique target div...like so:
for example the AjaxTarget div for node 1971 is now:
So in the javascript the AjaxTarget also needs to be created on the fly using the node id. Is there some way that the node id can be passed to the javascript so it would look something like this:
//grabs the href location of the click link;
AjaxTarget=the.node.id.of.this.article
$("#AjaxTarget").empty().load(AjaxSRC + " #AjaxMe");
//empties the div and loads in the content;
I've tried lots of combinations but my javascript isn;t up to getting it to work.
thanks!
I cannot seem to get this to work. Here is the example I have set up: http://write.empire-edutools.net/content/can-topic-be-researched
Please advise?
I figured it out as it was a minor overlook on my part. Always is something small, and staring you in face ;)
Hi,
first: thank you for your documentation!
But, do you know how to open a lightbox Modal Container per JavaScript like
$('#mylink').click( function()
{
Lightbox.start($("#AjaxTarget"), false, false, false, true);
});
(This example throw error because of some missing image data, since i'm loading some html-page-content.. )
Thx,
1
Totally, I do that the opposite way. Create a hidden link with the rel=lightmodal then assign your function to click the link $('#StartLink').click(); If you need to pass in some dynamic info Lightbox.start('TheHref', yada, yada, yada, yada); will work also. Sounds like you need a different true to fire the lightmodal param rather than image function.
Awesome!
Thanks for the great idea. But I cannot get your first hack to work :
- created div ID
- modified lightbox.js
But it stills grabs the whole page and not the div content.
Drupal 6.15, lightbox2
Please help !
LIAR, IT DOSEN'T WORK!!
Sorry, I just updated the site to Drupal 6 this weekend. The div was id'd differently in the new templates. Thanks for pointing that out.
I'm sorry for being so hard, i was just trying to call your attention becouse I think is a very good tutorial but it has to be support for a real result(like it is now).
Thank for the answer.
Hi,
great tutorial.
I'm trying to take a node with cck fieldgroup tabs, and load them into a different div (like your 2nd example)
but the tabs don't appear.
this is some kind of js, issue but I simply don't understand it.
i'd appreciate any help you might have.
Idan
hi,
nice trick but i want to load content in lightbox frame....
can u pls help me out with this
any help appriciated
thank u
Updated method:
http://drupal.org/node/252260#lightbox-node