Adding an image Gallery Using Lightbox

18 posts by 6 authors in: Forums > CMS Builder
Last Post: December 30, 2011   (RSS)

By Guidian - June 23, 2010

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?

Re: [Guidian] Adding an image Gallery Using Lightbox

By Jason - June 23, 2010

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 - Project Manager
interactivetools.com

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

Re: [Jason] Adding an image Gallery Using Lightbox

By Guidian - June 23, 2010

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

Re: [Jason] Adding an image Gallery Using Lightbox

By (Deleted User) - December 26, 2011

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

Re: [RapidWeb] Adding an image Gallery Using Lightbox

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

Re: [northernpenguin] Adding an image Gallery Using Lightbox

By (Deleted User) - December 26, 2011 - edited: December 27, 2011

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.

Re: [RapidWeb] Adding an image Gallery Using Lightbox

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

Re: [northernpenguin] Adding an image Gallery Using Lightbox

By (Deleted User) - December 27, 2011 - edited: December 27, 2011

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:
<?php


// 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:


<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!

Re: [RapidWeb] Adding an image Gallery Using Lightbox

By northernpenguin - December 27, 2011 - edited: December 27, 2011

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

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:
<?php


// 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:


<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