Thumbnail gallery
14 posts by 3 authors in: Forums > CMS Builder
Last Post: August 19, 2010 (RSS)
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!
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.
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
Chris
Re: [chris] Thumbnail gallery
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
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:
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.
I hope this helps! Please let me know if you have any questions.
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
Chris
Re: [chris] Thumbnail gallery
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!
Sorry to keep asking!
Re: [chris] Thumbnail gallery
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!
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.
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/
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
Hi Jason,
Page attached.
Thanks in advance!
Page attached.
Thanks in advance!
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:
to this:
That should get rid of the errors you're seeing.
Hope this helps.
I think I found the problem. On line 17, trying changing the code from this:
$testRecord = @$testRecords[0]; // get first recordto this:
$record = @$testRecords[0]; // get first recordThat 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/
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,
Ahh, right! Changes in red below for your two upload fields:
I hope this helps! Please let me know if you have any questions.
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
Chris