Thread: Zoomify Image Support added in ML v7.0.2.5

Starting in version 7.0.2.5 of AspDotNetStorefront ML, Zoomify Zoomable images are now supported.

Zoomify Zoomable Image Support

Starting in version 7.0.2.X of the store front, Zoomify Zoomable images are supported using the Zoomifier EZ and Zoomifier for Flash products available from http://www.zoomify.com. The storefront ships with the Zoomify Viewer Flash movie already installed in the images folder.

Basic Implementation:

Zoomify AppConfig Parameters:

AppConfig Name Default Value Description

Zoomify.Active false Enable display of Zoomify Viewer when Zoomify image content is available.
Zoomify.ProductMedium true Enable Zoomify content for medium product images using the standard LookupProductImage function within XmlPackages.
Zoomify.GalleryMedium true Enable Zoomify content for medium product gallery images using the standard LookupProductImage function within XmlPackages.
Zoomify.ProductLarge true Enable Zoomify content for large product images using the standard LookupProductImage function within XmlPackages.
Zoomify.Medium.Width 250 Medium Zoomify Viewer Width
Zoomify.Medium.Height 250 Medium Zoomify Viewer Height
Zoomify.Large.Width 500 Large Zoomify Viewer Width
Zoomify.Large.Height 500 Large Zoomify Viewer Height

Step 1) Set Zoomify.Active to true.
Step 2) Upload or copy Zoomify data to the images/product/large folder using the proper folder name for the product.

The images/product/large folder will be checked for a Zoomify data folder that corresponds to the image file name of the product. For example, if the images are named 12.jpg then the large folder will be checked for a 12 sub-folder which would contain the Zoomify image data. The Zoomify data folder is generated using one of the tools provided by Zoomify (such as Zoomifier EZ). It will contain an xml document and a sub-folder with the image tiles.

If the Zoomify data folder exists then the Zoomify Flash Viewer will be used to display a Zoomable image on the web site. If there is not a Zoomify data folder for a product then the traditional product images are used.

Most store front users will generate the Zoomify data on their work station computer and then use an FTP application to transfer the Zoomify image data folders to the images/product/large server folder. There is no provision to upload this data using the storefront Admin web site.

Advanced Implementation:

The Zoomify Viewer is displayed using the html markup generated by XmlPackages zoomify.large.xml.config and zoomify.medium.xml.config. These config files may be edited to specify different display parameters:

zoomifyMinZoom: 1 to 100, -1 to fit to display area
zoomifyMaxZoom: 1 to 100, -1 to fit to display area
zoomifyNavWindow: 1 to show, 0 to hide
zoomifyToolbar: 1 to show, 0 to hide
zoomifyX: initial view X, -1 to 1, 0 centers image in display
zoomifyY: initial view X, -1 to 1, 0 centers image in display
zoomifyZoom: 1 to 100, -1 to fit to display area
zoomifySlider: 1 to show, 0 to hide

For further reference please see the Zoomifyer EZ Quick Start Guide that is included with the Zoomifyer EZ product installation available at http://www.zoomify.com.

There are two new XSLT Helper Functions available for use in XmlPackages to display the Zoomify Viewer for Products and Variants. These are:

HasZoomify(sID, sEntityOrObjectName)
LookupZoomify(sID, sEntityOrObjectName, sDesiredSize)

Where:
sID: the ProductID or VariantID
sEntityOrObjectName valid values: product, variant
sDesiredSize valid values: medium, large
To use these functions, you must have Zoomify.Active set to true.

An example XmlPackage fragment to add Zoomify for variant images within the XmlPackage product.VariantsInTableExpanded.xml.config:

Code:

<td width="30%" align="center" valign="top" class="GreyCell">
  <xsl:choose>
  <xsl:when test="aspdnsf:HasZoomify(VariantID, 'variant')">
	<xsl:value-of select="aspdnsf:LookupZoomify(VariantID, 'variant','medium')" disable-output-escaping="yes"/>
  </xsl:when>
  <xsl:otherwise>
	<xsl:value-of select="aspdnsf:LookupVariantImage(ProductID, VariantID, ImageFilenameOverride, $pSKU, 'medium', 0)" disable-output-escaping="yes" />
  </xsl:otherwise>
  </xsl:choose>
