CCK image gallery viewer for Drupal 5.x

decibel.places 7:33 pm on October 17, 2009 | Answers: 1    
Tags: cck, drupal (4), gallery (5), gallery viewer, image (24), image gallery, viewer (5)

Rate Knowledge:

 Loading ...

• decibel.places 7:34 pm on October 17, 2009
  

  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 400×400px

  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