Zoom effect help


#1

Hello Hypers!

I would like to create a zoom in effect over photographs. I found this jquery plugin here (and the example in the link is exactly what I would like to achieve)
http://dynamicdrive.com/dynamicindex4/powerzoomer.htm

So I included Powerzoomer into the head html along with jquery library and put in this (as directed in web article) script on scene load:
$(#myimage).addpowerzoom();

You can see my start here - but its not working.
ZoomIn.hype.zip (2.9 MB)

Anyone have experience in this?
Thanks!


(Jonathan Deutsch) #2

Issue #1

There is an error in the developer console logs:

Error in undefined: TypeError: $ is not a function. (In '$('#myimage')', '$' is undefined)

jQuery is usually invoked by the ‘$’ variable, but in this case it is failing. This is because the ddpowerzoomer.js script is quite oddly calling jQuery.noConflict() which removes the ‘$’ to represent jQuery.

You can either remove this line, or you can change the powerZoom function to:

jQuery('#myimage').addpowerzoom();

Issue #2

This jquery plugin only works with <img> tags. Hype images are <div> tags with a background image set. To get around this, you’ll need to add the HTML for the <img> tag yourself. First you’ll also want to make sure the image is still in the resources library and not changing. Here are the steps:

  1. Select the “IMG_1751 copy.jpg” image in the Resources Library
  2. Uncheck Remove when no longer referenced and Automatically optimize when exporting checkbox
  3. Delete the current image element
  4. Add a new Rectangle element and remove the background and border
  5. Choose Edit > Edit Element’s Inner HTML and add the image tag:
    <img id="myimage" src="${resourcesFolderName}/IMG_1751%20copy.jpg" style="width:313px; height:400px">

Now it should work. Here’s the version I made:

ZoomIn-fixed.hype.zip (2.8 MB)


#3

Oh wow - perfect! Thanks @Jonathan!