How do I place content in a thickbox?

Looking at some examples from: http://www.privateairmanagement.com/test

Try a few of the links to the different content.
I tried the iFrame test and it works well.

<a href="node/1?keepThis=true&amp;TB_iframe=true&amp;height=500&amp;width=600&amp;modal=true" title="Node Title" class="thickbox">Node Test</a>

The only problem doing this is that you get the full page of info.. But you can take a look at the rounded box example.. Use an inline that calls a div box that doesn't display on the main page and only displays when the thickbox is call.

that should at least get you going and let you do some tests

No news about that?
Maybe a sample of a wrapper that export only content's node and not the full page with theme.

Thanks

Saluti
BES

You could use http://drupal.org/project/taxonomy_theme do display the content within http://yoursite.com/for-thickbox without any menu for example.

Sebastian

That is a nice suggestion. But you will need a fall back if the user has javascript turned off.

function _phptemplate_variables($hook, $vars = array()) {
  ...
  switch ($hook) {
    case 'page':
      ...
      if(isset($_GET['TB_iframe']) AND $_GET['TB_iframe'] == 'true'){
       $vars['template_files'] = array('page-displaythickbox');
     }
      break;
     ...
   }
}

I haven't tested it, but i think the above, if placed in the template.php file, it should allow you to have a custom page layout (page-displaythickbox.tpl.php) for any pages which are accessed via a thickbox iframe link. So you can strip out the un-needed navigation bits and side columns.

To get around the JS problem, you could have an additional param thats added by jquery, to all links on page, at load and check for that as well? Not sure about this, needs more thought - any one?

Drayen

I've had a 2nd thought on this.

Instead of checking for TB_frame param, use http://drupal.org/node/139766, and create a /thickbox/* path... then have an additional bit of jquery script to update any thickbox links by pre-apending "/thickbox" to the URL (only for non image links).

This will allow you to display node content in a thickbox when JS is enabled, but keep the links clean for non JS enabled browsers / users !!

What do you think?

Nice approach!

thanks,

