Last updated March 27, 2011. Created by decibel.places on June 22, 2009.
Edited by silverwing. Log in to edit this page.
I looked for a module that would enable a small image gallery viewer for D5 - there seem to be several D6 modules in various stages of development.
Very simply, I want to allow premium subscription users to post 5 thumbnails with a viewer to a CCK custom profile page.
I am already using a Content Template for the CCK custom profile, so here is how I set it up.
I enabled an image field named "spotlight_image" with up to 5 images allowed, max dimensions 400x400px
On the template, I inserted them with the first one also enlarged. Note also the JavaScript function to swap the innerHTML of the div containing the large image (so the image dimensions are dynamic; using src yielded a fixed dimension); also note the if statement, that omits the entire section if no images are uploaded, a technique used on every custom field in the template.
<script type="text/javascript">
<!--
function viewer(th){
document.getElementById("spotmainimg").innerHTML="<img src='" + th.src + "' />";
}
//-->
</script>
<?php if ($node->field_spotlight_image[0]['view']): ?>
<div class="field field-type-image field-field-spotlight-image">
<div class="field-items">
<?php foreach ((array)$node->field_spotlight_image as $item) { ?>
<div class="field-item spotthumbimg" onmouseover="viewer(this.firstChild)"><?php print $item['view'] ?></div>
<?php } ?>
</div>
<br clear="left" />
<div id="spotmainimg"><?php print $node->field_spotlight_image[0]['view'] ?></div>
</div>
<?php endif; ?>and here is the CSS (max-height and max-width are probably unnecessary)
div.field-field-spotlight-image {height: 500px}
div#spotmainimg {width: 415px; text-align: center}
div#spotmainimg img {max-height: 415px; max-width: 415px; margin: 20px 0 0 5px}
div.spotthumbimg img {margin: 5px; width: 75px; height: 75px; float: left}Example page: http://www.locavorenetwork.com/spotlightgrower/symms-fruit-ranch