Using Dynamic Drive’s Image Zoomer in WebSphere Commerce

zoom-auroraThis blog post shows how you can use the Image Zoomer plugin by Dynamic Drive:John Davenport Scheuer for jQuery to provide image zoom capability in WebSphere Commerce. While many companies use their own package for image zoom like Adobe, a Dojo widget, or any other JavaScript framework, I wanted to show how easy it is to use this plugin on your WebSphere Commerce site. One, because most of WebSphere Commerce uses Dojo and two, I wanted to show how easy it is to do something like this with the MVC code base in the Aurora store front.

First off, you will need to read about the plugin and the instructions here. Download all of the files and images to your local machine and place them in the following directories. This article assumes you are using the base installation and the AuroraStoreFrontAssetStore.

  • Copy multizoom.js to AuroraStorefrontAssetStorejavascript
  • Copy multizoom.css to AuroraStorefrontAssetStorecss
  • Copy spinningred to AuroraStorefrontAssetStoreimages

Next you are going to put this block of code in ProductDisplay.jsp which can be located in the following directory: AuroraStorefrontAssetStoreLayouts


I modified the original script from the site to use some JSP variables so the code can be reused across extended sites. For instance, the ${jsAssetsDir} variable is used to point to the correct location for the storefront.

Next, inside of ProductFullImage_UI.jspf which can be found in AuroraStorefrontAssetStoreWidgetsProductFullImage needs to be modified to include the code below. Once again I modified the script so it points to the productFullImage and to the correct location for the load GIF:


Some additional steps you may want to implement for a full integration:

  • Implement this feature on the Quick view screen.
  • I didn’t modify the code to work when you switch image angles or swatches. This would be a good thing for you to figure out.

Quick video of it working in Aurora:

You can also check out this article: 25+ jQuery Image Zoom Effect Plugins

7 thoughts on “Using Dynamic Drive’s Image Zoomer in WebSphere Commerce

  1. Good post Bob!

    Little mistake in the post, you probably mean the other way around JS in JS and CSS in CSS.. 😉
    “Copy multizoom.js to AuroraStorefrontAssetStorecss
    Copy multizoom.css to AuroraStorefrontAssetStorejavascript”

    Perhaps you should consider putting javascript/java code in some sort of [CODE] block since the layout is a bit messed up at the moment.

  2. Thanks Driss! Yes, I am having a load of problems with embedded code in my blog. I just replaced them with images for now. I am going to provide a text file for download until I figure it out.

  3. Hi Bob! Great post!
    I try to make changes you mentoried, but have some problems: zoom increases image 447×447 but not 1000×1000. And is it hard to make zooming for angle image?

Leave a Reply to Gary Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.