MagicToolBox forum
May 17, 2012, 02:31:36 am *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Welcome to the Magic Toolbox forum!
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Magic Zoom and spry  (Read 2887 times)
fritz
Newbie
*
Posts: 7


View Profile
« on: October 22, 2009, 02:30:07 pm »

Hi,
I like your product very much. I have downloaded a trial version to see how easy it is to integrate and if i can use it in a spry page.
I got i t working fine with hard coded image location paths.
But when I integrated it  in my spry page, it did not work with the spry markup.

Is there a way I can get it to work with a spry page?
Thanks in advance

Fritz
Logged
oleksiy
Administrator
Hero Member
*****
Posts: 1886


MagicToolBox CEO


View Profile
« Reply #1 on: October 22, 2009, 02:50:18 pm »

Hi Fritz,

Magic Zoom is a Javascript tool and it doesn't matter how your page was generated on the server.

Please send us a link to your page and we will tell you why image paths are not working.
Logged
fritz
Newbie
*
Posts: 7


View Profile
« Reply #2 on: October 22, 2009, 03:46:55 pm »

Hi Oleksiy,
Thank you for your speedy reply.
I just created a simple page localy, to test the zoom with spry.
The image is displayed correctly but no zoom.

When I replace the filename part of the path  in the href and the image.src with the actualy file name, the zoom works fine.

The page looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="mz-packed.js" type="text/javascript"></script>
<link href="MagicZoom.css" rel="stylesheet" type="text/css" media="screen"/>

<script type="text/javascript">
var dsItems = new Spry.Data.XMLDataSet("XML/xml_produkten.php", "export/Items[ItemID=1]");
var dsItemimages = new Spry.Data.XMLDataSet("XML/xml_item_images.php?itemID=1", "export/img", {sortOnLoad: "Volgorde", sortOrderOnLoad: "ascending"});
</script>
</head>

<body>
<div spry:region="dsItemimages">
<a href="prdImages/{dsItemimages::Hires}" class="MagicZoom" title="Flecks"><img src="prdImages/{dsItemimages::lowres}" name="ItemImage"  id="ItemImage"  border="0" title="Flecks. nl"/></a>
</div>
</body>
</html>

I am looking forward to your reply.

Thanks again
Fritz
Logged
oleksiy
Administrator
Hero Member
*****
Posts: 1886


MagicToolBox CEO


View Profile
« Reply #3 on: October 22, 2009, 03:52:43 pm »

Hi Fritz,

There can be only one reason, the generated link for the big image (href) is incorrect.
Try removing references to mz-packed.js and MagicZoom.css files from the HEAD and remove Magic Zoom class from the link. Reload your page. Then just click on the image in browser. This should open larger version of the image in the browser. If that doesn't work - than the link href is incorrect.

Can you please compare the source of generated HTML page with the one that works fine?
Logged
fritz
Newbie
*
Posts: 7


View Profile
« Reply #4 on: October 22, 2009, 04:34:14 pm »

Oleksiy,
I already tried without the zoom references and the images get displayed correctly. The larger images in the Href gets displayed in the the browser just as you said. both images reside in the same directory.

Even with the zoom references the images get displayed  the href link to the larger image too, when the image is clicked, but no zoom.

Only when i remove the  spry reference in the surrounding <DIV>  and use the actual file names, it  works like a charm like this:

<div>
<a href="prdImages/1167a_2.jpg" class="MagicZoom" title="Flecks"><img src="prdImages/1167a.jpg" alt="Flecks" name="ItemImage"  id="ItemImage"  border="0" title="Flecks"/></a>
</div>

But with spry I need it to work like this:

<div spry:region="dsItemimages">
<a href="CMS/prdImages/{dsItemimages::Hires}" class="MagicZoom" title="Flecks"><img src="CMS/prdImages/{dsItemimages::Lowres}" alt="Flecks" name="ItemImage"  id="ItemImage"  border="0" title="Flecks"/></a>
</div>

I appreciate your help Oleksiy.

Fritz
Logged
oleksiy
Administrator
Hero Member
*****
Posts: 1886


MagicToolBox CEO


View Profile
« Reply #5 on: October 22, 2009, 04:38:28 pm »

Is there any way you can upload your page somewhere on the server? We wont be able to find the problem otherwise..
Logged
fritz
Newbie
*
Posts: 7


