Continuing on from my previous post “Collapsible content in drupal”, I will explain how to integrate the thickbox functionality into drupal. You may be asking why I would need to post a blog on this as integrating thickbox into a site is pretty straight forward, but the tricky thing about this is, we are wanting to add it to content that is created by the client, which will display multiple entries on the one page. So thickbox needs to work for each individual entry, and as the thickbox link needs to target the specific content to know what to load, we need to manipulate the content so it will work. Below is a quick write up of how to add a new content type and manipulate it to hold the thickbox functionality.

For this example, we will have a title, some “teaser” text which will display in a view, and when you click on the title, a thickbox window will display a new text area specifically setup to show that window.

This solution is for Drupal 5.11
Modules Used: Content Construction Kit (CCK), Content Templates, Views

Step 1. Enable the above listed modules (if not already)

Step 2. Download thickbox

Go here, download, then upload the thickbox.js and thickbox.css to the /misc folder in your drupal install.

Step 3. Create a new content type

When creating, leave the title field and remove “body” from the body field label as we dont want to use this as a field.

Step 4. Add some additional fields to your new content type.

Create a text area to show your “teaser text”, and create another text area that will hold the text that will show in your thickbox window.

Step 5. Create a view

A view now needs to be created to display your new content type. Go to site building>views>add Add your view name, check “provide page view”, give it a url, select “list view” for view type, and give the page a title. Under fields, add Node: Body. For Filters, have Node: Publish equals yes, Node: Type is one of “content type name you created”. Now add the following code into the Header section of the view and select input format as PHP.

Then save your view.

Step 6. Create a content template for your content type

This will customise the output of the view so we can add the thickbox functionality to the title. Go to Content Management>Content Templates and select “create template” next to your new content type. In the body section tick “affect body output” and in body template add the following code (you will need to update the below code to reflect your content type, eg. Change field_text to the name of the field used for your “teaser”, change field_pop_up_body to the name of your field that will contain the text for the pop up window. Main class can be as you wish and change the height and width of you thickbox window to the size you need)

Breaking down the above, we are basically rewriting how the view will load the content. This is needed because the thickbox link needs to target the content to load with clicked, and as the view is showing multiple nodes on the one page, we use the unique id of the node.

So what we are doing is wrapping the whole thing in a new div. Placing the node title in a h3 and adding the thickbox link around it. After the h3 we have a div that will display the text that is our “teaser” text. After that we have another div, styled to display none, which holds our text to show in the thickbox window. When the title is clicked, it uses the id of the node and matches it with the div id to target and load the popup window.

And hit submit to save.

Step 7. Add some content

Now to test, add some content (more than one) to your new content type and test using the view url you set up. If done properly, your view should be displaying a list of titles with teaser text. Clicking on a title should then display a thickbox window showing the pop up window text.

You will propably need to style the view with css to have it show more nicely.

For a working example, please see http://www.newsawards.com.au/08-winners (example shows additional functionality like images etc. but the basis of this post was used with just some minor additions)