Page 1 of 1
Open image in new tab
Posted: Tue Oct 10, 2017 6:50 pm
by ann.jensen
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
Re: Open image in new tab
Posted: Thu Oct 12, 2017 5:03 pm
by bogdan_cercelaru
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
Re: Open image in new tab
Posted: Thu Oct 12, 2017 5:06 pm
by ann.jensen
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