I have infact just got this working, i went back to the
if(isset($_GET['TB_iframe']) AND $_GET['TB_iframe'] == 'true'){
method, but you have to use KeepThis instead of TB_iframe, as it get stripped out... here is the JS you need...

       $(document).ready(function(){
		$('a.thickbox-iframe').each(function(){
			var jqthis = $(this);
			jqthis.attr('href', jqthis.attr('href') + '?KeepThis=true&TB_iframe=true&height=400&width=600');
		});
		tb_init('a.thickbox-iframe');
	});

So to use this, put the snipit somewhere and give the links you want to use the class "thickbox-iframe"

Then add the following to your template.php

function _phptemplate_variables($hook, $vars = array()) {
  ...
  switch ($hook) {
    case 'page':
      ...
      if(isset($_GET['KeepThis'])){
        $vars['template_files'] = array('page-displaythickbox');
      }
      break;
     ...
   }
}

and then have a stripped down page-displaythickbox.tpl.php, i changed print $scripts to

  <?php 
  //removing thickbox to avoid loops
  $scripts = str_replace('<script type="text/javascript" src="/sites/all/modules/thickbox/thickbox.js"></script>', '', $scripts); 
  $scripts = str_replace('<script type="text/javascript">Drupal.extend({ settings: { "thickbox": { "close": "Close", "next": "Next \x3e", "prev": "\x3c Prev", "esc_key": "or Esc Key", "next_close": "Next / Close on last", "image_count": "Image !current of !total" } } });</script>', '', $scripts);
  //and drupal.js
  $scripts = str_replace('<script type="text/javascript" src="/misc/drupal.js"></script>', '', $scripts);
  print $scripts;  
  ?>

Will post the site with it working once its published.

sorry dupe post

sorry - dupe post

sorry - another dupe post :(

Site using this : http://www.liveatthechapel.co.uk/

specifically : http://www.liveatthechapel.co.uk/past-shows

Click the "view images" or "view videos" links.

Drayen

@Drayen - where did you make that change to print $scripts ? In your page.tpl.php or page-displaythickbox.tpl.php ?

And the box of code with your js, that can be thrown in a file and pulled in with drupal_add_js() correct?

EDIT: Nevermind - wasn't thinking when asked

regarding http://www.privateairmanagement.com/test - very nice!

could someone please give a step-by-step how-to for setting this up in drupal?

i've been trying for days to set up a page of video thumbnails so that when you click 'em, a video window pops up.

i managed to do it with pictures:

http://www.hendry.de/web/content/bonjour-tristesse

...now i'd like to do it with swf tools and .flv (flash video) files. please help! thanks a lot in advance :-)

We had good results using the component module for drupal, that has a function to return just the node without the rest of the page template.

what happens when you click on the link with the 'thickbox' class is it does a AJAX style callback and get the contents, so all we do is connect it to the "/get" argument that triggers the component module that just returns the body

so it was just a matter of doing this..

<? print l('click here ', 'node/93/get',array('class'=>'someclass thickbox'),"height=300&width=450"); ?>

dgtlmoon: which one is the "component" module? your link leads to a "page not found", and i can´t find any info on a drupal module with the title "component"...

Hmmm this one ?

http://drupal.org/project/component

i like the idea of the component module, but my solution while slightly more complicated, does mean if the user has java script turned off they still get a nicely framed and themed page, with the content in it, instead of just the content on its own.

*disclaimer i didn't totally RTFA, so there may be a way to do what i described with the component module - if so, please post how here !

just my 0.02 euros.

Drayen: You seem to have your finger firmly on the pulse of this.

Could you possibly direct me to a tutorial/guide (or tell me) how to use Thickbox to show a full node (containing text and image(s)) from a list generated by a View being displayed in a block.

Hmm - sounded a little confusing. I would essentially like to be able to do this:

- Product 1 --> Display node data only (not full themed page) for Product 1 in Thickbox
- Product 2 --> Display node data only (not full themed page) for Product 2 in Thickbox
- Product 3 --> Display node data only (not full themed page) for Product 3 in Thickbox
- Product 4 --> Display node data only (not full themed page) for Product 4 in Thickbox

The Product list is dynamically generated, in a block provided by a View.

I hope that this is simple, but so am I so if you could do (or direct me to) a step by step that'd be great.

Thanks in advance.

dgtlmoon: thanks -very- much. it almost works for me! the only problem: this method seems to break the embed funcionality of swftools.module
- regular node [works]: www.hendry.de/web/movies/1818_pingpong
- component style [flash broken]: www.hendry.de/web/movies/1818_pingpong_thickbox
any idea on how to work around this?

drayen: thanks a lot too. twould also -love- to see a step-by-step.

hey hendryman, i gave chris.wells a one to one tutorial the other day on setting this up on the understanding he would write it up for this thread. Hes on a project at the moment which he needed this for, he assures me that he will write the tutorial as soon as hes done with the current project (or sooner if he gets the chance).

Ahh what happens to swftools ? how does it break?

dgtlmoon: swftools error message "Sorry, flash is not available." (click the second link in my previous post to see the error)

chris.wells/drayen: any news on the potential step-by-step?

I just sent him a nudge, hopefully he will get onto it this week.

And indeed I shall...

Sorry for the delay in the guide, but finally here it is. I'm writing this with the hope that people have a basic understanding of the functionality of Drupal - so if I can understand it (who has been on it for a few weeks) then anyone can!

1) Download and activate the latest version of Thickbox (http://drupal.org/project/thickbox)

2) Make sure that you have Clean URL's switched on

3) Create a View that will bring up one product (or whatever you're trying to show in TB)
- Page
- List View
- Select the fields you want and take the node title/nid as an argument.

4) Edit your template.php file to create a theme for the view. To create the TB nodes as a list, I used this:

$output .= '<a href="/path/to/products/'.$node->nid.'" title="'.$node->title.'" class="thickbox-iframe">'.theme('imagecache', 'product', $node->field_page_image[0]['filepath']).'</a>';

I'm using image cache to handle thumbnails. If you're not, just replace '.theme('imagecache', 'product', $node->field_page_image[0]['filepath']).' with tags.

5) Visit http://drupal.org/node/107803#comment-647073 and use the first javascript section. I added it to a new .js file and called it in the template.php function using 'drupal_add_js(path_to_theme().'/tb_fix.js', 'header');'.

6) Now you need to create a file 'page-thickbox.tpl.php' to theme the page that is going to be opened as a thickbox window(-ma-jig). I used page.tpl.php as a template for this new tpl file.

7) Next you will need to go back to http://drupal.org/node/107803#comment-647073 and add the 2nd code snippet to your template.php file around any existing _phptemplate_variables() function. I was lucky and didn't have an existing one so I just removed the '...' from the function on the above link.

8) The final change is to the function you just pasted in:
- Just before the switch statement, add $vars - array();
- Just before the final closing brace, add return $vars;

9) Job's a good 'un.

Troubleshooting:

One issue I ran in to when doing this was the script in Drayen's code samples, he uses page-displaythickbox.tpl.php and I used page-thickbox.tpl.php - just make sure that yours are both the same.

