I'm currently using the code below to display my ubercart products images. It swaps the main image with the additional images when you click on them. The only problem is the main image doesn't open to a larger picture. How do I get this to open the original image? Thanks.

<?php
    </div>
    <div class="content-right">
      <?php if ($teaser) : ?>
        <?php print $node->content['image']['#value']; ?>
      <?php else : ?>
        <?php $num = count($field_image_cache); ?>
        <?php if ($num > 1) : ?>
          <div class="product-image">
            <div id="viewer" class="pics">
              <?php foreach($field_image_cache as $image) : ?>
                <?php print theme('imagecache', 'product', $image['filepath'], $title, $title); ?>
                <?php //print theme('imagefield_image_imagecache_thickbox', 'cart', $image, $image['filepath'], $title, $title); ?>
              <?php endforeach; ?>
            </div>
            <?php
              jquery_plugin_add('cycle');
              drupal_add_js('
                $(document).ready(function() {
                  $(\'#viewer\').after(\'<ul class="viewer-nav">\').cycle({ 
                    fx:     \'fade\',
                    speed:  \'slow\',
                    timeout: 0,
                    pager:  \'.viewer-nav\',
                    pagerAnchorBuilder: function(idx, slide) {   // callback fn that creates a thumbnail to use as pager anchor 
                      return \'<li><a href="#"><img src="\' + slide.src + \'" width="50" height="50" /></a></li>\'; 
                    }
                  });
                });',
                "inline"
              );
            ?>
          </div>
        <?php else : ?>
          <?php print $node->content['image']['#value']; ?>
        <?php endif; ?>
        <?

Comments

fehin’s picture

Still having problem with this. Someone help please.

mcfilms’s picture

If you install and Configure lightbox2, Ubercart supports this feature automatically. You don't need to write any php.

A list of some of the Drupal sites I have designed and/or developed can be viewed at motioncity.com

fehin’s picture

Ubercart doesn't switch the multiple images with the main one. When you click on the additional images they open straight to the original image. Right now the code switches the images if there are multiple images but no option to open the original larger image. It works kind of like this now http://www.tillys.com/tillys/variants.aspx?prod=159058200&ctlg=020_Girls..., but when you click on the body of the main image it doesn't open the original larger image. How can I fix that? I don't mind having a link to the larger image at the bottom of the image like this http://www.overstock.com/Home-Garden/Flowers-Hand-painted-Oil-on-Canvas-.... Thanks.