</td>

The Zoomify image data for Variants must be located in the images/variant/large folder.

The zoomify.large.xml.config and zoomify.medium.xml.config XmlPackages can also be executed directly and require the ImagePath runtime parameter.

FAQ
Q: I only have hi-res images for some of my products, can I still use Zoomify?
A: Yes, with Zoomify enabled, each product will be checked for a Zoomify data directory. For the products without the Zoomify data, the normal product images will be displayed.

Q: Do I still need to upload the standard resolution medium and large images?
A: It is not absolutely required on products that have Zoomify data, but it is recommended. This is because the standard resolution images are used as alternate image sources for display if the store front customer does not have Adobe Flash Player installed or enabled.

Q: What about skins and multiple images?
A: There can be multiple Zoomify viewers on the same page when using the LookupZoomify() helper function such as when multiple products or variants are being displayed on one page. The SkinID can be referenced within the Zoomify XmlPackages for skin variances, just like with other XmlPackages.

Q: If I use the multi-image manager, and have clickable 1 2 3 buttons, will they work if Zoomify is enabled?
A: This Gallery functionality is controlled with the Zoomify.GalleryMedium AppConfig. When this is true, the Gallery will use the Zoomify Viewer when a Zoomify data folder is available for that image.

Just spent an hour trying to get the zoomify to work, and realized that my VariantsInDropDown xml package uses the LookupImage function to retrieve the image. Zoomify only works with the "LookupProductImage" function apparently.

So I replaced this:

<xsl:value-of select="aspdnsf:LookupImage(ProductID, 'product', 'medium', 1)" disable-output-escaping="yes"/>

with this:

<xsl:value-of select="aspdnsf:LookupProductImage(ProductID, ImageFilenameOverride, SKU, 'medium', 1)" disable-output-escaping="yes"/>

and zoomify works fine now. Just to let everyone know. Thanks,

Good catch Jason. Thx for posting.

Any status on Scene7 integration? Not that I specifically yearn for any, but I did see mention in a few posts that you guys were going to look into it. I'm only curious because I have a customer that wants to integrate with it. I was just wondering what, if anything, was going on with this. I sat through a demo with Scene7 the other week and it didn't look like it would be too time consuming in integrating it. I am sure the zoomify stuff already in place would give me a good foundation to start.
Anyway, I'll be happy to make any work I do surrounding it available.

So for some base Scene7 functionality, I was thinking of altering the image upload code just a bit to allow a mix of URLs and .url files to be uploaded. This would allow Excel or XML bulk imports of URLs as well.
Since Scene7 hosts your images off their servers and you merely access them via URL, it seems it would be a simple matter to have the code say "okay this is not an Image, it is a URL/.url so make it the SRC..."

After that, it would just be a matter of supporting their Pan/Zoom control...

Comments?

My client is getting Scene7 this week so I will actually be able to mess with it pretty soon...

What are the rough costs of Scene7?

It is based on useage but their sales rep says it averages out at about $1000 a month for a medium sized business. I was impressed with the demonstration (although I am well aware of accepting things face-value in a controlled environment). But their swatch technology was very impressive, allowing you do outline a given image into sections and swatch them very dynamically. The algorithm even warps the swatch to match the wireframe you draw. For instance, in the demo, he showed a curtain that was pulled away from a window at its center and held with ribbon. He outlined the curtain and pulled the points of his wireframe in where the curtain bunched up, and the swatch actually warped to match the wireframe. He applied different swatch patterns to the curtain and they all got transformed and warped to the wireframe. It looked very real, you could not detect any anonmalies. Pretty cool.

Yes, scene7 is an advanced high end image management system, so therefore not inexpensive.

http://www.fairindigo.com/cproduct_i...roducts_id/193

the owners of this site claimed to have a patent pending on it but there is no current issued or published application registered to Fair Indigo, LLC