Preloading images in MagicZoomPlus

[Lars]

Hello Magic Toolbox Team,

We've bought your license for MagicZoomPlus and generally we are happy with your product.

But we are facing severe performance related issues on the page where we embedded MagicZoomPlus.  Currently our assumption is that this is caused by the fact, that MagicZoomPlus loads all "big images" of the multiple images at page load time. We would like to lazy load the big images on demand, to reduce network traffic.

If i understand http://forum.magictoolbox.com/index.php/topic,1119.msg4966.html#msg4966 correct, MagicZoomPlus is not capable to be customized with the "preload-selectors-big" option. Is my understanding correct?

And if it is, the post mentioned implementing some Update() method on our own. Are there any guides what exactly has to be done here?

[jt-zoovy]

I'm having the same issue.  I contacted support and they provided me with some code which got me 90% of the way there.  Here's what I've got:

http://pub1.san.zoovy.net/~indianic/jt/mzp_nopreload.html

The issue that i have now is that when I click on the small thumbnail, it doesn't magicThumb itself.  I've tried adding the following code to one of the href on the last of the thumbnails, but it doesn't seem to do the trick.

onclick="MagicThumb.expand(this.id);"  id='bob' name='bob'

Can anyone help me take this one step further?

thanks,

JT

[jt-zoovy]

If anyone is interested, I got this to work the way I wanted.  none of the big images preload and, on click, the smaller thumbnails will open using magicthumb.

http://pub1.san.zoovy.net/~indianic/jt/mzp_nopreload.html

Hope this helps.

JT

[Alex]

Hi there,

We have sorted it out via email.

Just in case, here is a guide how to use MagicZoomPlus.update method to implement pre-loading:

1. Define a main image as you did before:

Code:

    <a href="main-image-large.jpg" id="zoom-1" class="MagicZoomPlus"><img src="main-image-small.jpg" /></a>

2. Set up additional images as usual, but instead of linking them to the main image with zoom-id option call the MagicZoomPlus.update method from the onclick:

Code:

    <a href="add-image1-large.jpg" rev="add-image1-small.jpg" onclick="MagicZoomPlus.update('zoom-1',this.href,this.rev);"><img src="add-image1-thumb.jpg" /></a>
    <a href="add-image2-large.jpg" rev="add-image2-small.jpg" onclick="MagicZoomPlus.update('zoom-1',this.href,this.rev);"><img src="add-image2-thumb.jpg" /></a>

That's it!

All the best,

Alex

[Alex]

Great! Well done, JT!

Thanks for posting this.

Alex

[jt-zoovy]

I found a small flaw in this.  If you mouse over the last image in the example I have, then click the medium size image, the original medium image opens up, not the new medium image.  Any thoughts on how to fix this?

http://pub1.san.zoovy.net/~indianic/jt/mzp_nopreload.html

Thanks,

JT

[Alex]

Hi JT,

Sorry for the late reply.

That happens due you set this option:

Code:

  MagicThumb.options = {'click-to-initialize':'true'}

Please remove it. If you want to enable click-to-initialize option for the last image with class="MagicThumb", please put that parameter in the REL attribute, e.g.

Code:

  rel="click-to-initialize: true"

All the best,

Alex

[jt-zoovy]

Thanks Alex!  That works perfectly now.

JT