Main
Index
Search
Posts
Who's
Online
Log
In

Home: Products: CMS Builder:
Adding an image Gallery Using Lightbox

 

 


Guidian
Novice

Jun 23, 2010, 8:24 AM

Post #1 of 18 (3274 views)
Shortcut
Adding an image Gallery Using Lightbox Can't Post

I know there are a couple of threads with this but all of them are pretty confusing to a begginer. Is there a step by step tuturial somewhere that shows how this can be set up? I need to know how to add the upload image feature on a news page for instance and where i add what code. So I add the java script coding on the html itself or somewhere in CMSB? Can someone please clarify all of this?


Jason
Staff / Moderator


Jun 23, 2010, 10:58 AM

Post #2 of 18 (3268 views)
Shortcut
Re: [Guidian] Adding an image Gallery Using Lightbox [In reply to] Can't Post

Hi,

Just to clarify, are you trying to allow someone to upload images to CMS Builder from a news page? Or are you trying to display uploaded images using Lightbox?

Let me know and attach any .php pages you're using for this and I'll take a look.

thanks.
---------------------------------------------------
Jason Sauchuk - Programmer 
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/ 


Guidian
Novice

Jun 23, 2010, 11:02 AM

Post #3 of 18 (3267 views)
Shortcut
Re: [Jason] Adding an image Gallery Using Lightbox [In reply to] Can't Post

Jason,

I dont want anyone to upload anything to my site. I am trying to just make the imaged in my news section and in a section I am going to make for project history enlarge when they are clicked on with the effect that you get from lightbox. I tried following the instructions I saw here http://www.interactivetools.com/news/issue0073.php#2 that Donna wrote and some other stuff I found on other threads but I guess I am just not that savvy yet with php and CMSB. The news sections is here: http://www.anfgroup.com/news/news.php I have not added any pictures yet and the other section(s) I want to make is the following: http://www.anfgroup.com/completed/healthcare.php


Jason
Staff / Moderator


Jun 23, 2010, 11:19 AM

Post #4 of 18 (3264 views)
Shortcut
Re: [Guidian] Adding an image Gallery Using Lightbox [In reply to] Can't Post

Hi,

Okay, first thing, you'll need to add some pictures to your news section.

Once you've done that, just get the images to display on your page (The code generator will help you with this).

