Thumbnail gallery

14 posts by 3 authors in: Forums > CMS Builder
Last Post: August 19, 2010   (RSS)

By Kittybiccy - August 13, 2010

Hi there,

I have this site working in HTML: http://www.ariaraisland.com/the_island.html

I need to find a way of setting up a gallery per page of thumbnail images which when rolled over display a larger image. Can anyone help? Best way of doing this?

Thanks in advance!

Re: [Kittybiccy] Thumbnail gallery

By Chris - August 13, 2010

Hi Kittybiccy,

Having a static HTML sample is definitely the first step, which you've already completed.

Next, you'll want to set up CMS Builder section(s) to upload your images into.

Personally, looking at your existing site structure, I would want to use a Subcategory structure and manage all the pages except Home and prices_ariara_rates2.html with a single section. It may be simpler to use a single Multi Record section and leave the navigation static, however.

Finally, you can post your sample HTML (which you've already done) and your viewer PHP code and we can help you make your PHP generate the same HTML required to get your rollovers working! :)

I hope this helps! Please let me know if you have any questions.
All the best,
Chris

Re: [chris] Thumbnail gallery

By Kittybiccy - August 16, 2010

Hi Chris,

The navigation can be static, that is fine. I just need to know how to get the small thumbnail images displaying the larger images.

Can each page simply have a thumbnail image upload field and a large image upload field - both allowing 5 image uploads? And will it make a difference if they are list or detail pages?

Thanks, Hannah

Re: [Kittybiccy] Thumbnail gallery

By Chris - August 16, 2010

Hi Hannah,

You can use two separate upload fields if you want, or you can use a single upload field and have CMS Builder automatically thumbnail for you. You can use either list or detail pages, but I think this will be easier with detail pages. For simplicity, I'll use a single upload field on a detail page in this example.

Here's the HTML code you're wanting to produce, for reference:

<div class="large_image">
<div id="apDiv1"><img src="Images/island-location1.jpg" width="590" height="360" border="0" /></div>
<div id="apDiv2"><img src="Images/island-location5.jpg" width="590" height="360" border="0" /></div>
<div id="apDiv3"><img src="Images/island-location2.jpg" width="590" height="360" border="0" /></div>
<div id="apDiv4"><img src="Images/island-location3.jpg" width="590" height="360" border="0" /></div>
<div id="apDiv5"><img src="Images/island-location4.jpg" width="590" height="360" border="0" /></div>
</div>

<div class="thumbnail_images">
<img src="Images/thumbs/island-location1.jpg" width="114" height="110" border="0" onmouseover="MM_showHideLayers('apDiv1','','show','apDiv2','','hide','apDiv3','','hide','apDiv4','','hide','apDiv5','','hide')" />
<img src="Images/5px.jpg" border="0" />
<img src="Images/thumbs/island-location5.jpg" width="114" height="110" border="0" onmouseover="MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','hide','apDiv5','','hide')" />
<img src="Images/5px.jpg" border="0" />
<img src="Images/thumbs/island-location2.jpg" width="114" height="110" border="0" onmouseover="MM_showHideLayers('apDiv1','','hide','apDiv2','','hide','apDiv3','','show','apDiv4','','hide','apDiv5','','hide')" />
<img src="Images/5px.jpg" border="0" />
<img src="Images/thumbs/island-location3.jpg" border="0" onmouseover="MM_showHideLayers('apDiv1','','hide','apDiv2','','hide','apDiv3','','hide','apDiv4','','show','apDiv5','','hide')" />
<img src="Images/5px.jpg" border="0" />
<img src="Images/thumbs/island-location4.jpg" width="114" height="110" border="0" onmouseover="MM_showHideLayers('apDiv1','','hide','apDiv2','','hide','apDiv3','','hide','apDiv4','','hide','apDiv5','','show')" />
</div>

That's actually very complicated compared to a lot of gallery source code I've seen, but I enjoy a good challenge! The function below will generate the JavaScript in red above.

<?php
function generateShowHideLayerCode($thisLayer, $totalLayers) {
$code = '';
foreach (range(1, $totalLayers, 1) as $layerIndex) {
if ($code) { $code .= ','; }
$showOrHide = ($layerIndex == $thisLayer) ? 'show' : 'hide';
$code .= "'apDiv{$layerIndex}','','{$showOrHide}'";
}
return $code;
}
?>
<?php $totalLayers = sizeof($record['uploads']); ?>

<div class="large_image">
<?php $count = 1 ?>
<?php foreach ($record['uploads'] as $upload): ?>
<div id="apDiv<?php echo $count ?>"><img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" border="0" /></div>
<?php $count++ ?>
<?php endforeach ?>
</div>

<div class="thumbnail_images">
<?php $count = 1 ?>
<?php foreach ($record['uploads'] as $upload): ?>
<?php if ($count != 1): ?>
<img src="Images/5px.jpg" border="0" />
<?php endif ?>
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" border="0"
onmouseover="MM_showHideLayers(<?php echo generateShowHideLayerCode($count, $totalLayers) ?>)" />
<?php $count++ ?>
<?php endforeach ?>
</div>

I hope this helps! Please let me know if you have any questions.
All the best,
Chris

Re: [chris] Thumbnail gallery

By Kittybiccy - August 17, 2010

Thanks, that's brill, I'll give it a try and let you know how I get on! I think I will need two upload fields though as the large image and the thumbnail images are different proportions (thumbnails are more square).

Sorry to keep asking!

Re: [chris] Thumbnail gallery

By Kittybiccy - August 17, 2010

I've been playing around with it with the one upload field - to see if I could get that working but I'm getting "Undefined variable: record in". Here is the page:
http://www.ariaraisland.com/cmsb/test.php

It might be irrelevant anyway as I'll need to do this with two upload fields, one 'large_image' and one 'thumbnail_images' but if you could give me some more help it would be greatly appreciated!

Re: [Kittybiccy] Thumbnail gallery

By Jason - August 17, 2010

Hi,

I think what's happening is something is just being named wrong. We'll need to fix this before we can actually display any records. If you could attach test.php to this thread, I can take a look and find the problem.

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: [Kittybiccy] Thumbnail gallery

By Jason - August 17, 2010

Hi,

I think I found the problem. On line 17, trying changing the code from this:

$testRecord = @$testRecords[0]; // get first record

to this:
$record = @$testRecords[0]; // get first record

That should get rid of the errors you're seeing.

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] Thumbnail gallery

