Integrating Lightbox into Tapestry 5

08.18.2009 | Author: len | Posted in work
Tags: ,

This show a basic way of using Lightbox 2.03 (wiki) into Tapestry 5.

First step

Just copy the css, images and js/lightbox.js into the web directory. Note: the scriptaculous.js, effects.js and prototype.js are not required as they are already included in T5.

Modify the .tml file

<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>My app</title>
 <link rel="stylesheet" href="${context:css/style.css}" type="text/css" media="screen" />
 <script type="text/javascript" src="${context:js/lightbox.js}"></script>
 <link rel="stylesheet" href="${context:css/lightbox.css}" type="text/css" media="screen" />
 </head>

…

<a href="${largeImage}" rel="lightbox">
 <img src="${smallImage}" align="left" border="0" />
</a>

All done?

Everything seems to work now except the loading and close images.  The T5 path should be something similar to: http://localhost:8080/myApp/assets/ctx/b1cddcee4ae81f52/images/loading.gif

The solution

One solution would be to use absolute paths but this would not be really portable. A better solution was to modify the lightbox.js to change the path relative to the path of the js file itself. The following piece of code does that:

 objLoading.appendChild(objLoadingLink);

 //begin inserted code LEN 20090818
 $A(document.getElementsByTagName("script")).findAll( function(s) {
 return (s.src && s.src.match(/lightbox\.js$/))
 }).each( function(s) {
 fileLoadingImage = s.src.replace(/js\/lightbox\.js$/,fileLoadingImage);
 fileBottomNavCloseImage = s.src.replace(/js\/lightbox\.js$/,fileBottomNavCloseImage);
 });
 //end inserted code LEN 20090818

 var objLoadingImage = document.createElement("img");
 objLoadingImage.setAttribute('src', fileLoadingImage);
 objLoadingLink.appendChild(objLoadingImage);

Now the images are loaded as expected.

Related Posts with Thumbnails

Related posts:

  1. Tapestry, hibernate application (no.5) A few years ago I was writting some simple tutorials...
  2. Hibernate localized data Here are some reflections and solutions on how to localize...
  3. Flex applications size optimization After quite some time of development we realised that our...
  4. JBoss migration 4.2.2-GA to 5.1.0-GA In my stupidity innocence I just hoped that deploying the...

Leave a Reply