I have an image that opens in a a lightbox (Colorbox is the script). When the image opens I added a CSS3 Animation. Works great but at first the lightbox has scrollbars which disappear once the animation is complete.

How do I prevent the lightbox from showing scrollbars at all?

Code:

#start{
  /* Width and Height of the Image */
  width:526px;
  height:450px;
}

<div class="hide">
<div id="start">
 <img src="/Images/designs/start-large.jpg" class="animated rollIn"> 
</div>
</div>

I have an image that opens in a a lightbox (Colorbox is the script). When the image opens I added a CSS3 Animation. Works great but at first the lightbox has scrollbars which disappear once the animation is complete.

How do I prevent the lightbox from showing scrollbars at all?

Code:

#start{
  /* Width and Height of the Image */
  width:526px;
  height:450px;
}

<div class="hide">
<div id="start">
 <img src="/Images/designs/start-large.jpg" class="animated rollIn"> 
</div>
</div>

• javascript
• jquery
• css
• colorbox
• css-transitions

5 Answers 5

Set the colorbox setting scrolling to false to disable scrollbars on content.

#cboxLoadedContent{overflow:hidden !important;}

This is working for me.

You can use colorbox.resize() to automatic calculate its size or use overflow hidden to the parents of your content.
Both ways works.

You could try to add overflow:hidden; to your CSS style of the div / img. Or try overflow:visible; if it cuts off something.

Add scrolling: false

$.colorbox({
  inline:true, 
  width:'95%',
  scrolling: false // *********
});