Picture Gallery Setup
6 posts by 3 authors in: Forums > CMS Builder
Last Post: September 22, 2010 (RSS)
Hi
I have this new website i am building but i want to do this layout and i am having some issues.
I have the layout the way i want it but i need to make it work with CMS builder.
I like the way the projects will be down the left hand side of the page and the images on the right but i dont know how to go about it.
the link to the page is http://www.awardbathrooms.com.au/awardwinningbathrooms.php
i have also included the page the way it is now and also the output from CMS builder for the page.
<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php
// load viewer library
$libraryPath = 'cmsAdmin/lib/viewer_functions.php';
$dirsToCheck = array('/home/awardbath/domains/domainname.com/public_html/','','../','../../','../../../');
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($galleryRecords, $galleryMetaData) = getRecords(array(
'tableName' => 'gallery',
));
?>
<!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
body { font-family: arial; }
.instructions { border: 3px solid #000; background-color: #EEE; padding: 10px; text-align: left; margin: 25px}
</style>
</head>
<body>
<!-- INSTRUCTIONS -->
<div class="instructions">
<b>Sample List Viewer - Instructions:</b>
<ol>
<?php ?>
<li><b>Remove any fields you don't want displayed.</b> (Most list pages only have title and link fields.)</li>
<li>Rearrange remaining fields to suit your needs.</li>
<li>Copy and paste code into previously designed page (or add design to this page).</li>
</ol>
</div>
<!-- /INSTRUCTIONS -->
<!-- STEP2: Display Records (Paste this where you want your records to be listed) -->
<h1>Gallery - List Page Viewer</h1>
<?php foreach ($galleryRecords as $record): ?>
Record Number: <?php echo $record['num'] ?><br/>
Title: <?php echo $record['title'] ?><br/>
Content: <?php echo $record['content'] ?><br/>
_link : <a href="<?php echo $record['_link'] ?>"><?php echo $record['_link'] ?></a><br/>
<hr/>
<?php endforeach ?>
<?php if (!$galleryRecords): ?>
No records were found!<br/><br/>
<?php endif ?>
<!-- /STEP2: Display Records -->
</body>
</html>
thanks
Craig
I have this new website i am building but i want to do this layout and i am having some issues.
I have the layout the way i want it but i need to make it work with CMS builder.
I like the way the projects will be down the left hand side of the page and the images on the right but i dont know how to go about it.
the link to the page is http://www.awardbathrooms.com.au/awardwinningbathrooms.php
i have also included the page the way it is now and also the output from CMS builder for the page.
<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php
// load viewer library
$libraryPath = 'cmsAdmin/lib/viewer_functions.php';
$dirsToCheck = array('/home/awardbath/domains/domainname.com/public_html/','','../','../../','../../../');
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($galleryRecords, $galleryMetaData) = getRecords(array(
'tableName' => 'gallery',
));
?>
<!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
body { font-family: arial; }
.instructions { border: 3px solid #000; background-color: #EEE; padding: 10px; text-align: left; margin: 25px}
</style>
</head>
<body>
<!-- INSTRUCTIONS -->
<div class="instructions">
<b>Sample List Viewer - Instructions:</b>
<ol>
<?php ?>
<li><b>Remove any fields you don't want displayed.</b> (Most list pages only have title and link fields.)</li>
<li>Rearrange remaining fields to suit your needs.</li>
<li>Copy and paste code into previously designed page (or add design to this page).</li>
</ol>
</div>
<!-- /INSTRUCTIONS -->
<!-- STEP2: Display Records (Paste this where you want your records to be listed) -->
<h1>Gallery - List Page Viewer</h1>
<?php foreach ($galleryRecords as $record): ?>
Record Number: <?php echo $record['num'] ?><br/>
Title: <?php echo $record['title'] ?><br/>
Content: <?php echo $record['content'] ?><br/>
_link : <a href="<?php echo $record['_link'] ?>"><?php echo $record['_link'] ?></a><br/>
<hr/>
<?php endforeach ?>
<?php if (!$galleryRecords): ?>
No records were found!<br/><br/>
<?php endif ?>
<!-- /STEP2: Display Records -->
</body>
</html>
thanks
Craig
Thanks
Craig
KC Media Solutions
www.kcmedia.biz
Craig
KC Media Solutions
www.kcmedia.biz
Re: [kcmedia] Picture Gallery Setup
Hi Craig,
I'm not totally clear on how you want everything on your page to function, but it seems like you might be able to use the Dynamic Drive Thumbnail Viewer II http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm to accomplish what you're trying to do. There are rollover and link implementations for bringing up images that both might work.
I need to get to work on a deadline, so I can't post the information right now, but there are some recipes in my CMSB Cookbook http://www.thecmsbcookbook.comthat can help implementing the viewer using CMSB.
Best,
Jerry Kornbluth
I'm not totally clear on how you want everything on your page to function, but it seems like you might be able to use the Dynamic Drive Thumbnail Viewer II http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm to accomplish what you're trying to do. There are rollover and link implementations for bringing up images that both might work.
I need to get to work on a deadline, so I can't post the information right now, but there are some recipes in my CMSB Cookbook http://www.thecmsbcookbook.comthat can help implementing the viewer using CMSB.
Best,
Jerry Kornbluth
The first CMS Builder reference book is now available on-line!
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
Re: [gkornbluth] Picture Gallery Setup
Hi Jerry
what i want to do is have links down the left hand side that list all the projects and when you click on that link it will show you the images on the right hand side with 1 large image and 4 smaller ones below it when you click the smaller ones it will load them to where the larger one is, also you will see the back and next links that will allow you to scroll though other images in that gallery.
thanks
Craig
what i want to do is have links down the left hand side that list all the projects and when you click on that link it will show you the images on the right hand side with 1 large image and 4 smaller ones below it when you click the smaller ones it will load them to where the larger one is, also you will see the back and next links that will allow you to scroll though other images in that gallery.
thanks
Craig
Thanks
Craig
KC Media Solutions
www.kcmedia.biz
Craig
KC Media Solutions
www.kcmedia.biz
Re: [kcmedia] Picture Gallery Setup
Got it.
I assume that there's a separate record with all the images, etc .for each project.
I still think that the viewer might be the way to go.
Jerry
I assume that there's a separate record with all the images, etc .for each project.
I still think that the viewer might be the way to go.
Jerry
The first CMS Builder reference book is now available on-line!
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
Re: [gkornbluth] Picture Gallery Setup
Hi Jerry
It is setup with a multi section records and inside each record will be the images for that project.
It is setup with a multi section records and inside each record will be the images for that project.
Thanks
Craig
KC Media Solutions
www.kcmedia.biz
Craig
KC Media Solutions
www.kcmedia.biz
Re: [kcmedia] Picture Gallery Setup
By Chris - September 22, 2010
Hi kcmedia,
I think you want to dynamically update the gallery on the right when people click project links on the left, is this correct?
If so, the first thing to do is to get all your record data out into a JavaScript object so that your page can dynamically update the images on the right side. Our free support can't really help you with the Javascript involved in getting your page working (hint: use JQuery,) but I can show you how to get all your record data into JavaScript:
The code above assumes that your upload field is called 'images'. You can try pasting this code into your page and viewing source on it to see what it provides.
Our consulting department could quickly write you up the necessary JavaScript to get your gallery working if that's something you're interested in.
If you don't mind a page refresh when people click the project links, this would be much simpler. If that's the case, please provide a working example of your gallery code and I can show you how to set this up.
I hope this helps! Please let me know if you have any questions.
I think you want to dynamically update the gallery on the right when people click project links on the left, is this correct?
If so, the first thing to do is to get all your record data out into a JavaScript object so that your page can dynamically update the images on the right side. Our free support can't really help you with the Javascript involved in getting your page working (hint: use JQuery,) but I can show you how to get all your record data into JavaScript:
<script>
<?php
$records_js = array();
foreach ($galleryRecords as $record) {
$images = array();
foreach ($record['images'] as $image) {
$images[] = array(
'thumbUrlPath' => $image['thumbUrlPath'],
'urlPath' => $image['urlPath'],
'width' => $image['width'],
'height' => $image['height'],
);
}
$records_js[$record['num']] = array(
'title' => $record['title'],
'content' => $record['content'],
'images' => $images,
);
}
?>
var records = <?php echo json_encode($records_js) ?>;
</script>The code above assumes that your upload field is called 'images'. You can try pasting this code into your page and viewing source on it to see what it provides.
Our consulting department could quickly write you up the necessary JavaScript to get your gallery working if that's something you're interested in.
If you don't mind a page refresh when people click the project links, this would be much simpler. If that's the case, please provide a working example of your gallery code and I can show you how to set this up.
I hope this helps! Please let me know if you have any questions.
All the best,
Chris
Chris