In my experience, ecommerce websites are their own beasts, with all sorts of specialized functionality that doesn’t get requested on other websites. One of the most frequent requests, and often times one of the most difficult to fulfill, is enabling product image zoom functionality along with gallery thumbnails that can seamlessly swap out the main image. Here is one way to accomplish that on a Drupal 6 website with Ubercart.

  1. Install the necessary modules. For this solution, you’re going to need CCK, ImageField, ImageCache, and Cloud Zoom (I used to prefer jQZoom, but found it to have less compatibility in WebKit browsers).
  2. Set up your image field. The code provided below is designed to work with the default image handling field creating by Ubercart, but it can work just as well with any CCK image field. Just be sure to swap out the $node->field_image_cache variable with the name of your own field if you’re using something different.
  3. Set up your ImageCache presets. You’re going to need three. Again, the solution below is tailored for use with product images in Ubercart, so I’ve named them accordingly. “product_full” is the main image displayed to the user, “product_zoom” is the larger image shown in the zoom window, and “product_thumbnail” is the gallery thumbnail that allows the user to swap out the main image. You can name these whatever you like; just be sure to change their names in the code as well.
  4. Stop the field from displaying. By default, Cloud Zoom can automatically display the image and zoom window without any need to mess with template files. This is very handy, but it doesn’t support gallery thumbnails, so we’ll need to disable the default behavior. Go into Administer > Content Management > Content Types > Manage fields > Display fields and change the Label, Teaser, and Full node drop-downs for your image field to . Be sure not to click the Exclude boxes, or else the template modifications below will not work properly.
  5. Add this code to your theme file. In the case of Ubercart, this goes in node-product.tpl.php where you’d like the images to appear. If you’re using a different content type, use that in place of product. And again, be sure to switch out the image field variable name or the ImageCache preset names if you’re using something different.

    &lt;?php<br /><br />
    drupal_add_js(drupal_get_path('module', 'cloud_zoom') . '/cloud-zoom/cloud-zoom.1.0.2.min.js');<br />
    drupal_add_css(drupal_get_path('module', 'cloud_zoom') . '/cloud-zoom/cloud-zoom.css');<br />
    if (is_array($node-&gt;field_image_cache) && count($node-&gt;field_image_cache) &gt; 0 && strlen($node-&gt;field_image_cache[0]) &gt; 0){<br /><br />
      // Display the primary image.<br />
      echo l(theme('imagecache', 'product_full', $node-&gt;field_image_cache[0]['filepath'], $node-&gt;field_image_cache[0]['data']['alt'], $node-&gt;field_image_cache[0]['data']['title']), imagecache_create_path('product_zoom', $node-&gt;field_image_cache[0]['filepath']), array('attributes' =&gt; array('class' =&gt; 'cloud-zoom', 'id' =&gt; 'zoom1'), 'html' =&gt; TRUE));<br /><br />
      // Display the gallery thumbnails.<br />
      $num_images = count($node-&gt;field_image_cache);<br />
      if ($num_images &gt; 1){<br />
        for ($i = 0; $i &lt; $num_images; $i++){<br />
          echo '&lt;a class="cloud-zoom-gallery" href="' . base_path() . imagecache_create_path('product_zoom', $node-&gt;field_image_cache[$i]['filepath']) . '" rel="useZoom:\'zoom1\', smallImage:\'' . base_path() . imagecache_create_path('product_full', base_path() . $node-&gt;field_image_cache[$i]['filepath']) . '\'"&gt;' . theme('imagecache', 'product_thumbnail', $node-&gt;field_image_cache[$i]['filepath']) . '&lt;/a&gt;';<br />
        }<br />
      }<br />
    }<br /><br />
  6. Stylize to taste. With a bit of added coding and some CSS, you can make the final product display however you like. For example, I like to put the gallery thumbnails into an unordered list and float them beneath the main image for ease of usability. Your needs may vary.

11 thoughts on “How to Enable Ubercart Product Image Zoom with Gallery Thumbnails

  1. hi stephen,
    the post is great, worked perfectly for the image,
    but the product description and add to cart and other things are not displaying can you pl tell how do i get to display the product description and other things
    thank you

  2. Hello diwakar. In step five, you added the code listed above to node-product.tpl.php. You should have been using an existing template file, but you might have just pasted that in by itself. You’ll want to go hunt down the default template file for your theme and use that code as a base. Try looking under modules/node/node.tpl.php, or use the one in your theme if there already is one.

  3. hi stephen,

    using zen stater kit, i had made a new node-product.tpl.php file instead of modifying the node.tpl.php and renaming it to node-product.tpl.php
    now it works fine
    thank you,

  4. Hi Stephen,

    This was a really great help to me. I do have a minor issue I’m trying to figure out. I have 3 thumbnails setup, but for pages that only have 1 thumbnail, the other two show up as red x in IE. firefox is fine. Can you think of a way to resolve that?

  5. Hi Stephen,

    Your code was working great till now but suddenly it stopped showing the next image in product image it just stops at Loading…., any suggestions please

  6. Hello Stephen, Thank you, the site i m working on is wedding stuff for brides a shop run by my cousin helping her set up her site, the beta site is on, please have a look, it will of great help,
    thank you

  7. Hi Stephen, the beta site is on pl do have a look, looks like imagecache issue,

    image url is being displayed twice —

    (useZoom:’zoom1′, smallImage:’/sites/default/files/imagecache/product_full//sites/default/files/Net_Wedding_1.jpg’)

    if you could suggest any solution it would be of great help,

  8. Hello dlwakar. I took a look at the site and I suspect your problem may stem from incredibly large image sizes. The imagecache module can do some amazing things with images, but it’s still limited by the overall PHP memory limit. Case in point, I looked at the “Net elegance” dress and saw the error you were talking about. When I loaded the broken image individually, however, it worked fine. Out of curiosity, what is the resolution of the original image? If it’s too high, you might want to consider resizing it to more reasonable proportions before uploading it to Drupal. Hope this helps.

  9. Hi Stephen,

    Thank you, really appreciate it, yep some of the images a really huge, i had told them that they can use min 72dpi and missed telling the max limit and they dint bother with the max limit, does this happen to only large images? but it effecting some decent size products too. Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *