Question

Hi there I’m trying to use a thickbox http://jquery.com/demo/thickbox/ to open up a form on my homepage.

I want the link which opens the thickbox to be an image but being a bit new to all this I’m struggling to figure out exactly how to do this. the instructions say:

In the href attribute of the link add the following anchor:

#TB_inline

In the href attribute after the #TB_inline add the following query string on to the anchor:

?height=300&width=300&inlineId=myOnPageContent

I’ve got this

echo $this->Html->image('123.jpg', array('alt'=>'Create a page', 'url'=>'#TB_inline?height=155&width=300&inlineId=hiddenContent&modal=true', 'class' => 'thickbox'));

What do I need to put to make image.jpg be a link which opens up a thickbox who’s contents is the function Campaigns::thickbox??

Thanks
🙂

Answer 1

To create the link itself:

<a href="#TB_inline?height=155&width=300&inlineId=hiddenContent&modal=true" class="thickbox">
  <?php echo $this->Html->image('123.jpg', array('alt'=>'Create a page')); ?>
</a>

Then somewhere on your page you need to have a div with the content for that link to display:

<div id="hiddenContent">
  <p>
    <?php echo Campaigns::thickbox(); ?>
  </p>
</div>

I am assuming here that Campaigns::thickbox() is a static method that returns whatever content you want to display.

I would also add some css to the hiddenContent id to make it hidden at first:

#hiddenContent { display: none; }

Edit: I edited the image display code. Remember this: In order to make an image a link, it takes two html tags, an outer “a” tag that holds the link information, and an inner “img” tag that holds the image information. In this case you are using php to get the img tag information from CakePHP.