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)
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:
Select the “IMG_1751 copy.jpg” image in the Resources Library
Uncheck Remove when no longer referenced and Automatically optimize when exporting checkbox
Delete the current image element
Add a new Rectangle element and remove the background and border
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">
HI @Jonathan, So we implemented the zoom tool from above into a project and found that the zoom script is stopping jquery from working. Also, doesn’t work when set to scale 100% width and height. See this file where the colored buttons don’t do anything on click (they use jquery show / hide) as they are supposed to, and zoom doesn’t work as well when window size is changed.
Any ideas or other jquery zoom plugins that anyone else has used successfully?
See “issue 1” from my above post about jquery - it is working but the zoom script messes with the $ variable so you have to use jQuery explicitly. Thus the line in ShowPopup() would become:
jQuery("#Popup").show();
However I don’t think this will do what you want, since the element you gave a unique ID of “Popup” is already being shown.
As far as not working with scale width/height, this is probably just a limitation of the library. Hype is using CSS’s transform scale for the element when you have “zoom contents” turned on. You can disable this and use flexible layout options on all the children elements and you’d need to change the image in the inner html to width/height of 100%, but then I can’t get the zoomer tool to work with that either. I’m not sure if the tool has a fix for this. Perhaps the docs would say or you can try contacting the developer.
@Jonathan thanks - that fixes it. Unfortunately we have already coded a very large project and changing every $ to jQuery is going to be a large task.
So I search some more and found a jquery plugin here: http://www.elevateweb.co.uk/image-zoom I tried it and I can see it working but the zoom is off on the side or behind the image itself - you have to resize the window a little to see it on the edges. Very odd behavior and even after I change the configurations to many different settings I can’t seem to get the zoom to be over the original image.