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 AuroraStorefrontAssetStore\javascript
  • Copy multizoom.css to AuroraStorefrontAssetStore\css
  • Copy spinningred to AuroraStorefrontAssetStore\images

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

aurora-zoom1-code

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 AuroraStorefrontAssetStore\Widgets\ProductFullImage 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:

aurora-zoom-code2

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

Short URL: http://bit.ly/19FWNue