How to integrate Lightbox

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

Lightbox is a collection of cross-browser JavaScript libraries that enable the presentation of large format images using CSS-based modal dialogs.  On a Lightbox-enabled photo gallery page, clicking a thumbnail of an image opens the Lightbox dialog, which uses a resizing animation to show the large image. This dialog provides “previous” and “next” links for navigating through the images in the gallery, as well as the ability to slide through the images using the arrow keys. 

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 Blocks.

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). Lightbox 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 Lightbox.
   
   <a href=”/largeImage/Image1.jpg”>
     <img src=”/thumbnails/Image1.jpg”/>
   </a>
   
    
2. To enable Lightbox, add a rel=”lightbox” attribute to the anchor tag.
   
   <a href=”/largeImage/Image1.jpg” rel=”lightbox”>
     <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=”lightbox” 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=”lightbox[album]”>Image #1</a>
   <a href=”/largeImage/Image2.jpg” rel=”lightbox[album]”>Image #2</a>
   <a href=”/largeImage/Image3.jpg” rel=”lightbox[album]”>Image #3</a>

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 Lightbox JavaScript libraries into the CommonScripts folder, and the relevant Lightbox CSS files into the ClientCSS folder.
4. Go to the configuration screen for the Page Layouts in your specific Globe under the Content Sites node. 
5. Add the LINK reference in the Pre-Titan Metatags/Code Snippets textarea for the Lightbox CSS file you uploaded to ClientCSS. The link reference should be something like the following:
   
   <link rel=”stylesheet” href=”/ClientCSS/lightbox.css” type=”text/css” media=”screen” />
   Note: There are several image assets that are related to this CSS file. Confirm that those images (“loading.gif”, “prev.gif”, “next.gif”, “close.gif”) are correctly referenced in the CSS and uploaded into Titan CMS.
    
6. Add the SCRIPT references in the Post-Titan Metatags/Code Snippets textarea for the Prototype Framework and Scriptaculous Effects JavaScript libraries you uploaded to CommonScripts. The script references should be something like the following (in this order):
   
   <SCRIPT type="text/javascript" src="/CommonScripts/prototype.js"></SCRIPT>
   <SCRIPT type="text/javascript" src="/CommonScripts/scriptaculous.js?load=effects,builder"></SCRIPT>
   <SCRIPT type="text/javascript" src="/CommonScripts/lightbox.js"></SCRIPT>
    
7. Save the Page Layout changes and Refresh Site State

The Titan CMS Photo Block allows users to automatically generate lists of photo thumbnail images with links to large-format versions of the same image. The HTML generated for a Photo 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. To integrate Lightbox functionality into the Titan CMS Photo Block, a new XSL file must be created to add the Lightbox attributes to the links created by the Photo Block.

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

1. Login to your Titan CMS Workstation as a webmaster or administrative user.
2. Switch to the Titan Administration module.
3. Go to the configuration screen for the Blocks in your specific Globe under the Content Sites node, and expand the Photo Block details.
4. Click the Add New Configuration File button, and browse to Blocks > PhotoBlock, and click on the XSL folder. The list on the right will refresh and show all available XSL files for the Photo Block.
5. Select the DefaultPhotoBlock.xsl file and click the Download button in the toolbar. This will prompt you to Open or Save. Save the file to your Desktop with the name “LightboxPhotoBlock.xsl”.
6. From the file selection dialog, click the Upload button. Using the Select fields, browse to the LightboxPhotoBlock.xsl file on your Desktop and Upload it. Once uploaded, select it from the Titan file list and click OK.

With the new XSL configured for the Photo Block, the last step is to use the Edit button to open Titan CMS’s inline text editor for modifying the new XSL. The default Photo Block code has several locations where a link to the large image is created. Any of these links could also contain the Lightbox attributes. To add the Lightbox attributes to the Filmstrip of small thumbnail images, modify the following code:

Change this:
<xsl:template match="Node" mode="FilmstripThumb">
  <img src="{LinkParameter}" title="{DisplayName}"
 onclick="ChangeImageSource('webImageDiv{$BlockNumber}', '{LinkParameter}', {$SmallThumbWidth}, {$MediumThumbWidth}, {$BlockNumber});"/>
</xsl:template>

To this:
<xsl:template match="Node" mode="FilmstripThumb">
  <a href=”{concat(substring-before(LinkParameter, concat('_T', $SmallThumbWidth)), substring-after(LinkParameter, concat('_T', $SmallThumbWidth)))}” rel=”lightbox[album]”>
    <img src="{LinkParameter}" title="{DisplayName}"/>
  </a>
</xsl:template>

After the code changes are complete, Save the XSL and Refresh the Site State. This will make it possible for you to modify content pages to use the new block XSL. If you make additional changes to the XSL, you must Refresh the Site State to reset the cached version of the current XSL.

Titan Freeform Block

Titan Photo Block

Lightbox 2 - Official Website
http://www.lokeshdhakar.com/projects/lightbox2/