Help Scout Automatic Image Zoom Lightbox
Help Scout is pretty decent for managing customer support and has a built in Documentation site feature which I’ve been using. It’s not the best docs system but it works nice enough.
They have a lightbox feature to show larger images on click but it isn’t enabled by default…
So here is a script that will enable it for all images (without a link) in all articles:
<script type="text/javascript">
// Help Scout Auto Light Box (https://blog.ryanhalliday.com/2022/07/helpscout-auto-lightbox.html)
function helpScoutAutoLightBox () {
document.querySelectorAll('img').forEach(function(img){
if (img.parentElement.tagName !== 'a' && img.parentElement.tagName !== 'A'){
var a = document.createElement('a')
a.href = img.src;
a.classList.add('lightbox');
img.parentNode.insertBefore(a, img);
a.appendChild(img);
} // If it is wrapped in an <a> tag we do not want to add lightbox, its an outgoing link.
})
}
document.addEventListener("DOMContentLoaded", helpScoutAutoLightBox);
</script>
Copy & paste this into your <head>
code on the Settings > Custom Code page.
Enjoy!
Fair warning: Doesn’t support Internet Explorer because its 2022 and IE is dead.