OrangeBox3: What’s New in 3.0.0

Posted on Posted in OrangeBox

OrangeBox3 is now days away from release. I have been working on OB3 for the past year to get it ready for release. The main issues I wanted to address were valid HTML markup and cross browser compatibility. There were a handful of feature requests and many bug fixes that went in to OrangeBox3 to make it what it is. Check out the new features below:

data-ob Attribute

OrangeBox2 used the HTML5 data attributes sporadically. OrangeBox3 now leverages this attribute in a couple new ways to allow your code to validate correctly.

  1. Most importantly is the data-ob attribute. This replaces the rel attribute for looking up content that should be opened in OrangeBox. The rel attribute was initially used because a large number of other lightbox plugins followed the same technique. While OrangeBox3 will still look at the rel attribute, in general, you should now use the data-ob=”lightbox” attribute.
  2. data-ob_width and data-ob_height now replace the URL parameters used previously. Instead of adding ?width=190&height=200, you should add the data-ob_width=”190″ and the data-ob_height=”200″ attributes to your link. This should clear up some confusion about how to set the content’s width and height.
  3. data-ob_iframe=”true” is now used to indicate that the content should be shown in an iFrame. Previously the URL parameter on the href was used but this caused errors in some web pages opened in the OrangeBox iFrame.

Content Links

OrangeBox2 introduced AddThis support but unfortunately, there was no way to link to the actual content being shown. OrangeBox3 uses a URL parameter to “search” through all of lightbox links on your page. It then opens your page with the content shown in OrangeBox. Brilliant!

How To:

  • OrangeBox builds the link automatically using a search term that has the best match for your content
  • To see the link, you can either set OrangeBox3’s logging functionality to debug and see the link in your console, or bind to the ob_init event
  • AddThis will automatically use the link and share it with Social Media applications like Facebook and Twitter
  • Don’t see the link? Some content including content that is generated dynamically will not have a link. OrangeBox can only search for elements that exist on your page when it initializes

Photo Streams

In OrangeBox3, you can link to a Flickr or Picasa RSS feed allowing you to stream images from these services into an OrangeBox slideshow! OrangeBox defaults to streaming 10 items, but this can be set in OrangeBox options.

How To:

  • Look for RSS links throughout Flickr and Picasa, copy the link and add it to an anchor on your page
  • Make sure to add the data-ob=”lightbox” attribute to the anchor
  • It’s that simple, OrangeBox will do the rest. The single link will open a gallery of 10 images with navigation
  • You can change the number of items that are streamed in OrangeBox options

Image Maps

OrangeBox3 now supports Image Maps. You can create a map and add areas to it that link to content opened in OrangeBox. Simply add the data-ob=”lightbox” attribute to the area.

PDF Support

OrangeBox3 uses Google’s iFrame PDF viewer to display PDFs in OrangeBox. Just link to a PDF and add the data-ob=”lightbox” attribute.

Image Zooming

OrangeBox has always re-sized your content so it fits on the viewers screen. Now, if an image is re-sized, the viewer can click on the image to see it in a full browser size.

Inline Content Handling

Now OrangeBox will automatically figure out what height it should be for your inline content, no more guessing and no more struggling with different browsers. It also now appends your inline content instead of duplicating it to avoid problems with duplicate IDs.

Dynamic Content Creation

In OrangeBox3, you can now dynamically create content in OrangeBox using the createCustom(content, options) method. This allows you to show dynamic content on the fly without having to build a link. You can read more about how it is done in the methods section of the API.

iFrame Handling

In previous releases, there were many issues with audio and video still playing after OrangeBox closed. The iFrame supporting this content is now correctly closed to avoid this issue.

Better Height and Width Option Handling

OrangeBox3 now uses value pairs to specify your content’s maximum and minimum size and the video aspect. No more setting options for different types of content to handle the size of OrangeBox.


OrangeBox3 now has logging with different levels: off, on and debug. When logging is on, you will see errors in the console when OrangeBox cannot show certain content. If you set logging to debug, you will see all the events that happen in OrangeBox as well as information about the href and content link. You can turn logging on in the OrangeBox options.

Set Search Term

OrangeBox2 was hard coded to use “lightbox” as the search term. Now you can set the search term to be anything you like. You can set the search term in the OrangeBox options.

Alias Checking

Previously, if you had multiple sets of identical content in a slideshow, OrangeBox had trouble figuring out which to show. Now, by default, OrangeBox assumes these are all the same and it should only show one. You can toggle the setting in OrangeBox options.

Autoplay and Delay Timers

Slideshows now work for all types of content. If autoplay is on, content sets will automatically advance based on the Slideshow Timer. If you want to show content for longer, you can manually specify the delay timer on an individual link so that it displays for a longer/shorter period of time. Currently, the slideshow option is global but you can set it for a single page by setting the option in inline JavaScript on a page.

Launch OrangeBox from an iFrame

With a bit of JavaScript, you can now have a link in an iFrame open OrangeBox in the parent window. To do this, add jQuery to your iFrame and add the function below to the onLoad event on the body. Note that the below function initializes a single link in the iFrame.

function setup() {

AddThis Services Option

You can now set the default sharing services for AddThis using the addThisServices option. You can modify the services in OrangeBox options. To see a list of available services, visit the AddThis Services Directory.

Better Styling

Drop shadows, rounded corners and new caption styling are just some of the things that are making OrangeBox3 look even better than before.