OrangeBox: How To

1. Upload Plugin

Upload the orangebox folder from zip file to the root of your site. This is important as it looks for files located here.

2. Include Plugin Files

Copy the following code and add it to the <head> section of your HTML.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="orangebox/js/orangebox.min.js"></script>
<link rel="stylesheet" href="orangebox/css/orangebox.css" type="text/css" />

3. Create a link element (<a>) with the data-ob attribute

Note: you can use the rel attribute instead of the data-ob attribute. While this creates invalid markup, it should work in most cases. In general, you should use the data-ob attribute wherever possible.

Images:

Create a hyperlink to an image and add data-ob=”lightbox” to the anchor:

<a href="/image.jpg" data-ob="lightbox">link</a>

Image Streams:

  1. Go to the album/author/search page in Flickr or Picasa (Flickr does not allow streams for searches)
  2. At the bottom of the page (on the far right on some pages in Picasa) click the RSS link
  3. Copy the browser URL and paste it into the href of your link and add data-ob=”lightbox”

Flickr RSS

<a href="https://picasaweb.google.com/data/feed/base/all?alt=rss&kind=photo&access=public&filter=1&q=satalite&hl=en_US" data-ob="lightbox">Picasa</a>
<a href="http://api.flickr.com/services/feeds/photos_public.gne?id=39506645@N00&lang=en-us&format=rss_200" data-ob="lightbox">Flickr</a>

Your links should be similar to the two examples above. Here is some more information on retrieving the RSS link for Picasa.

YouTube, Vimeo and Viddler:

Create a hyperlink to the YouTube/Vimeo/Viddler video:

<a href="http://www.youtube.com/watch?v=tVvVQc3O01U" data-ob="lightbox">link</a>
<a href="http://vimeo.com/13216490" data-ob="lightbox">link</a>
<a href="http://www.viddler.com/player/d6c37b62" data-ob="lightbox">link</a>

Flash:

Create a hyperlink to the SWF file and set the data-ob attribute to lightbox:

<a href="flashfile.swf" data-ob="lightbox">link</a>

PDF:

Simply create a hyperlink to the PDF file and set the data-ob attribute to lightbox:

<a href="pdffile.pdf" data-ob="lightbox">link</a>

Inline Content:

You can show just about any content as inline content. Think about embedding QuickTime videos, audio players and other media. To do it just create a div that has the content you want to show in it. Give the div a unique ID and set the style to display: none. Then create an anchor link with href=”#inlineContentID” where “inlineContentID” is the ID of the div that you added:

<a href="#inlineContent" data-ob="lightbox">link</a>
<div id="inlineContent" style="display:none">Inline Content Here</div>

iFrame Content:

Create a hyperlink to the URL and add the attribute: data-ob_iframe=”true” to the hyperlink:

<a href="http://google.com" data-ob_iframe="true" data-ob="lightbox">link</a>

Image Maps:

You can link any OrangeBox content from image maps. Simply add the attribute: data-ob=”lightbox” to the area:

<area shape="rect" coords="0,0,82,126" alt="Sun" title="Sun" href="/sun.gif" data-ob="lightbox" />

4. Group Content

To group items, add the group name between square brackets to the data-ob:

<a href="/image.jpg" data-ob="lightbox[groupName]">link</a>

You can also hide links in a content set by simply removing content between the <a href…></a> tags.

5. Add Advanced Options

Width and Height

You can set the width and height for the content. The content will span to the width or height that you set as long as it fits within the browser window.

To set the width and height, add the attributes: data-ob_width=”” and data-ob_height=”” to the hyperlink:

<a href="/image.jpg" data-ob_width="440" data-ob_height="200" data-ob="lightbox">link</a>

Captions:

To add a caption, add the data-ob_caption attribute below to your link:

<a href="/image.jpg" data-ob="lightbox" data-ob_caption="This is the caption">link</a>

Titles:

OrangeBox recognizes the title attribute of your link and uses it as the title to the modal window.

Title Links:

You can add a link after your title by adding the data-ob_link, data-ob_linkText, and data-ob_linkTarget attributes to your link:

<a href="/image.jpg" data-ob="lightbox"
data-ob_link="URL" 
data-ob_linkText="This is the link text"
data-ob_linkTarget="_self">link</a>

data-ob_linkTarget defaults to _blank which opens the link in a new window.

Delay Timers

You can manually set the slideshow time for an individual piece of content using the attribute below. The time is set in milliseconds.

data-ob_delayTimer="6000"

Turn off AddThis per link:

You can turn off AddThis functionality for individual links using the attribute below:

data-ob_share="false"