After that, try the instruction found on the lightbox website (http://www.huddletogether.com/projects/lightbox2/).

If you run into any issues, just let me know and attach the .php file you're working with to the post.

Hope this helps.
---------------------------------------------------
Jason Sauchuk - Programmer 
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/ 


RapidWeb
User

Dec 26, 2011, 12:59 PM

Post #5 of 18 (2713 views)
Shortcut
Re: [Jason] Adding an image Gallery Using Lightbox [In reply to] Can't Post

I am trying to do the same thing. What files do I copy to my site from the Lightbox site?


northernpenguin
User

Dec 26, 2011, 2:40 PM

Post #6 of 18 (2706 views)
Shortcut
Re: [RapidWeb] Adding an image Gallery Using Lightbox [In reply to] Can't Post

Hi RapidWeb

Typically, what I do is create a folder structure which looks like this:

/js {this is where I place all my javascript files}
/css {this is where I place all my stylesheets}
/images {this is where I place images used in the web layout}
/includes {this is where I place all my include files}

Using the above structure, download Lightbox2, expand it and upload all the files in the /css folder to the equivalent on your website. Do the same for /js and /images.

Then follow the Lightbox instructions (How to Use). Just make sure you are pointing to the correct file locations in your code.

Have fun!
--
northernpenguin
Northern Penguin Technologies

"Any sufficiently advanced technology
is indistinguishable from magic."
........Arthur C. Clarke


RapidWeb
User

Dec 26, 2011, 2:58 PM

Post #7 of 18 (2703 views)
Shortcut
Re: [northernpenguin] Adding an image Gallery Using Lightbox [In reply to] Can't Post

Thanks for your quick reply! Please note, that I had purchased your book about a year ago.

I followed your instructions. I am getting an error. But first, here is my code:

<div align="center">
<?php foreach (getUploads($options['tableName'], 'images', $record['num']) as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<a href="<?php echo $upload['urlPath'] ?>" rel="lightbox[Homepage]" title="<?php echo $upload['info1'] ?>">
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight']?>" />
</a>
<?php elseif ($upload['isImage']): ?>
<a href="<?php echo $upload['urlPath'] ?>" rel="lightbox[Homepage]" title="<?php echo $upload['info1'] ?>">
<img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" />
</a>
<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a>
<?php endif ?>
<?php endforeach ?>
</div>



My talbe name is: hotels
the name of the images field is images
This is my page:

http://www.koshertravelinfo.com/kosher-hotels/kosher-hotel.php?1

This is the error: Notice: Undefined variable: options in /kosher-hotels/kosher-hotel.php on line 118 Notice: Undefined variable: record in /kosher-hotels/kosher-hotel.php on line 118 getuploads: no 'tableName' value specified!

I have uploaded Lightbox2 and here is the test page on my site:

http://www.koshertravelinfo.com/index1.html

As you can see, the test works fine.


(This post was edited by RapidWeb on Dec 27, 2011, 4:52 AM)


northernpenguin
User

Dec 27, 2011, 6:55 AM

Post #8 of 18 (2670 views)
Shortcut
Re: [RapidWeb] Adding an image Gallery Using Lightbox [In reply to] Can't Post

Hi RapidWeb

BTW, its not my book, its Gerry Kornbluth.

Can you attach your file here. I need to see the whole thing.

Thx.
--
northernpenguin
Northern Penguin Technologies

"Any sufficiently advanced technology
is indistinguishable from magic."
........Arthur C. Clarke


RapidWeb
User

Dec 27, 2011, 2:49 PM

Post #9 of 18 (2662 views)
Shortcut
Re: [northernpenguin] Adding an image Gallery Using Lightbox [In reply to] Can't Post

Thanks for your kind help. I can't attach the entire file because
it is done in a Wysiwyg program that creates the file upon
publishing (Xsite Pro). But here is what is in the file:

Here is what is in the header:

Code
  <?php   
/* STEP 1: LOAD RECORDS - Copy this PHP code block near the TOP of your page */

// load viewer library
$libraryPath = 'cmsAdmin/lib/viewer_functions.php';
$dirsToCheck = array('//','','../','../../','../../../');
foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }

// load records
list($hotelsRecords, $hotelsMetaData) = getRecords(array(
'tableName' => 'hotels',
'where' => whereRecordNumberInUrl(1),
'limit' => '1',
));
$hotelsRecord = @$hotelsRecords[0]; // get first record

// show error message if no matching record is found
if (!$hotelsRecord) { dieWith404("Record not found!"); }

?>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


And here is what makes up the page:



Code
  <p>Already included some header&nbsp;code. Change&nbsp;the&nbsp;code form Minyan to Hotel&nbsp;</p>   

<p>&nbsp;</p><nodesigner>



<!-- STEP2: Display Records (Paste this where you want your records to be listed) -->
<h1>Hotels - Detail Page Viewer</h1>
Record Number: <?php echo $hotelsRecord['num'] ?><br/>
Name: <?php echo $hotelsRecord['name'] ?><br/>
Address: <?php echo $hotelsRecord['address'] ?><br/>
Address2: <?php echo $hotelsRecord['address2'] ?><br/>
City: <?php echo $hotelsRecord['city'] ?><br/>
State or Province: <?php echo $hotelsRecord['state'] ?><br/>
Zip: <?php echo $hotelsRecord['zip'] ?><br/>
Country: <?php echo $hotelsRecord['country'] ?><br/>
Phone: <?php echo $hotelsRecord['phone'] ?><br/>
Web Site: <?php echo $hotelsRecord['web_site'] ?><br/>
Email: <?php echo $hotelsRecord['email'] ?><br/>
Establishment: <?php echo join(', ', getListLabels('hotels', 'establishment', $hotelsRecord['establishment'])); ?><br/>
Terms (Check in time, cancellation fees, etc.): <?php echo $hotelsRecord['terms'] ?><br/>
Kosher Info (e.g. Glatt, Cholov Yisrael, etc.): <?php echo $hotelsRecord['kosher_info'] ?><br/>
Hashgacha / Supervision: <?php echo $hotelsRecord['hashgacha_supervision'] ?><br/>
AAA Discount : <?php echo $hotelsRecord['aaa_discount'] ?><br/>
Credit Cards Accepted: <?php echo $hotelsRecord['credit_cards'] ?><br/>
Parking: <?php echo $hotelsRecord['parking'] ?><br/>
Member Services: <?php echo join(', ', getListLabels('hotels', 'member_services', $hotelsRecord['member_services'])); ?><br/>
Leisure Activities: <?php echo join(', ', getListLabels('hotels', 'leisure_activities', $hotelsRecord['leisure_activities'])); ?><br/>
In-Room Amenities: <?php echo join(', ', getListLabels('hotels', 'in_room_amenities', $hotelsRecord['in_room_amenities'])); ?><br/>
Short Description: <?php echo $hotelsRecord['short_description'] ?><br/>
Hotel Information: <?php echo $hotelsRecord['hotel_information'] ?><br/>
_link : <a href="<?php echo $hotelsRecord['_link'] ?>"><?php echo $hotelsRecord['_link'] ?></a><br/>
</nodesigner> <nodesigner>







<div align="center">
<?php foreach (getUploads($options['tableName'], 'images', $record['num']) as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<a href="<?php echo $upload['urlPath'] ?>" rel="lightbox[Homepage]" title="<?php echo $upload['info1'] ?>">
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight']?>" />
</a>

<?php elseif ($upload['isImage']): ?>
<a href="<?php echo $upload['urlPath'] ?>" rel="lightbox[Homepage]" title="<?php echo $upload['info1'] ?>">
<img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" />
</a>

<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a>

<?php endif ?>
<?php endforeach ?>
</div>
</nodesigner> <nodesigner>
<a href="<?php echo $hotelsMetaData['_listPage']; ?>">&lt;&lt; Back to list page</a> -
<a href="mailto:?subject=<?php echo urlencode(thisPageUrl()) ?>">Email this Page</a>
</nodesigner>

<p>&nbsp;</p>


The nodesigner tag is just to let Xsite Pro (the program I use for the web layout, kind off Dreamweaver) know that
this is code and not try to add any design to it.

Your help is greatly apreciated!


(This post was edited by RapidWeb on Dec 27, 2011, 3:11 PM)


northernpenguin
User

Dec 27, 2011, 3:31 PM

Post #10 of 18 (2653 views)
Shortcut
Re: [RapidWeb] Adding an image Gallery Using Lightbox [In reply to] Can't Post

I highlighted in red below the change you should make. Try this first and lets see where it leads.


In Reply To
Thanks for your kind help. I can't attach the entire file because
it is done in a Wysiwyg program that creates the file upon
publishing (Xsite Pro). But here is what is in the file:

Here is what is in the header:

Code
  <?php   
/* STEP 1: LOAD RECORDS - Copy this PHP code block near the TOP of your page */

// load viewer library
$libraryPath = 'cmsAdmin/lib/viewer_functions.php';
$dirsToCheck = array('//','','../','../../','../../../');
foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }

// load records
list($hotelsRecords, $hotelsMetaData) = getRecords(array(
'tableName' => 'hotels',
'where' => whereRecordNumberInUrl(1),
'limit' => '1',
));
$hotelsRecord = @$hotelsRecords[0]; // get first record

// show error message if no matching record is found
if (!$hotelsRecord) { dieWith404("Record not found!"); }

?>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


And here is what makes up the page:



Code
  <p>Already included some header&nbsp;code. Change&nbsp;the&nbsp;code form Minyan to Hotel&nbsp;</p>   

<p>&nbsp;</p><nodesigner>



<!-- STEP2: Display Records (Paste this where you want your records to be listed) -->
<h1>Hotels - Detail Page Viewer</h1>
Record Number: <?php echo $hotelsRecord['num'] ?><br/>
Name: <?php echo $hotelsRecord['name'] ?><br/>
Address: <?php echo $hotelsRecord['address'] ?><br/>
Address2: <?php echo $hotelsRecord['address2'] ?><br/>
City: <?php echo $hotelsRecord['city'] ?><br/>
State or Province: <?php echo $hotelsRecord['state'] ?><br/>
Zip: <?php echo $hotelsRecord['zip'] ?><br/>
Country: <?php echo $hotelsRecord['country'] ?><br/>
Phone: <?php echo $hotelsRecord['phone'] ?><br/>
Web Site: <?php echo $hotelsRecord['web_site'] ?><br/>
Email: <?php echo $hotelsRecord['email'] ?><br/>
Establishment: <?php echo join(', ', getListLabels('hotels', 'establishment', $hotelsRecord['establishment'])); ?><br/>
Terms (Check in time, cancellation fees, etc.): <?php echo $hotelsRecord['terms'] ?><br/>
Kosher Info (e.g. Glatt, Cholov Yisrael, etc.): <?php echo $hotelsRecord['kosher_info'] ?><br/>
Hashgacha / Supervision: <?php echo $hotelsRecord['hashgacha_supervision'] ?><br/>
AAA Discount : <?php echo $hotelsRecord['aaa_discount'] ?><br/>
Credit Cards Accepted: <?php echo $hotelsRecord['credit_cards'] ?><br/>
Parking: <?php echo $hotelsRecord['parking'] ?><br/>
Member Services: <?php echo join(', ', getListLabels('hotels', 'member_services', $hotelsRecord['member_services'])); ?><br/>
Leisure Activities: <?php echo join(', ', getListLabels('hotels', 'leisure_activities', $hotelsRecord['leisure_activities'])); ?><br/>
In-Room Amenities: <?php echo join(', ', getListLabels('hotels', 'in_room_amenities', $hotelsRecord['in_room_amenities'])); ?><br/>
Short Description: <?php echo $hotelsRecord['short_description'] ?><br/>
Hotel Information: <?php echo $hotelsRecord['hotel_information'] ?><br/>
_link : <a href="<?php echo $hotelsRecord['_link'] ?>"><?php echo $hotelsRecord['_link'] ?></a><br/>
</nodesigner> <nodesigner>







<div align="center">
<?php foreach (getUploads($options['hotels'], 'images', $record['num']) as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<a href="<?php echo $upload['urlPath'] ?>" rel="lightbox[Homepage]" title="<?php echo $upload['info1'] ?>">
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight']?>" />
</a>

<?php elseif ($upload['isImage']): ?>
<a href="<?php echo $upload['urlPath'] ?>" rel="lightbox[Homepage]" title="<?php echo $upload['info1'] ?>">
<img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" />
</a>

<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a>

<?php endif ?>
<?php endforeach ?>
</div>
</nodesigner> <nodesigner>
<a href="<?php echo $hotelsMetaData['_listPage']; ?>">&lt;&lt; Back to list page</a> -
<a href="mailto:?subject=<?php echo urlencode(thisPageUrl()) ?>">Email this Page</a>
</nodesigner>

<p>&nbsp;</p>


The nodesigner tag is just to let Xsite Pro (the program I use for the web layout, kind off Dreamweaver) know that
this is code and not try to add any design to it.

Your help is greatly apreciated!

--
northernpenguin
Northern Penguin Technologies

"Any sufficiently advanced technology
is indistinguishable from magic."
........Arthur C. Clarke

(This post was edited by northernpenguin on Dec 27, 2011, 7:57 PM)


RapidWeb
User

Dec 28, 2011, 5:09 AM

Post #11 of 18 (2645 views)
Shortcut
Re: [northernpenguin] Adding an image Gallery Using Lightbox [In reply to] Can't Post

First of all, I really REALLY apreciate your help! Thanks!

I made the change but still get this error: Notice: Undefined variable: options in /kosher-hotels/kosher-hotel.php on line 118 Notice: Undefined variable: record in /kosher-hotels/kosher-hotel.php on line 118 getuploads: no 'tableName' value specified! Here is the page: http://www.koshertravelinfo.com/kosher-hotels/kosher-hotel.php?Beverly-Hills-Suites-Hotel-Banquettes-1


Jason
Staff / Moderator


Dec 28, 2011, 9:14 AM

Post #12 of 18 (2636 views)
Shortcut
Re: [RapidWeb] Adding an image Gallery Using Lightbox [In reply to] Can't Post

Hi

Try changing this line:


Code
<?php foreach (getUploads($options['hotels'], 'images', $record['num']) as $upload): ?>


to this:


Code
<?php foreach ($hotelsRecord['images'] as $upload): ?>


Hope this helps
---------------------------------------------------
Jason Sauchuk - Programmer 
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/ 


northernpenguin
User

Dec 28, 2011, 9:32 AM

Post #13 of 18 (2635 views)
Shortcut
Re: [RapidWeb] Adding an image Gallery Using Lightbox [In reply to] Can't Post

Hi RapidWeb

I wrote a basic script to show you how it should work:


Code
<?php header('Content-type: text/html; charset=utf-8'); ?> 
<?php
require_once "cmsbuilder/lib/viewer_functions.php";

list($imagesRecords, $imagesMetaData) = getRecords(array(
'tableName' => 'images',
));
?>
<html>
<head>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

</head>

<body>
<table>
<?php foreach ($imagesRecords as $record): ?>
<tr>
<?php foreach ($record['images'] as $upload): ?>
<td><a href="<?php echo $upload['urlPath'] ?>" rel="lightbox[<?php echo $record['album'] ?>]"><img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" /></a></td>
<?php endforeach ?>
</tr>
<?php endforeach ?>
</table>



</body>
</html>


My section editor only has two fields: album & images. This allows you an unlimited number of albums and an unlimited number of images per album.

Works great. The layout is up to you.

Enjoy!
--
northernpenguin
Northern Penguin Technologies

"Any sufficiently advanced technology
is indistinguishable from magic."
........Arthur C. Clarke


RapidWeb
User

Dec 28, 2011, 3:30 PM

Post #14 of 18 (2617 views)
Shortcut
Re: [Jason] Adding an image Gallery Using Lightbox [In reply to] Can't Post

Thanks for your help Jason.

The images now display but when any image is clicked it just opens the image full size in the browser. Lightbox stil does not work.

I assume it is the path but don't know how to code PHP.

Here is the current code:


Code
  

<div align="center">

<?php foreach ($hotelsRecord['images'] as $upload): ?>

<?php if ($upload['hasThumbnail']): ?>

<a href="<?php echo $upload['urlPath'] ?>" rel="lightbox[Homepage]" title="<?php echo $upload['info1'] ?>">

<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight']?>" />

</a>

<?php elseif ($upload['isImage']): ?>

<a href="<?php echo $upload['urlPath'] ?>" rel="lightbox[Homepage]" title="<?php echo $upload['info1'] ?>">

<img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" />

</a>

<?php else: ?>

<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a>

<?php endif ?>

<?php endforeach ?>

</div>

</nodesigner>


The test page for Lightbox does work on my server. See here please:

http://www.koshertravelinfo.com/index1.html

Please help!


(This post was edited by RapidWeb on Dec 28, 2011, 3:35 PM)


RapidWeb
User

Dec 28, 2011, 6:54 PM

Post #15 of 18 (2612 views)
Shortcut
Re: [RapidWeb] Adding an image Gallery Using Lightbox [In reply to] Can't Post

OK... I got it to work. I had to make sure to include the full path for the java scripts in the Header. But now the Close image does not come up...
http://www.koshertravelinfo.com/kosher-hotels/kosher-hotel.php?Beverly-Hills-Suites-Hotel-Banquettes-1

I know that the close image is in the right place, because it does work on the test page here:
http://www.koshertravelinfo.com/index1.html


Why does not the close image come up in the Lightbox?


Damon
Staff / Moderator


Dec 29, 2011, 9:10 AM

Post #16 of 18 (2591 views)
Shortcut
Re: [RapidWeb] Adding an image Gallery Using Lightbox [In reply to] Can't Post

Hi,

When I viewed the broken closed image source I found it was this:
http://www.koshertravelinfo.com/kosher-hotels/images/closelabel.gif

It needs to be this:
http://www.koshertravelinfo.com/images/closelabel.gif

You can change the image path for the loading.gif and closelable.gif in this file:
/js/lightbox.js

Find this code:

Code
    fileLoadingImage:        'images/loading.gif',      
fileBottomNavCloseImage: 'images/closelabel.gif',


Change it to this:

Code
    fileLoadingImage:        '/images/loading.gif',      
fileBottomNavCloseImage: '/mages/closelabel.gif',


That should work now. Let me know if solves the broken images.

Thanks!

--------------------------------------------------- 
Cheers
Damon Edis
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/


RapidWeb
User

Dec 29, 2011, 4:14 PM

Post #17 of 18 (2584 views)
Shortcut
Re: [Damon] Adding an image Gallery Using Lightbox [In reply to] Can't Post

Thanks Damon!

Works fine now. One more thing...

If you dont mind have a look on the page. I would like to know why the image loads on top of the page, not in the center. And also, why is there no white space on top of the image just like there is on the sides and the bottom. I am sure this is a simple correction in the style-sheet. You were all so kind to me I really appreciate all the help I got on this board from Interactive Tools and other members.


Tom P
User


Dec 30, 2011, 11:27 AM

Post #18 of 18 (2562 views)
Shortcut
Re: [RapidWeb] Adding an image Gallery Using Lightbox [In reply to] Can't Post

Hello RapidWeb,

We're definitely getting a bit more in depth with this than we normally do, but I think this will fix your problem.

1 - Open the css file for the lightbox
2 - Find the css for the div (search for "#imageContainer")
3 -Add these lines:

Code
position: relative; 
top: 10px;

4 - Save the file.

This will add a 10px border to the top of the image. Since the lightbox is dynamic, it should automatically adjust the height and width depending on the picture you load so adding this border shouldn't otherwise affect the appearance.

The lightbox itself determines where to 'sit' - you'd have to explore the lightbox.js file to see if there's a reference to how that's calculated.

Hope that helps!

Tom