Quick and dirty jQZoom with Drupal e-commerce and imagecache

2nd Apr
2010

jqzoom_drupal.pngRecently I integrated the nifty jQZoom jQuery plug-in into a client's site built on Drupal 5 and Drupal e-commerce 5.x-3.6. A jQZoom module for Drupal does exist, but here I'm going to outline the few simple steps required to get the script working with images output via a node template (or the Contemplate module).

For starters, on the site we have the following Imagecache presets:

  • product_full: "full-size" version, actually scaled to an width of 600px;
  • product_main: the "main image", used for display on a product node;
  • product_thumb: a thumbnail, used in product node teasers and for switching between product images.

The product nodes are templated to output several product images, something like this:

Showing the first image as the "main" image, and all images as thumbnails on the right which, when clicked on, replace the "main" image with the (mid-size) image associated with the thumbnail.

The layout is achieved with a product node template outputting the following HTML, where filenamex.jpg are the images associated with the product node, and filename1.jpg is the "main" image. There is of course some CSS to achieve the layout and borders in the image above which I haven't included here.

  1. <!-- the main product image //-->
  2. <div class="product-left">
  3. <div id="js-main-image">
  4. <a href="/files/imagecache/product_full/filename1.jpg" class="hoverproduct">
  5. <img src="/files/imagecache/product_main/filename1.jpg" id="main-product-image" />
  6. </a>
  7. </div>
  8. <p class="tip-text">Hover over the image to view detail.</p>
  9. </div>
  10.  
  11. <!-- product thumbnail images //-->
  12. <div class="product-right">
  13. <a href="/files/imagecache/product_main/filename1.jpg" onclick="replaceProductImage('/files/imagecache/product_main/filename1.jpg', '/files/imagecache/product_full/filename1.jpg');return false;">
  14. <img src="/files/imagecache/product_thumb/filename1.jpg" alt="Product title'" title="Product title" />
  15. </a>
  16.  
  17. <a href="/files/imagecache/product_main/filename2.jpg" onclick="replaceProductImage('/files/imagecache/product_main/filename2.jpg', '/files/imagecache/product_full/filename2.jpg');return false;">
  18. <img src="/files/imagecache/product_thumb/filename2.jpg" alt="Product title'" title="Product title" />
  19. </a>
  20.  
  21. <a href="/files/imagecache/product_main/filename3.jpg" onclick="replaceProductImage('/files/imagecache/product_main/filename3.jpg', '/files/imagecache/product_full/filename3.jpg');return false;">
  22. <img src="/files/imagecache/product_thumb/filename3.jpg" alt="Product title'" title="Product title" />
  23. </a>
  24. </div>

A utility module (which I called ec_zoom) simply adds our JavaScript and CSS when we need it via hook_menu(). Note that the jQZoom files were installed to /sites/all/libraries/.

  1. /* Implements hook_menu(). */
  2. function ec_zoom_menu($may_cache) {
  3. if (!$may_cache) {
  4. // NOTE: this is only needed on (product) node pages.
  5. if (arg(0) == 'node' && is_numeric(arg(1)) && arg(2) != 'edit') {
  6. drupal_add_js(drupal_get_path('module', 'ec_zoom') .'/product_images.js', 'module');
  7.  
  8. // jQZoom
  9. drupal_add_js('sites/all/libraries/jqzoom/js/jquery.jqzoom1.0.1.js');
  10. drupal_add_css('sites/all/libraries/jqzoom/css/jqzoom.css');
  11. }
  12. }
  13. }

The JavaScript to swap images is contained in the file product_images.js:

  1. function replaceProductImage(image_mid, image_big) {
  2. // remove jQZoom so we can reload new image/dimensions
  3. $(".jqZoomWindow").remove();
  4. $(".jqZoomPup").remove();
  5. $(".jqzoom").remove();
  6.  
  7. // switch the image by removing the node and re-writing in the neccessary HTML
  8. var image = $('#main-product-image').attr("src");
  9. $(".hoverproduct").remove();
  10. $('#js-main-image').append('<a href="'+image_big+'" class="hoverproduct"><img src="'+image_mid+'" id="main-product-image" /></a>');
  11.  
  12. // reload jQZoom after switching image
  13. $(".hoverproduct").jqzoom({
  14. zoomWidth: 250,
  15. zoomHeight: 200,
  16. title: false
  17. });
  18. }
  19.  
  20. // load jQZoom on main image as soon as page is loaded
  21. $(document).ready(function(){
  22. $(".hoverproduct").jqzoom({
  23. zoomWidth: 250,
  24. zoomHeight: 200,
  25. title: false
  26. });
  27. });

Gotta love quick and dirty integration...

Comments

I have used little bit

I have used little bit different technique but same result, the problem that i come into with this was on Mozilla, when some of the little images were clicked and big image replaced, the zoom was still showing the previous image.
The fix was, before calling the jqzoom() in your replaceProductImage function, you should unbind the jqzoom event first,

$(".hoverproduct").unbind();

then call the jqzoom function.