The Thickbox Pattern

Here, we use our Thickbox pattern, the code for which is within ssThickbox.js. It is dependent on the jQuery library.

The following files need including in the head of the document...

    <script src="../Include/Core.js" type="text/javascript"></script>
    <script src="../Include/jQuery.js" type="text/javascript"></script>
    <script src="../Include/ssThickbox.js" type="text/javascript"></script>
    <link  href="../Include/ssThickbox.css" type="text/css" rel="stylesheet"/>
          

For any hyperlink with the class "thickbox", it opens the href of that hyperlink in a panel. You also need to pass in the width and height of the panel in the query string of the hyperlink.

    <li><a href="Player.asp?intPlayerID=1&width=320&height=110" class="thickbox">1. Joe Hart (England)</a></li>
          

• Note that the line ssAddLoadEvent(initialiseThickbox); is run automatically in ssThickbox.js. This looks for hyperlinks of class "thickbox" and attaches this behaviour to them.
• It is possible to invoke a thickbox manually by running ssThickbox(), passing in the URL as the parameter.

  
    ssThickbox("Player.asp?intPlayerID=9&width=320&height=110");