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.