Thanks Chris,

Hopefully that will help people, any questions, ask away.

--
acmconsulting.eu

OK, I'm fairly new to Drupal and can understand a bit about the process here. To be honest, I just installed the view module and I'm only beginning to figure it out...

Anyways, I can't help feeling like the process above is too complicated if all I want to do is put some text in a thickbox (say a staff bio for example). Could one just create a taxonomy theme that strips everything but text from a story node, then thickbox a link directly to that node? Not that I know how to do this just yet. Seems like if someone created a "theme for thickbox" then we could set it as the taxonomy theme for anything we wanted in a TB. Am I off? Anyone got anything close to a theme they can upload. I've been searching for such a thing, but don't seem to find anything close.

Am I right in assuming I have to get into php to edit the themes/templates?

thanks for this thread, it's getting me really close to what i need. Just wonder if it could be simpler for plain text.

What about linking to a plain text page published on a subdomain? Can you tell I fear having to edit php, lol?

EDIT: Ok, I tried the plain html page with the content I want in a "thickbox" folder on my server. It works great. You can see it at http://thebranchonline.org/node/6 (click on "read Chris' bio")

There must be a reason not to do it this way, and I want to learn to do things properly, so fire away. What's the disadvantage of doing it this way?

There are 2 disadvantages with your way of doing it, but if it works for you stick with it. As i see the the drawbacks are :

1. The http://thebranchonline.org/thickbox/chris_bio.html isnt controlled/editable by drupal, its just a html file.
2. If a person has javascript turned off when they click the bio link all they get is the blank formated page.

The solution i developed avoids both of these problems, with no JS the user get the page inside the full theme, with it thickbox works as expected, the content is from drupal so easy to update and control, but as i said, if it works for you stick with it :)

Hi,

I previously put my question here http://drupal.org/node/235348 but I guess this is the proper thread.

I'm trying out flash gallery module and think it's very nice (simpleviewer has also very nice plugins) .

I'm now trying to hack it a bit in order to achieve the following:
When you click on an image, at the bottom you have a 'download' link to open the original image (plain html) while I'd like that link to open a thickbox 'page' showing the original image, an additional image (I've added a second image field through CCK to the image content type) and a text (which is the body of the node).
The code which create that link is in flash_gallery.module file and here is the line:

$caption[] = '<u>'. l(t('download'), file_create_url($images['_original'])) .'</u>';

How can I add the image, the body and the additional image field to thickbox output?

thanks for your help
G.

I found a solution:
I use the following version of thickbox
http://www.box.net/shared/i85gbjtskk (pick up thickbox.css and thickbox.js and insert them in thickbox module dir)

and then modified flash_gallery.module changing the original line:

$caption[] = '<u>'. l(t('More info'), file_create_url($images['_original'])) .'</u>';  // ORIGINALE        

with the following one

$caption[] = "<a href=\"javascript:tb_show('My Image Caption','MySite/node/".  $node->nid .  "?keepThis=true&amp;TB_iframe=true&amp;modal=true')\" class=\"thickbox\"> More info</a> ";

cheers

Ok

I went through the posts and I thought... THERE HAS GOT TO BE AN EASIER WAY...

and there is. a REAL easy way....

Think about it .... ThickBox just posts an HTML page in a box. Well, where have you seen stripped down content from Drupal on a simple HTML page?

Printer Friendly Pages: http://drupal.org/project/print

Really, what we could do is just copy that WHOLE module, change some things and post it as a new module :Content for Thickbox.

As a test, i opened up print.tpl.php (saved the orig as print.tpl.php.orig) and changed it to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php  print $print["language"] ?>" xml:lang="<?php  print $print["language"] ?>">
  <head>
    <title><?php  print $print["title"] ?></title>
    <?php  print $print["head"] ?>
    <?php  print $print["robots_meta"] ?>
    <?php  print $print["base_href"] ?>
    <?php  print $print["favicon"] ?>
    <?php  print $print["css"] ?>
  </head>
  <body
    <div class="print-title"><?php  print $print["title"] ?></div>
    <div class="print-content"><?php  print $node->body; ?></div>
  </body>
</html>

then, I passed this to ThickBox:

<a href="/print/aboutUs" title="add a caption to title attribute / or leave blank" class="thickbox"><img src="/files/images/intercone01.thumbnail.jpg" alt="Single Image"/></a>

See the href... i called the print module and Voila! Dynamic Drupal content inside a Thick box.... probably with work with views too, eh?

