OrangeBox: Upgrade Notes

OrangeBox3 focuses on creating valid markup using HTML5 specs. This is to ensure that OrangeBox operates correctly on all browsers new and old and on mobile devices. There are a few things you’ll have to make sure to do in order to upgrade from OrangeBox2 to OrangeBox3.

After looking over the following changes, be sure to read the API documentation to see what new options have been added or changed.


The rel attribute was used in OrangeBox2 (and many other lightbox plugins) to tell the link to open in OrangeBox. Unfortunately, this is not valid markup as it is using the rel attribute in an unintended way.

OrangeBox3 is now ready to use data-ob=”” instead. This produces valid HTML5 markup with identical results. There are however, still some cases where the rel attribute comes in handy. Therefore, while I encourage you to use the data-ob attribute, the rel attribute is still allowed.

width=, height=, and iframe=true

In OrangeBox3, I try to minimize the use of URL parameters as this gets extremely confusing when using iFrames.

  • To set a content’s width, use the data-ob_width attribute.
  • To set a content’s height, use the data-ob_height attribute.
  • To specify content to be opened in an iFrame, use the attribute data-ob_iframe=”true”.


In OrangeBox2, data-ob_share_link was used to specify the address to share via addThis. In OrangeBox3, this attribute is no longer used. OB3 now enables you to share a link which will open your page with the specified content displayed in OrangeBox.

ob_init Event

The ob_init event now triggers whenever content is displayed in OrangeBox. It also now includes a link attribute that contains the OrangeBox content URL. To check when OrangeBox is ready, you can now use .bind(oB_ready);


Captions are now displayed under the content rather than on top of the content. This allows for longer captions and allows captions to be shown with videos and other content.

Hidden Content Sets

Didn’t know why I didn’t think of this before. For hidden content sets, you no longer need to use an un-ordered list. Simply create a set of hyperlinks using the same lightbox gallery name. For all the links you want to hide, either set the CSS style display:none to the link or simply remove all content between the anchor’s opening and closing tags.


Unfortunately, QuickTime requires too much customization and additional JavaScript files for me to include it in OrangeBox3. To show QuickTime videos in OrangeBox, you can use inline content that includes the QuickTime embed code or use iFrames.

Deprecated Options

  • fadeCaption
  • orangeControls
  • contentMinHeight
  • contentMinWidth
  • iframeHeight
  • iframeWidth
  • inlineHeight
  • inlineWidth
  • maxImageHeight
  • maxImageWidth
  • maxVideoHeight
  • maxVideoWidth

The minimum and maximum width/height options have been replaced with a much easier to use set of sizing options. Read the API documentation to see the new options.

Leave a Reply

Your email address will not be published. Required fields are marked *