PDA

View Full Version : Using Lightbox with XML


jerdunham
03-30-2009, 07:59 PM
Hello everyone,

I've been trying with no success to find a way to use lightbox with images and thumbnails loaded from an xml file. Currently I have a spry repeat region that houses my thumbnails, but I can't figure out how to make this work with lightbox. Here is my code if you need it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #000000;
background-image: url();
background-repeat: no-repeat;
margin-left: 0px;
margin-right: 0px;
background-position: center;
}
abbr {
background-image: url(images/bkgnd.jpg);
background-repeat: no-repeat;
background-position: center;
}
.style3 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var ds1 = new Spry.Data.XMLDataSet("photos.xml", "photos/photo");
//-->
</script>
<link rel="stylesheet" href="lightbox_assets/css/lightbox.css" type="text/css" media="screen" />
<script src="lightbox_assets/js/prototype.js" type="text/javascript"></script>
<script src="lightbox_assets/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="lightbox_assets/js/lightbox.js" type="text/javascript"></script>
</head>

<body onload="initLightbox()">
<table width="905" height="709" border="0" align="center" background="images/bkgnd.jpg">
<tr>
<th width="324" height="67" align="center" valign="top" scope="col"><img src="images/name2.png" width="191" height="65" /></th>
<th width="571" align="center" valign="top" scope="col"><span class="style3"><br />
Jeremy Dunham is a commercial photographer based in Portland Oregon</span></th>
</tr>

<tr>
<th height="634" colspan="2" align="center" valign="top" scope="col"><div id="wrap">
<div id="cont">
<div spry:region="ds1">
<table>
<tr> </tr>
<tr spry:repeat="ds1" spry:setrow="ds1">

<td width="20" height="20" align="left" valign="top"><a href="webimages/{fullsource}" rel="lightbox[people]"onClick="lightbox.show('{@source}',"><img src="webimages/thumbs/{thumbsource}" width="" height="" alt="" /></a></td>
</tr>
</table>
</div>
</div>
</div>
&nbsp;</th>
</tr>
</table>
</body>
</html>


Is this even possible to do? Any help would be appreciated.

Thanks,

Jeremy