the width and height of #image-zoom is 0px

[PapaMadeleine2022]

hello, I like your this code. But the width and height of #image-zoom is 0px when I apply your code in my project. I do not know where in your code the setting of height and width of the image is at the beginning. Can you give some advises?
thank you very much!

[PapaMadeleine2022]

I have found it.

[craigfrancis]

Just for the record, it should pick up the image width/height automatically, and store those values in img_original_width and img_original_height (the image size will then change when it zooms in/out).

This is done in the init() function, that happens on the window load event (i.e. after the image has loaded).

[PapaMadeleine2022]

@craigfrancis thanks. now I have another problem. after I set the width more than 800px for #image-zoom-wraper, the value of the "left" attribution for #image-zoom is large at the begin so that the image is on the right. So how to solve this problem when I set the width of #image-zoom-wraper much larger than 800px.

[craigfrancis]

You might need to upload a Demo somewhere so we can debug... but it will set a left value larger than 0 when the image is smaller that the zoom wrapper (so the image is centre aligned).

[PapaMadeleine2022]

@craigfrancis see reporitory. In this reporitory, I add another function which can enlarge an image. Then you can zoom and drag the enlarged image in the new window. but how to adjust the left and top attribution to let the image be in the middle of the new window.

[PapaMadeleine2022]

@craigfrancis how to still make the image in the middle at the beginning when using #image-zoom-wrapper and origin image with different size.

[craigfrancis]

First, have a look at ".image-zoom-modal-content" in "img-enlarge.css".

The image shouldn't be set to display: block (this is effecting the centre aligning), the margin: auto isn't needed either, likewise with the width and height (where the width ends in an invalid semi-colon)... so you can remove that whole class:

.image-zoom-modal-content {
}

Second, have a look at "#image-zoom-wrapper" in "zoomify.css"... The height isn't being set to 100%, as you need to end the line with a semi-colon :-)

---

Some extra tips:

When you get to the last zoom level, there is a flicker (goes very dark). In my original example this would have been a white flash, to indicate that you can't zoom any further, but because you are on a dark background, it doesn't work as well. To disable or change this, the code you need is on line 156 of zoomify.js:

div_ref.style.opacity = 0.5;
setTimeout(function() {div_ref.style.opacity = 1;}, 150);

With your "img-enlarge", the width/height attributes shouldn't include "px".

It would also be a good idea to convert "img-enlarge" to an input (button/link), so anyone who uses a keyboard can at least tab to, and use it:

<input type="image" id="img-enlarge" width="800" height="600" src="./index.jpg" />

Ideally it would be given a role of button, so anyone using assistive tech (e.g. screen readers) will know that it does something (but I'll leave that for another day, as we are starting to get into ARIA).

You seem to be including all of jQuery just to add a single click event... maybe you could remove jQuery, and change the $("#img-enlarge").click to:

var sourceImg = document.getElementById("img-enlarge");
if (sourceImg) {
	sourceImg.addEventListener('click', function(e) {
			modal.style.display = 'block';
			modalImg.setAttribute('src', this.getAttribute('src'));
			captionText.textContent = this.getAttribute('alt');
			init();
			e.preventDefault();
		});
}

If you don't remove jQuery though, please change the async property to defer on zoomify.js, because you can't guarantee that jQuery would have loaded in time (actually, I suspect this will break the zoomify feature for anyone who is new to your website, as jQuery won't be cached, and will load quite a bit after it's needed, resulting in an error).

Also, in your example you used captionText.innerHTML... considering the text content is coming from somewhere else (i.e. you can't trust it to be safe), I'd suggest using captionText.textContent, otherwise you might have a security problem on your hands (ideally you would never use innerHTML).

And with your close link... you might want to turn that into a link/button as well, for the same reasons above (keyboard access)... and you can remove the "onclick" attribute from the HTML, as JavaScript in the HTML does cause problems (e.g. it makes it much harder to implement a good Content Security Policy).

---

Hope that helps :-)

[PapaMadeleine2022]

@craigfrancis thank you very much for your detailed reply. I am very grateful!
I remove the css definition of .image-zoom-modal-content and modify the zoomify.js as you said above. But now when I change a more large image '0.Png' about 15M size rather than the 'imdex.jpg'. I found the top attribution is very large so that I can not see the image in the pop-up new window at the beginning when I click the original image. Can you give some advises?
looking forward to your reply.

[craigfrancis]

I can't see any changes in your repo, but I'd suggest looking in the init() function to see what div_half_height and img_original_height get set to.

---

For example;

If the img_original_width was 5000, and the img_original_height was 9000.

And the div_half_width was 1000, and the div_half_height was 900... or as you would measure it, the div is 2000px wide and 1800px high.

Then you should get the zoom_levels:

• 890
• 1187
• 1582
• 2109
• 2813
• 3750
• 5000 (aka the natural size)
• 8750 (aka the over-zoom level)

The JavaScript would then automatically select the smallest zoom level (0, at 890px wide).

It does this to show the image in full, when it first loads... where 890px is the zoom level (as a width) where that image can be displayed in full.

It must use one of the defined zoom levels so it looks consistent when the user starts to zooming in; where each zoom level is 0.75 the size of the previous zoom level.

The left/top values for this image (when it first loads) is worked out with:

new_height = ((img_original_height / img_original_width) * new_width);

img_current_left = (div_half_width - (new_width  / 2));
img_current_top  = (div_half_height - (new_height / 2));

Or with our example:

new_height = ((9000 / 5000) * 890);

img_current_left = (1000 - (890  / 2));
img_current_top  = (900 - (1602 / 2));

So the image has its img_ref.style.left set to 555 (px), and its img_ref.style.top set to 99 (px)

And to complete the maths...

The image is now 890px wide, so we have 890+555(left)+555(right) = 2000
The image is now 1602px high, so we have 1602+99(top)+99(bottom) = 1800

[PapaMadeleine2022]

@craigfrancis thanks for your reply. I am so sorry that I forgot to push the modification for my repository. Now it is updated.
When I carefully see and debug the function init() I find the reason. My screen resolution is 1920x1080. and the new image 0.Png resolution is 5091X3549. I remove the height attribution of the #image-zoom-wrapper as you said above(you said The height isn't being set to 100%, here maybe I misunderstand your meaning and remove the height attribution rather than setting other values ). Then the div_half_height is 3550px after I click the original image, which leads to the top attribution is very large so that finally I can not see the image in the new window. So I add again the height attribution as height:90%;. Now the image is in the middle in the new window after I click the image and everything is OK. It is wonderful! Thanks again for your help~

[craigfrancis]

Thanks for the update, and hope the script works well for you.

[PapaMadeleine2022]

@craigfrancis thank you. Good luck