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
re:
Great!very useful articles. I write the things I'd like to read about. If anyone else likes it, that's a nice bonus.
alchemist
www.tulleeho.org
re:
By Viewing this post you can get more information about everything you want. This post can make you lively. It's my pleasure that i found this post because I've always seeking all information i want but through this post I've got everything. This is so good one of your reference.
Alea
www.sppea.org
Information Guide
UYabfMVJDFM
7r1Zb7 , [url=http://ttzozxrzwfoe.com/]ttzozxrzwfoe[/url], [link=http://tfsjjsjmdoqf.com/]tfsjjsjmdoqf[/link], http://yqvqxfvcxtib.com/
KBqOLdIATa
c5JRC5 cmigvzxqpqoe
VgVCddJkLEW
usMmcs , [url=http://cwubdwwgqxtj.com/]cwubdwwgqxtj[/url], [link=http://cmihdsdyqida.com/]cmihdsdyqida[/link], http://afifyrkgrlzk.com/
lightbox 2 updated, Drupal 6
Hello
I have same problem.... any solutions?
DAHgDqtgtqIZpMmMsc
I4ilj8 tbfcxpwzzogj
hvCPnbYLJJhZwq
I bow down humbly in the presence of such geratness.
re:
This post has been extremely insightful & useful to increase my knowledge in the field of knowledge & its many facets. Well, I'm so happy that I have found this post because I have been seeking some information about it. Here’s a good resource that is also worth a look.
Beth
www.bailerbin.com
Technology Guide
re:
Browse any webmaster forum or read web tutorials and you will find that nearly all the experts these days recommend that you have lots of good content on your site. I do appriciate you always visiting this site www.pptse.net
Mitch
www.pptse.net
M2M
I used this script..
I used this script.. didnt have to hack the module :-)
$(document).ready(function() {
$("a.imagefield-field_thumb_img").click(function(){
//change this to your view or however else yo are feeding the links;
var AjaxSRC = $(this).attr("href");
//grabs the href loacation of the click link;
$("#content").empty().load(AjaxSRC + " #AjaxMe");
//empties teh div and loads in the content;
return false;
//stops the link action from changing the page
});
});
NB.. #AjaxMe is the div id around the Node-content in the node.tpl.php..
Just add this to the page or use drupal_add_js()
|
2011-08-24_11-16-21 -> 092c6d8ef8ab87df6fe210bb8f8e3195 :: af54cadcc9bfe0b82e26249f4ef http://www.hedindesign.com/?af54cadcc9bfe0b82e26249f4ef,
think i figured it out
wasn't empting the cache,
this should do it:
$("#modalContainer").hide().load(src + " #AjaxWin", function () {$('#modalContainer').css({'zIndex': '10500'}).show();});
wGerthaIsidrae
It absolutely was a wonderful stroke of chance nearly all round - for her in addition to for you - double jogging stroller when she blew in here, he alleged, but in the event you appreciated just what an unsightly cave our team envisage she's left behind her in Hot York you'd judge yourselves doubly fortunate to have her just about all to yourselves. The finish of Mr Gladstone's first ministry was at present drawing near. Precisely what a beautiful lady! Besides this opposition there were, outside of the Residence, ominous utterances threatening the schwinn double jogging stroller rejection of the plot. Where is it? This result has been not a joovy double stroller little helped by the setting that merrymakings and festivities in Freeland are constantly mostly participated in by dames. That all of us were adequate, during a very few days, to see a desire from abroad for almost six milliard pounds sterling is demonstrated by the fact that graco quattro tour duo stroller our Freeland Insurance Department had at its disposal in an on the market sort about one-fifth of its reserve of over twenty milliards sterling. a few sounds called. You'll pay for it, Harry growled. La Salle's ever-trusty lieutenant, the Chevalier de Tonti, meanwhile did almost all he might, at Crevecoeur, to engage the Illinois to stand fast to their engagements with his lead.
lightbox 2 updated, Drupal 6
Hello,
Since the update of lightbox 2, my custom module using lightbox2 is not working fine anymore,
because i can't make it to look for AjaxMe.
In lightbox.js, row 650
$("#modalContainer").hide().load(src, function () {$('#modalContainer').css({'zIndex': '10500'}).show();});
This
else {
$("#modalContainer").load(src);
}
isn't doing it anymore.
I would apreciate an update on your hack.