Adding jquery thickbox to a View dynamically without theming
jQuery is built-in to Drupal 5.x. This document describes how to add the jquery thickbox plugin to a View dynamically without having to create a custom theme. I am using a Calendar View in this example.
Once you have a Calendar View set up, click to expand the Header portion under Page. Here you will paste the javascript to dynamically assign the class="thickbox" to the appropriate elements on the page and then initialize the thickbox plugin.
<h1 class="title">Calendar of Events at The Center</h1>
<script>
$(document).ready(function() {
$(".calendar-calendar .title a").addClass("thickbox");
$(".calendar-calendar .title a").each(function() {
$(this).attr("href", $(this).attr("href") + "?event-only=true&height=300&width=400");
});
tb_init('a.thickbox, area.thickbox, input.thickbox');
});
</script>Be sure your Header's Input Format is "Full HTML."
What happens: Once jquery is ready, it gathers up all <a/> tags that represent the titles of calendar events. jquery then both adds the class name "thickbox" and appends some additional thickbox params to the original link/url. Notice, I also included the name/value event-only=true. In my page.tpl.php, I check for $_GET['event-only']==true and only output print theme('node', $node); if so. This strips the node to just the node contents-- a suitable "calendar event popup" for showing event details. The node can be further themed as normal.
The obstacle overcome with this technique is that $(document).ready() fires off not only our assignment of class="thickbox" assignment, but also, within thickbox.js, tb_init()-- before elements can receive their class="thickbox" assignments. The simple workaround was to call tb_init() again after all assignments and url rewrites were complete.
Other jquery plugins would possibly follow the same technique.