Image zoom broken for some images

Having trouble installing Oxygen XML WebHelp? Got a bug to report? Post it all here.
Katy
Posts: 6
Joined: Tue Mar 21, 2023 3:44 pm

Image zoom broken for some images

Post by Katy »

Hi, I've recently run into a problem with image zoom in WebHelp Responsive output. All of my images have scale attributes set on the tags, which until now has automatically generated the lightbox effect in the output.

Now this is broken for some images - including those on the same page. There is no obvious difference among the DITA tags, and I have not changed any parameters, CSS, or other settings that would affect this.

It does appear however that different output styles are being applied in the output, and I'm not sure why.

Examples:

This tag, which is working correctly...
<image placement="break" href="../path/to/image.png" scale="75" outputclass="custom-style"/>

...is showing this CSS rule from topic.css--
img.image.zoom:not(img[usemap]) {
cursor: pointer;
transition: .3s;
}

This image tag, which is basically the same (except for the image name) and on the same page, is not showing that the above rule is applied in the browser inspector--
<image placement="break" href="../path/to/image2.png" scale="75" outputclass="custom-style"/>

I'm not sure whether that is the applicable CSS rule, but it is the only difference I could find between the two. Any ideas/suggestions would be much appreciated.
Katy
Posts: 6
Joined: Tue Mar 21, 2023 3:44 pm

Re: Image zoom broken for some images

Post by Katy »

Just noting that I found a workaround for this by adding "zoom" to the outputclass in the DITA <image> tag. So: <image placement="break" href="../path/to/image.png" scale="75" outputclass="custom-style zoom"/>

I could be wrong, but my understanding is that "zoom" gets automatically applied to the <img> tag in the WebHelp output -- as long as you place a "scale" attribute on the DITA <image> tag -- and is not necessary for the DITA <image> tag outputclass. Not sure if this is a bug.
beniamin_savu
Posts: 31
Joined: Fri Jan 22, 2021 11:05 am

Re: Image zoom broken for some images

Post by beniamin_savu »

Hi,

We had a similar issue regarding the zoom widget not appearing for some images. We managed to fix the problem in our current development stream. The fix will become available in the next maintenance build. I will add your feedback on our internal issue tracker so we will notify this thread when the maintenance build is released.

Please let us know if the problem still persists when the maintenance will be released.

Best regards,
Beniamin Savu
Oxygen WebHelp Team
http://www.oxygenxml.com
Katy
Posts: 6
Joined: Tue Mar 21, 2023 3:44 pm

Re: Image zoom broken for some images

Post by Katy »

Thanks so much Beniamin! For now, adding a "zoom" outputclass in the DITA file has been a sufficient workaround. I'll keep an eye out for the next build.
beniamin_savu
Posts: 31
Joined: Fri Jan 22, 2021 11:05 am

Re: Image zoom broken for some images

Post by beniamin_savu »

Hi,

We wanted to let you know that we released a new maintenance build for Oxygen WebHelp 25.1 and it contains a fix for the problem you had with the zoom widget not appearing for some images.

Best regards,
Beniamin Savu
Oxygen WebHelp Team
http://www.oxygenxml.com
Naoki Hirai
Posts: 1
Joined: Fri Mar 01, 2024 10:31 am

Re: Image zoom broken for some images

Post by Naoki Hirai »

We met the same issue. Due to the specific reason, we are still using XML WebHelp V21.0.
In my understanding, the root cause of the issue is timing of the JavaScript loading completion. In the HTML generated by V21, external JavaScripts are loaded at the end of the HTML file as shown bellow:

Code: Select all

		<script type="text/javascript"
		        src="./oxygen-webhelp/app/webhelp_responsive_common_kbt.js?buildId=2019072400">
			<!---->
		</script>
		<script type="text/javascript"
		        src="./oxygen-webhelp/app/webhelp_responsive_topic_kbt.js?buildId=2019072400">
			<!---->
		</script>
		<script data-main="./oxygen-webhelp/app/topic-page.js"
		        src="./oxygen-webhelp/lib/requirejs/require.js"/>
	</body>
</html>
On other hand, V26 generates following HTML in order to load the external JavaScript codes.

Code: Select all

		<script defer="defer"
		        src="./oxygen-webhelp/app/commons.js?buildId=2024012323"/>
		<script defer="defer"
		        src="./oxygen-webhelp/app/topic.js?buildId=2024012323"/>
		<link rel="stylesheet"
		      type="text/css"
		      href="oxygen-webhelp/template/oxygen.css?buildId=2024012323"/>
		<link rel="stylesheet"
		      type="text/css"
		      href="oxygen-webhelp/template/notes.css?buildId=2024012323"/>
	</head>
I think that it's possible to resolve the issue with V21 by moving the JavaScript loading location and specify 'defer' as same as V26 WebHelp output.

Am I correct?

Thank you in advance for any advices.
Naoki Hirai
Costin
Posts: 829
Joined: Mon Dec 05, 2011 6:04 pm

Re: Image zoom broken for some images

Post by Costin »

Hi Naoki,

As there were many versions released inbetween v21 and v26 and a lot of changes were implemented the WebHelp implementation with each newer version (if you would need a list of which specific changes were implemented between those versions, you could write us on our official technical support email - support@oxygenxml.com), unfortunately we could not tell for sure if the fix in v26 would suffice to make that work also in the old version 21.

As you may already be aware of, the version 21 reached End-Of-Life back in 2021, so we no longer officially support it. That's why we recommend keeping WebHelp up-to-date and always using the latest version of the software.

Regards,
Costin
Costin Sandoi
oXygen XML Editor and Author Support
Post Reply