Quantcast
   
Titan CMS online support, find help and get answers

How to integrate Shadowbox

  • Published: October 05, 2008
  • |
  • Updated: December 24, 2008
  • |
  • Version: 6
 Summary

The use of Shadowbox to enrich the user experience for galleries of various media formats in websites has become very common. This article describes the basic configuration steps for integrating Shadowbox in your Titan CMS content managed website. Also included are some simple examples for Shadowbox-enabling media content on your website.

 Background

Shadowbox is a collection of cross-browser JavaScript libraries that enable the presentation of various media publishing formats using CSS-based modal dialogs.  On a Shadowbox-enabled video gallery page, clicking a thumbnail of an image opens the Shadowbox dialog, which uses various media plug-ins to load the appropriate player. This dialog can provide “previous” and “next” links for navigating individual items, “skip links” for advancing to specific gallery items, or even a slideshow to present an automatically changing series of items in a mixed media gallery.

 Instructions

The instructions given here include the steps to add the various JavaScript snippets to your Titan CMS Page Layouts. Additional instructions are given for possible integration points with Titan CMS Blocks.

 

Configure CSS and Source Libraries

The Titan Administration module gives you the flexibility to specify code snippets that can be placed in the HEAD section of your pages. To enable the use of Shadowbox on a specific page, you need to first add the script to that page by making a configuration change in Titan Administration.

  1. Login to your Titan CMS Workstation as a webmaster or administrative user.
  2. Switch to the Titan Administration module.
  3. Using the Download Files button, upload all of the Shadowbox JavaScript libraries and supporting code files into the CommonScripts folder. This will include the various Shadowbox skin, language, and player files that are dynamically loaded.
  4. Go to the configuration screen for the Page Layouts in your specific Globe under the Content Sites node.
  5. Add the SCRIPT references in the Post-Titan Metatags/Code Snippets textarea for the base Shadowbox JavaScript library and the jQuery adapter library. Using the standalone Shadowbox adapter will not be sufficient to correctly initialize Shadowbox because Titan CMS manages the windows.onload event.

    Note: In order to utilize jQuery, you must also acquire the jQuery JavaScript Library. The minified version of this library can be obtained from the jQuery website.

    Note: You may use one of the other adapters for DOM-manipulation. Please review the Shadowbox website for information on your desired configuration.

    The script references required to use Shadowbox with the jQuery adapter should be something like the following (in this order):

    <SCRIPT type="text/javascript" src="/CommonScripts/jquery-1.2.6.min.js"></SCRIPT>
    <SCRIPT type="text/javascript" src="/CommonScripts/adapter/shadowbox-jQuery.js"></SCRIPT>
    <SCRIPT type="text/javascript" src="/CommonScripts/shadowbox.js"></SCRIPT>

     
  6. Additional Shadowbox setup is required to prepare the use of skin, language, and player classes. This setup is typically handled by loading the necessary files at runtime using one of the Shadowbox “load” method calls. When calling these methods, remember that the supporting scripts are stored in the CommonScripts directory. When specifying relative paths in those method calls, you must include '/CommonScripts' at the beginning of the relative path.

    Add a SCRIPT block in the Post-Titan Metatags/Code Snippets textarea after all of the references for the base Shadowbox JavaScript libraries. The following snippet shows the Shadowbox calls required to setup the “classic” skin, the English language, and the support for rendering images, Flash videos, and QuickTime videos.

    <SCRIPT type="text/javascript">
      Shadowbox.loadSkin('classic', '/CommonScripts/skin');
      Shadowbox.loadLanguage('en', '/CommonScripts/lang');
      Shadowbox.loadPlayer(['img', 'flv', 'qt'], '/CommonScripts/player');
     


    Within this same SCRIPT block, you must also initialize Shadowbox with the options required for the various players being used. The initialization code must be run in the context of the jQuery ready function to call the Shadowbox.init method. This is necessary to correctly call the init method after the DOM has completely loaded. The use of the window.onload event, as described in the Shadowbox documentation, will not be reliable for initializing Shadowbox because Titan CMS is managing the content generation and the methods called during that event. After the Shadowbox.load calls, include the following jQuery JavaScript to correctly initialize Shadowbox.

      $(document).ready(function(){
        // Define basic Shadowbox options for using the image player.
        var options = {
          handleOversize: 'none'
          ,animate: true
          ,displayNav: true
          ,handleUnsupported: 'remove'
          ,initialHeight: 60
          ,initialWidth: 100
        };
        Shadowbox.init(options);
      });
    </SCRIPT>

     
  7. Save the Page Layout changes and Refresh Site State

 

