It is with dismay that we report that we have been forced, through the action of hackers, to shut off write-access to this forum. We are keen to leave the wealth of material available to you for research. We have opened a new forum from which our community of users can seek help, support and advice from us and from each other. To post a new question to our community, please visit: http://forums.vortx.com
Here is what I did to get it working. First, I added the mz-packed.js file to the jscripts/ directory. I then added the MagicZoom.css file to the skins/Skin_1/ directory. Then in my template.ascx file, I added
in place of where the product image is called in one of the xmlpackages that you are using on your site (see screenshot below).
The tricky part here is getting this to use the images that exist in the storefront. Since the image tag is built using the extension function LookupProductImage (in product.variantsinrightbar.xml.config in my example), you can't modify this directly in the xmlpackages. If you have the source code, you can just modify the LookupProductImage extension function to alter the img tag that's coming back. If you don't have the source code, your best option is going to be to create a custom extension function that takes the productID, SKU, and/or image filename override value and spits back the appropriate img tag and html.
Last edited by George the Great; 01-16-2009 at 04:22 PM.
At present, it is a manual process of adding Magic Zoom to your aspdotnetstorefront website. We've done it for a number of customers manually, but we'd like to make it easier.
So...
We are offering £100 credit for use on Magic Toolbox products for anyone who can create an aspdotnetstorefront extension for Magic Zoom.
Were you ever able to figure the magic zoom problem out? Magic Zoom said that if I purchased an hour of support from them they'd be able to install it... But I'd like to try and do it myself if possible. Plus, this might help other users in the future.
Sure...here are the steps I took to make this work without modifying source code.
Downloaded the trial version of Magic Zoom from their site
Extracted the files then placed the magiczoom.css file in the skins/skin_#/ directory and the magiczoom.js file in the jscripts directory
Created a CustomExtensions.cs file and wrote a MagicZoomImage method to get the correct image from AspDotNetStorefront and apply the magic zoom modifications:
App_Code/CustomExtensions.cs
Code:
using System.Web;
using System.Web.UI;
using AspDotNetStorefrontCore;
using System.Collections.Generic;
using AspDotNetStorefront;
using System.Text;
using System;
public class CustomExtensions : XSLTExtensionBase
{
#region Constructor
/// <summary>
/// CustomExtensions Constructor
/// </summary>
public CustomExtensions()
: this(null, 1, null)
{
}
public CustomExtensions(Customer cust, int SkinID, Dictionary<string, EntityHelper> EntityHelpers)
: base(cust, SkinID)
{
}
#endregion
public string GetSectionTitle()
{
Page p = HttpContext.Current.Handler as Page;
return (p as SkinBase).SectionTitle;
}
public string MagicZoomImage(String sProductID, String sImageFileNameOverride, String sSKU, String sAltText)
{
StringBuilder sb = new StringBuilder();
int pID = int.Parse(sProductID);
String imagelocmedium = AppLogic.LookupImage("Product", pID, sImageFileNameOverride, sSKU, "medium", ThisCustomer.SkinID, ThisCustomer.LocaleSetting);
String imageloclarge = AppLogic.LookupImage("Product", pID, sImageFileNameOverride, sSKU, "large", ThisCustomer.SkinID, ThisCustomer.LocaleSetting);
sb.Append("<a href=\"" + imageloclarge + "\" class=\"MagicZoom\">");
sb.Append(" <img src=\"" + imagelocmedium + "\" alt=\"" + sAltText + "\"/>");
sb.Append("</a>");
return sb.ToString();
}
}
Modified the web.config file to be able to read my custom extension file
Code:
<!-- Add your own custom XSLTExtensionObjects here -->
<xsltobjects defaultExtension="">
<extensions>
<clear />
<add name="receipt" namespace="urn:receipt" type="ReceiptXsltExtension, app_code"></add>
<add name="custom" namespace="urn:custom" type="CustomExtensions, app_code" ></add>
</extensions>
</xsltobjects>
Now, on any product page that you want to use MagicZoom, you'll need to open up the product xmlpackage you are using for that page (for this example I'll use product.variantsinrightbar.xml.config) you'll need to add the custom namespace to the stylesheet declaration
and then anywhere you want to use MagicZoom in place of the normal image you can replace the call to LookupProductImage with the call to MagicZoomImage
I have done the required changes mentioned by George but zoom is not working.
Any clue ?
I am using ML 8.0.1.2 and medium image is displaying with hyperlink and when I click on medium image it's redirecting to large image.
You'd have to show the mods you've made to be able to help you track it down. Is there a chance the product page is using a different xmlpackage than the one you modified?
Well I really appreciate all of the help. I have to say that I gave up. I turned the project over to the guys over to http://www.compunix.us. They had it done in no time! It looks great! They got all of the other pictures working with it also. The 2nd and 3rd pictures were the problem but these guys took care of it! Thanks again!
Of course, edit the sizes to what you need. This only works for one image though and not for multiple images. If I figure that one out, I'll let you know.
Edit: notice the extensions .jpg If you're using .png images you will need to adjust accordingly.
There are a few bug on this, but I have this working. It's not perfect, but works very well. You will need MagicZoom commercial package and a product template with the proper document type.
Bugs: if you click, you loose the magiczoom function. The below code only works for .jpg images. The amount of images are NOT dynamic, so you will need to adjust the code according to the number of images you have. I have product.2zoom.xml.config. product.3zoom.xml.config, et all to meet my needs. It's easy to customize.
Benefits: You can put your swap images anywhere you want. Swap images are called independently of the main image and broken apart for maximum customization. You could even have a vertical swap image bar if you wanted - sweet.
As I stated, this is far from perfect, so if anyone knows how to work around the click issue, please share.
C#/VB.NET Code:
<!--This is the main image and the place where image swapping occurs-->
<a href="images/product/large/{ProductID}.jpg" class="MagicZoom" rel="zoom-id:zoom; zoom-width: 510px;zoom-height: 420px;" id="zoom" ><img src="images/product/medium/{ProductID}.jpg"/></a><br/>
<!--The swap images are here: image set with links. This will only work for jpg images items with no variants. -->
<!--Image Swap 1 Begin-->
<div align="center">
<a href="images/product/large/{ProductID}.jpg" rel="zoom-id:zoom; zoom-width: 510px;zoom-height: 420px;" rev="images/product/medium/{ProductID}.jpg">
<img src="images/product/micro/{ProductID}_1.jpg"/></a><!--! Notice, micro images don't have a trailing underscore-->
<!--Image Swap 1 End-->
Well I really appreciate all of the help. I have to say that I gave up. I turned the project over to the guys over to http://www.compunix.us. They had it done in no time! It looks great! They got all of the other pictures working with it also. The 2nd and 3rd pictures were the problem but these guys took care of it! Thanks again!
I have the same problem and have just sent an inquiry to Compunix. Just curious how much did they charge you? I kind of want to know what I am getting into. Thanks!