The Lightbox Pattern

Here, we use our Lightbox pattern, the code for which is within ssLightbox.js. It is dependent on the MooTools library.

For any hyperlink with the rel "lightbox", it opens the href of that hyperlink (assumed to be an image) in a nice lightbox.

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

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

This effect is especially useful for enlarging thumbnails, but it will work without a thumbnail.

    <a href="../TutorialImages/ManchesterCity.png" rel="lightbox" title="MCFC Badge">
      <img alt="MCFC Badge" title="MCFC Badge" src="../TutorialImages/ManchesterCity_thumb.png" />
    </a>
          

Giving the hyperlink a title will show it as a caption below the enlarged image, but this is optional.

    <a href="../TutorialImages/ManchesterCity.png" rel="lightbox" title="MCFC Badge">
      <img alt="MCFC Badge" title="MCFC Badge" src="../TutorialImages/ManchesterCity_thumb.png" />
    </a>
          

• Note that the line ssAddLoadEvent(ssInitialiseLightbox); is run automatically in ssLightbox.js. This looks for hyperlinks with rel "lightbox" and attaches this behaviour to them.
• You can change the style between black and white by changing line 37 of ssLightbox.js.