Forums

Articles
Create
cancel
Showing results for 
Search instead for 
Did you mean: 

How to disable lightbox image effect in Confluence

Adolfo Casari
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 19, 2012

I would like to disable lightbox effect for images in pages (that is, avoid the popup window that display the image in full size when you click on the image on the page).

Is there a way to do this via javascript or in a configuration file?

Thank you,

2 answers

1 vote
William Yeack
Contributor
December 5, 2018

This is what I did - add this to the "At end of the BODY" section of your "Custom HTML" admin page:

<script>

// Removes Lightbox
$(".confluence-embedded-image").removeClass("confluence-embedded-image");

</script>

This will remove the class from the confluence image that is required for the lightbox to work.

0 votes
Matthew J. Horn
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 19, 2012

If you figure it out, let me know. In the mean time, you can "trick" users into not realizing that it's clickable by adding something like the following to your custom stylesheet:

.confluence-embedded-image {  
  cursor: default !important;  
}

Basically, it prevents the cursor from turning into a "hand" when a user hovers over an image. That way, they don't know it's clickable.

Adolfo Casari
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 20, 2012

Thank you Matt, that helps.

Adolfo Casari
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 22, 2012

This will unbind the click from the image:

&lt;script type="text/javascript"&gt;
  
 AJS.toInit(function() {
 // unbind directly-embedded images
 AJS.$("img.confluence-embedded-image").unbind("click.fb");
 });
 &lt;/script&gt;

Add this to Custom HTML (body section).

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events