ok, so I need to do several things: if i want to use the print module (which is a REALLY BAD IDEA AS I AM CHANGING A MODULE AND NOT OVERRIDING IT, i know) Then i need to include the css in it so that it will theme the page.

but really, i should send a request to the maintainers of Printer Friendly to see about a spin off...

sounds interesting, i like the idea of a module to do this but... what if there is javascript content or customized layouts etc then in the simplified layout it will be lost.

whamo!!:) just what i needed
tracking

damn, you're right.... but can we just include that in the header?

Also, i did create a suggestion to the maintainers of Thickbox and they have posted some more info concerning this issue: http://drupal.org/node/241840#comment-799235

Highly interested in this.... tracking

tracking indeed, an extra module for content or suppoort in Views would be superb!

Stella recently introduced me to the enhanced features of Lightbox2 module. [1] In v2 it doesn’t need Scriptaculous and Prototype any more and is able to do alot more cool stuff than the original lightbox script. It is also on the way to display content of a drupal site inside a lightbox window. [2]
Now the reason I post here is both thickbox and lightbox2 have their justification, they do stuff differently but maybe in this area both modules could share the way to pull out part of the content of a node. This function is not really related to either of the modules and should probably happen outside so other modules can use it too.

[1] http://drupal.org/project/lightbox2 http://www.stellapower.net/lightbox2
[2] http://drupal.org/node/259323

tracking

subscribe

I've found this Drupal Thickbox module extended from Roberto Gerola Website: http://www.speedtech.it/drupal-thickbox-module
It supports node body and flashplayers (Flowplayer and Mediaplayer) and is very easy to use. I've testet with this example code and it's working perfect for every nodes:

<a href="node/1?width=100&amp;height=100" class="thickbox-nodebody">Launch popup thickbox-nodebody</a>

I have tried the extended module from Roberto Gerola's Website, however it isnt working for webforms. Is there a way to get this working? Would it be just Roberto's implementation? At the moment it is just showing the header text, the actual components dont seem to be rendering??

Try the latest lightbox2 Modul. It supports now node content. I think this would work with webforms too.

Tracking

bit7 can you maybe post a link to how this is done in Lightbox2, I have only found a thread about publishing body content of the image nodes and I want just text no images

I don't have a special howto link. The 'HTML Content Support' is documented in the readme.txt file in the module folder. Here is a basic example:

<a href="/node/41/lightbox2" rel="lightframe">Test node!</a>

Use rel="lightframe" to display node content with Lightbox2.
The special '/node/41/lightbox2' URL is created by Lightbox2.

You can use your own page template for your node. Just create and modify the 'page-node-lightbox2.tpl.php' in your themes folder.
This codes in the template file would print only the title und the body fields in the lightbox2 popup-window:

<?php $url= $node->title; ?>
<?php print $node->body;?>

Link to the documentation page about the above http://drupal.org/node/252260

Hello chris.wells I have done same thing what you have said and it is working on locahost but not able to make working on live site, only pop up window of thickbox coming with whole page in it even though I have places the page-thickbox.tpl.php in theme folder and made changes in the template.php.

Can you help me out what will be the problem here.

I faintly remember something like this happening to me when I was being guided through it.

Did you create a view to only bring in what you want to display on the live site?

There is a note at the bottom of the how-to concerning a problem that occurred when copying/pasting a_c_m's code where this line:

$vars['template_files'] = array('page-displaythickbox');

was different to the tpl.php file I wrote, so just make sure that what is featured in the code above matches your tpl.php file.

Also, just double check that files are there on the live server - I've made that mistake once or twice and it's really embarrassing when it happens :)

Thank you very much Cris for helping. Now it is working well.

Possible to get this into ThickBox ?

Thanks all for the detail above. Tracking...

Would be very interested in steps on incorporating with views + non-clean urls.

just a note to say that it looks more like:

<? print l('click here ', 'node/93/component',array(array('class'=>'someclass thickbox'))); ?>

in D6 (sorry just typing from memory so l() might be slightly wrong), but the module creates nodes at node/$nid/component now. Made my life much easier.

btw anyone know how to pass the height and width parameters successfully?

subscribing

Hi I need a relatively easy way to place text in the thickbox. Any solution would be appreciated.

@Sangeetha try http://drupal.org/node/252260, it uses lightbox2 but it works, basically you'll have to create a content type for whatever you want to load in a ligthbox, then all you have to do is create a link with /lightbox2 at the end of the URL and add a 'rel'

This version of Thickbox is not supported anymore. The issue is closed for this reason.
Please upgrade to a supported version and feel free to reopen the issue on the new version if applicable.

This issue has been automagically closed by a script.