Okay, to everyone who’s asking about my lightbox implementation. Firstly I wish I could get a demo URL up to show. I’m only running this on a test server at home. If anyone has a spare modx installation running that they can give access to, well maybe.
Here’s a basic run through of what I did, in case anyone wants to play around.
1. I put the lightbox files into a subfolder in the EasyPeasyGallery 2 folder, ie assests\modules\epg2\lightbox
2. Modified the default template to include the lightbox js and css files.
3. Added the rel="lightbox" attribute for the thumbnail links (as this was the layout I was using). The area you need to modify is near the start of the ’Generate the midsection’ comment.
$chunk_main .= '<td style="'.( $pics_per_row!=0 ? "width:".floor(100/$pics_per_row)."%; " : "" ).' " class="EPG2_td" >';
$chunk_main .= '<a '.$target_to.' href="'.$link.'" rel="lightbox" title="'.stripslashes($picture['title']).'"><img class="EPG2_image_thumb" alt="'.stripslashes($picture['title']).'" src="assets/modules/epg2/image.php?type=pic_thumb&id='.$picture['id'].'" /></a>';
4. Then the hard bit. I modified the lightbox.js code to pull out the pic id from the URL to use to retrive the fullsize image location.
The function used get the paramater is like this.
// Get Parameter function
function GetParameter(formparams,ValueWanted)
{
params = formparams.split('&');
// Handle form parameters
valuetoreturn = '';
for (var i=0; i < params.length; i++) {
splitparam = params[i].split('=');
paramname = splitparam[0];
paramvalue = splitparam[1];
if (paramname.toUpperCase() == ValueWanted.toUpperCase()) {
valuetoreturn = paramvalue;
}
}
return(valuetoreturn);
}
Then add some code into the showLightbox function.
function showLightbox(objLink)
{
// prep objects
b=objLink+''; // make the objLink variable a string rather than an attribute
paramstring = b.split('?'); // split the URL to get parameters from
picreturn=GetParameter(paramstring[1],'pic'); // get parameters
objLink2='assets/modules/epg2/image.php?type=pic_large&id='+picreturn; // new objLink for fullsize image
// Note that original objLink variable is untouched. This var contains other attributes.
Then also change
imgPreload.onload=function(){
objImage.src = objLink2;
And near the bottom of the function (not sure if this is necessary though).
imgPreload.src = objLink2;
And one more thing: change the lightbox file path directories inside lightbox.js
var loadingImage = 'assets/modules/epg2/lightbox/loading.gif';
var closeButton = 'assets/modules/epg2/lightbox/close.gif';
Hopefully I didn’t miss anything there (though I prob did
)
If that makes any sense to anyone, well good luck.
☆ A M B ☆