View Profile
« Reply #6 on: October 22, 2009, 05:02:42 pm »

I would appreciate it if you can take a closer look, I will upload the files and post the link, it will take a while because i will also need to define the tables in the database . But it is worth a try. I will let you know shortly.

Thank in advance

Fritz.
Logged
oleksiy
Administrator
Hero Member
*****
Posts: 1886


MagicToolBox CEO


View Profile
« Reply #7 on: October 22, 2009, 05:06:04 pm »

Btw you are using outdated version of Magic Zoom. New version was released two months ago and it has much more features. You can download the demo from our website. mz-packed.js file was renamed to magiczoom.js and MagicZoom.css to magiczoom.css (lowercase)
Logged
fritz
Newbie
*
Posts: 7


View Profile
« Reply #8 on: October 22, 2009, 06:05:20 pm »

Hi oleksiy ,
I will download the latest version, replace the zoom files and keep you posted.

Meanwhile you can see the problem here:
http://www.blue-circles.com/zoomtest/zoomtest.php

Thanks

Fritz.



oleksiy
Logged
fritz
Newbie
*
Posts: 7


View Profile
« Reply #9 on: October 22, 2009, 06:23:30 pm »

I have replaced the files with the latest version, but still no luck.
Logged
oleksiy
Administrator
Hero Member
*****
Posts: 1886


MagicToolBox CEO


View Profile
« Reply #10 on: October 22, 2009, 07:02:03 pm »

Now I see.. Magic Zoom initializes before Spry and of course links as "prdImages/{dsItemimages::Hires}"  are not valid.There are two solutions here (but please use the latest magiczoom version)

try this:

<script type="text/javascript">
var dsItemimages = new Spry.Data.XMLDataSet("XML/xml_item_images.php?itemID=11", "export/img");
MagicZoom.refresh();
</script>

Or better, remove class="MagicZoom" initially (from page source) and then add it to <A> tags after calling Spry.Data method and then call MagicZoom.refresh()
Logged
fritz
Newbie
*
Posts: 7


View Profile
« Reply #11 on: October 22, 2009, 08:38:33 pm »

Hi Oleksiy,
Thanks a lot. With your help I got it to work now.

You where right on the spot, indeed the zoom was ready before the spry region.

I added an observer to the region, so after it finished rendering (updating), i add the zoom class and do the zoom refresh, now it works perfectly. learning all the time, right...? I guess you guys now got your self yet another customer..., me  Smiley.
I thank you very much.

Fritz.

ps. for future reference, this is how the page looks now:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="magiczoom.js" type="text/javascript"></script>
<link href="magiczoom.css" rel="stylesheet" type="text/css" media="screen"/>

<script type="text/javascript">
var dsItemimages = new Spry.Data.XMLDataSet("XML/xml_item_images.php?itemID=11", "export/img");

var observer = { onPostUpdate: function(notifier, data) {
   Spry.Utils.addClassName('zoomref','MagicZoom');
   MagicZoom.refresh(); } };
Spry.Data.Region.addObserver("imgRegion", observer);

</script>

</head>

<body>
<div id="imgRegion" spry:region="dsItemimages">
<a href="prdImages/{dsItemimages::Hires}"  title="Flecks" id="zoomref"><img src="prdImages/{dsItemimages::Afbeelding}" alt="Flecks" name="ItemImage"  id="ItemImage"  border="0" title="Flecks"/></a>
</div>
</body>
</html>




Logged
oleksiy
Administrator
Hero Member
*****
Posts: 1886


MagicToolBox CEO


View Profile
« Reply #12 on: October 23, 2009, 04:32:51 am »

Hi Fritz,

Yeah, nice one! Thank you for your example too!
Logged
HelenJames
Newbie
*
Posts: 3


View Profile
« Reply #13 on: July 30, 2010, 05:15:21 pm »

Something alike was discussed on the ask.com,i can give someone a link if anybody need it
Logged
Pages: [1]
  Print  
 
Jump to:  

MagicZoom™ | Magic Zoom Plus™ | Magic Scroll™ | Magic 360™ | Magic Slideshow™ | Magic Touch™ | Magic Thumb™ | Magic Magnify Plus™
Powered by SMF 1.1.11 | SMF © 2006-2009, Simple Machines LLC