Integration with Titan CMS Freeform Block

The Titan CMS Freeform Block allows users to add text and image content to a page using a WYSIWYG editor. Create a Freeform block that contains several thumbnail sized images that are linked to their respective large-format image (thumbnails aren't required; any text link will work as well). Shadowbox can be activated on these links by manipulating the source HTML for images as follows:

  1. Locate the linked thumbnail IMG tags in the content, on which you want to enable Shadowbox.

    <a href=”/largeImage/Image1.jpg”>
      <img src=”/thumbnails/Image1.jpg”/>
    </a>

     
  2. To enable Shadowbox, add a rel=”shadowbox” attribute to the anchor tag.

    <a href=”/largeImage/Image1.jpg” rel=”shadowbox”>
      <img src=”/thumbnails/Image1.jpg” />
    </a>

     
  3. Optionally, you can add a title attribute to specify caption text for the larger image.

    <a href=”/largeImage/Image1.jpg” rel=”shadowbox” title=”my caption”>
      <img src=”/thumbnails/Image1.jpg” />
    </a>

     
  4. For a series of images that make-up a slideshow, specify a group name in the rel attribute.

    <a href=”/largeImage/Image1.jpg” rel=”shadowbox[album]”>Image #1</a>
    <a href=”/largeImage/Image2.jpg” rel=”shadowbox[album]”>Image #2</a>
    <a href=”/largeImage/Image3.jpg” rel=”shadowbox[album]”>Image #3</a>

     
  5. For any non-image media or content, you must specify the pixel dimensions for the content using additional parameters in the rel attribute.

    <a href=”mymovie.swf" rel=”shadowbox;height=140;width=120”>My Movie</a>
     
  6. Finally, galleries may be composed of more than one type of content.

    <a rel=”shadowbox[Mixed]” href=”vanquish.jpg”>Image</a>
    <a rel=”shadowbox[Mixed];width=520;height=390” href=”caveman.swf”>swf</a>
    <a rel=”shadowbox[Mixed];width=292;height=218” href=”kayak.mp4”>movie</a>
    <a rel=”shadowbox[Mixed]” href=”index.html”;>iframe</a>

 

Integration with Titan CMS Filter Block

The Titan CMS Filter Block allows users to automatically generate a list of links to various types of content. The HTML generated for a Filter Block is defined by an eXtensible Stylesheet Language (XSL) template file that is mapped to the block using Titan Administration. A core feature of Titan CMS is to allow users to create their own XSL files and map them to existing Blocks to generate different HTML content.

One of the ways to integrate Shadowbox functionality into the Titan CMS Filter Block, is to create a new XSL file that utilizes the Shadowbox attributes on the links generated for filtered content. This can be difficult as a shared XSL file is used to build these links. That behavior would need to be duplicated in the new XSL.
A second option for integrating Shadowbox content would be to use a DOM-manipulation framework like jQuery to inject additional HTML attributes into the links generated by the standard one- or two-column Filter Block templates.

Note: Modifying either XSL or JavaScript code, if done incorrectly, could cause a failure on the page attempting to use that code. We do not recommend making changes to files on a live site until after sufficiently testing the modification.

 Related Documents

Titan CMS Freeform Block

Titan CMS Filter Block

 References

Shadowbox Media Viewer Website
http://www.mjijackson.com/shadowbox/
 

jQuery Website
http://www.jquery.com