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: [Guidian] Adding an image Gallery Using Lightbox

By Jason - June 23, 2010

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 - 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 (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: [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