By Chris - August 17, 2010

Hi Hannah,


I think I will need two upload fields though as the large image and the thumbnail images are different proportions (thumbnails are more square).


Ahh, right! Changes in red below for your two upload fields:

<?php
function generateShowHideLayerCode($thisLayer, $totalLayers) {
$code = '';
foreach (range(1, $totalLayers, 1) as $layerIndex) {
if ($code) { $code .= ','; }
$showOrHide = ($layerIndex == $thisLayer) ? 'show' : 'hide';
$code .= "'apDiv{$layerIndex}','','{$showOrHide}'";
}
return $code;
}
?>
<?php $totalLayers = min(sizeof($record['large_image']), sizeof($record['thumbnail_images'])); ?>

<div class="large_image">
<?php $count = 1 ?>
<?php foreach ($record['large_image'] as $upload): ?>
<div id="apDiv<?php echo $count ?>"><img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" border="0" /></div>
<?php $count++ ?>
<?php endforeach ?>
</div>

<div class="thumbnail_images">
<?php $count = 1 ?>
<?php foreach ($record['thumbnail_images'] as $upload): ?>
<?php if ($count != 1): ?>
<img src="Images/5px.jpg" border="0" />
<?php endif ?>
<img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" border="0"
onmouseover="MM_showHideLayers(<?php echo generateShowHideLayerCode($count, $totalLayers) ?>)" />
<?php $count++ ?>
<?php endforeach ?>
</div>

I hope this helps! Please let me know if you have any questions.
All the best,
Chris