Thread: magic zoom

Im trying to integrate magic zoom http://www.magictoolbox.com/magiczoom/
intot my aspdotnetstorefront site.

I've added the js file and cs file as instructed on magic zoom but i cant get it working.

Ive examined the image link in firebug and the clas is set to "magiczoom"....
so not sure whats wrong...

any ideas? thanks.

What version are you using? 7.0.2.5+ has Zoomify support already built in - http://manual.aspdotnetstorefront.co...q_zoomify.ashx

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

Code:

<link rel="stylesheet" href="skins/Skin_(!SKINID!)/MagicZoom.css" type="text/css" media="screen" />
<script src="jscripts/mz-packed.js" type="text/javascript"></script>

in the head tags. You can verify that it's working properly by adding the ktm_big.jpg and the ktm_small.jpg to the images directory and then adding

Code:

<a href="images/ktm_big.jpg" class="MagicZoom">
  <img src="images/ktm_small.jpg"/>
</a>

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.

Hey everyone,

We are the makers of Magic Zoom.

The best way to get help adding Magic Zoom to your website is to contact us:

http://www.magictoolbox.com/contact/

Thanks

Magic Toolbox

I was wondering if anyone has been successful in implementing George's method of adding Magic Zoom to the shopping cart without the source code?

I've read the suggested thread on creating custom extension functions, but I think that's going to be a little complicated for me.

If anyone has already done it, would you mind sharing the code you implemented?

I appreciate any help I receive in advance!

Regards,
Bradley

I was just wondering if anyone has been successful in implementing George's suggested method of installing Magic Zoom on ML8 without the source?

I've read through the thread about creating "custom extension functions," but it seems a bit advanced for me.

If anyone has done it and would be willing to share how (the code), I would really appreciate it.


Thanks in advance for any help I receive,

Bradley

Not sure if I've seen anyone go the extension function route yet, but I should be able to put together a working example over the next day or so

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.

Interested? Please contact us!

Thanks,

Magic Toolbox

George,

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.

Thanks

i also have magic zoom so definitely interested to see if this is doable. thank you.

best regard,s
edwin

Hi George,

Have you managed to find a solution for this yet for people without the sourcecode?

Thanks
Keith

Does anyone have the code to do this without the source code? I would love to have this for the site.

Sure...here are the steps I took to make this work without modifying source code.

1. Downloaded the trial version of Magic Zoom from their site
2. Extracted the files then placed the magiczoom.css file in the skins/skin_#/ directory and the magiczoom.js file in the jscripts directory
3. 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();
       }
   }

4. 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>

5. 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
   Code:

   <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:aspdnsf="urn:aspdnsf" xmlns:custom="urn:custom" exclude-result-prefixes="aspdnsf custom">

   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
   Code:

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

   and you end up with something like the below image with no source code mods

Hi All,

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.

Regards
Nagesh

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?

What if you have multiple images on the product? How do I get those to pull up and the magic zoom also work with them?

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!

OK, I managed to get a single image working with Magic Zoom. It's really easy too and works well.

If you have a template for product pages, add the CSS and JS links into the template page.

next, copy the product.simple.xml.config or whatever package you want to use.

Replace the default image call function with the code below

C#/VB.NET Code:

<a href="images/product/large/{ProductID}.jpg" id="zoom" rel="zoom-position: custom; zoom-width: 510px; zoom-height:420px;" class="MagicZoom">
<img src="images/product/medium/{ProductID}.jpg"/></a>
<div id="zoom-big" style="position: relative; left: 350px; top: -365px;"></div> 


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-->

<!--Image Swap 2 Begin-->
<a href="images/product/large/{ProductID}_2_.jpg" rel="zoom-id: zoom; zoom-width: 510px;zoom-height: 420px;" rev="images/product/medium/{ProductID}_2_.jpg">
<img src="images/product/micro/{ProductID}_2.jpg"/></a>
<!--Image Swap 2 End-->

<!--Image Swap 3 Begin-->
<a href="images/product/large/{ProductID}_3_.jpg" rel="zoom-id: zoom; zoom-width: 510px;zoom-height: 420px;" rev="images/product/medium/{ProductID}_3_.jpg">
<img src="images/product/micro/{ProductID}_3.jpg"/></a>
<!--Image Swap 3 End-->

</div> 


Originally Posted by dragon

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!

just to make sure... you're adding the js css in the head.

hello everyone ... I am using jquery cloud zoom (http://www.professorcloud.com/mainsite/cloud-zoom.htm) works well with an image but when the product has multiple images only shows the first image with the zoom.