3 Column Content Page Example

How to build a thickbox page

The first step is to build the page that the link will point to. This is the page that will appear to float on top of the current page when the user clicks on the thickbox link.

1. In the WCM, select New Page... and choose Thickbox Overlay Page from the list of templates. Open the page in the Editing Window and add components and content as needed.
2. Open the page that will contain the link to the Thickbox page. Drop in a text component and add the text that will serve as the link text.
3. Select the text and click the Hyperlink button. Navigate to the Thickbox page you created in step 1.
4. Click on the Source Edit button to modify the source code. Search for the href portion of the link, e.g., <a href="/content/sfu/mydept/thickboxpage.html">. Add a class of "thickbox" to the link.
   

Your resulting link should look like this:

<a href="/content/sfu/mydept/thickboxpage.html" class="thickbox">

Click OK to commit your changes.

Changing the size of a thickbox page

By default, the thickbox page is 800 pixels wide. If you wish to override this default width to accommodate a larger page, you will need to upload a custom JavaScript file to the DAM. To learn how to do this, see Adding Custom JavaScript.

Name your custom JavaScript file thickbox-override.js.  Add the following to your JavaScript file:

jQuery(document).ready(function(){
    jQuery(".thickbox").fancybox({
        maxWidth:your width,
        maxHeight:your height,
        fitToView:false,
        autoSize:false,
        closeClick:false,
        openEffect:"none",
        closeEffect:"none",
        type:"iframe"
    });
}); 

Specify, in pixels, the width of your thickbox and height of your thickbox where you see your width and your height. You do not need to add the "px" prefix.

        maxWidth:300,
        maxHeight:300,

Save your changes, and upload thickbox-override.js to the DAM.

Attach thickbox-override.js directly to a page using the Page's Page Properties. Alternately, if you want to change the size of thickbox pages across your entire site, attach thickbox-override.js to a Site Configuration page.

3 Column Content Page Example, inside a 300px by 300px thickbox.