Open image in new tab

ann.jensen
Posts: 230
Joined: Wed Jun 17, 2015 10:19 am

Open image in new tab

Post by ann.jensen » Tue Oct 10, 2017 6:50 pm

Hi,
I have a large image displayed in one of my webhelp transformation topics. I would like to make this image clickable and open it in a new browser e.g.

Code: Select all

<a target="_blank" href="image.png">
<img class="image" src="image.png">
</a>
Is there a hook that would let me do this?
Thanks in advance,
Ann

bogdan_cercelaru
Posts: 211
Joined: Tue Jul 01, 2014 11:48 am

Re: Open image in new tab

Post by bogdan_cercelaru » Thu Oct 12, 2017 5:03 pm

Hello,

You could do this using a custom JavaScript file containing the following code:

Code: Select all


$(document).ready(function(){
$('img.image').click(function(){
window.open($(this)[0].src, '_blank')
});
});
This makes any image clickable. When you click an image, a new browser window containing the image is opened. To restrict this behavior only to some specific images, you could use the outputclass attribute in your DITA topic and then use this outputclass in your custom JavaScript.

Regards,
Bogdan
Bogdan Cercelaru
<oXygen/> XML Editor, Schema Editor and XSLT Editor/Debugger
http://www.oxygenxml.com

ann.jensen
Posts: 230
Joined: Wed Jun 17, 2015 10:19 am

Re: Open image in new tab

Post by ann.jensen » Thu Oct 12, 2017 5:06 pm

Hi,
I realised since that I could do what I wanted using xref e.g.

Code: Select all

<xref format="png" scope="external" href="add_tt_pflow.png"
><image href="add_tt_pflow.png" scalefit="yes"/></xref>
I had never xref'ed on an image before :-|

Regards,
Ann

Post Reply