How do I get this zoom script to work properly?

Using JavaScript with Hype
1

Hi guys! I have a quick question:
I’m in need of a good zoom function like the one that I have in my project file. However, since I have tons of images that will be loaded into one div I am using a javascript which calls the images to load with a simple button. My problem is that I am not getting the zoom to work with this javascript. It works when I load the image into the div from the beginning, but when I load the image afterwards, the zoom ends up doing nothing. I know this is using external javascript but it would be so cool if you could take a look at it. I’ve made a simple demonstration project for you.

The image to the left (number 1) is working as it should be. The image to the right (number 2) is what I want to work. The button below it will load the image from the javascript.

Any idea?

Project file: working_zoom.hype.zip (208.8 KB)

Link to the javascript manual: http://www.jacklmoore.com/zoom/

Many thanks for any help!

Best regards
Bjerre

Markus Bjerre

2

Hi Markus, I think it may have something to do with the innerHTML on the second “div”. The first “div” has…

src="${resourcesFolderName}/image1.jpg"

and the second "div’ has nothing between the quotes…

src=""

Maybe you can write [ ${resourcesFolderName}/image2.jpg ] to the innerHTML of the second “div” somehow

Also, I don’t see where you are calling for the “zooming2()” script.

1 Like
3

Hey Greg and thank you for taking time to take a look at the project file! The reason why the second div’s img source is blank is because I don’t want it to preload the image. What I want is the javascript called “showimg2” to load the image instead. It works fine with the button that I have included (even if it’s zoomed in a little bit since the image is bigger than the div, easy fix though with style.backgroundSize). However, if I get the zoom to work AFTER the loading of the image (showImg2), I can easily replace the image in the div with another one and still have the zoom function going on.

My real project is a lot bigger and includes over 30 images linked to a related thumbnail. The div will work like a holder for each thumbnail and it works perfectly with javascript. So the question still remains. How do I get the zoom to work with the javascript that I’m using, or is there any better way to do it? The best way I believe would be that I have a white placeholder and in some way replace the content within the div and still get the zoom working properly. Don’t know how to do that though.

Thanks again Greg for taking your time!

4

Solved it after a couple of hours by testing different solutions:
Used this code on trigger the button:

var imagePath = hypeDocument.resourcesFolderURL() + "/image2.png";

hypeDocument.getElementById('imageHolder').src = imagePath;

$(document).ready(function(){
			
			$('#contentImage').zoom({ on:'click'});			
		});	

-------------------------------

And this code I used on the div id called #contentImage:

<div>
<img id="imageHolder">
</div>
------------------------------

Any idea on how to make a variable out of the image number “2”?

5

I’m a little unclear on what you mean by making it a variable, but you could probably do something where you have buttons which have unique element ids. Then when those buttons are clicked, you could use the id (say image2, image3, etc.) to place as the .src value.

6

Hi Jonathan! If I remember correctly what I wanted is the number in image#.png to be a variable on the top of the code, so I could easily replace the image with var number = 3;

The code would look similar to this:

var number = 3;
var imagePath = hypeDocument.resourcesFolderURL() + "/image" + number + ".png";

I’m not sure how to do it properly though with quotation marks etc.

7

your code looks good to me; why don’t you try it and see if it works? If there’s a syntax error, you’ll at least get some information in the Developer console.