OrangeBox: How To - DavidPaulHamilton

OrangeBox3 is in Beta and there are known issues

This documentation is for OrangeBox3 only, to see the currently release go to orangebox.davidpaulhamilton.net

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>)

Images:

Create a hyperlink to an image and add rel=”lightbox” to the anchor:


<a href="/image.jpg" rel="lightbox">link</a>

Image Streams:

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


<a href="https://picasaweb.google.com/data/feed/base/all?alt=rss&kind=photo&access=public&filter=1&q=satalite&hl=en_US" rel="lightbox">Picasa</a>


<a href="http://api.flickr.com/services/feeds/photos_public.gne?id=39506645@N00&lang=en-us&format=rss_200" rel="lightbox">Flickr</a>

Your links should be similar to the two examples above.

YouTube, Vimeo and Viddler:

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


<a href="http://www.youtube.com/watch?v=tVvVQc3O01U" rel="lightbox">link</a>


<a href="http://vimeo.com/13216490" rel="lightbox">link</a>


<a href="http://www.viddler.com/player/d6c37b62" rel="lightbox">link</a>

Flash:

Create a hyperlink to the SWF file and set the rel to lightbox:


<a href="flashfile.swf" rel="lightbox">link</a>

PDF:

Simply create a hyperlink to the PDF file and set the rel to lightbox:


<a href="pdffile.pdf" rel="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" rel="lightbox">link</a>
<div id="inlineContent" style="display:none">Inline Content Here</div>

iFrame Content:

Create a hyperlink to the URL and add “?iframe=true” to the href:


<a href="http://google.com?iframe=true" rel="lightbox">link</a>

4. Group Content

To group items, add the group name between square brackets to the rel:


<a href="/image.jpg" rel="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 ?width={number of pixels}&height={number of pixels} to the href:


<a href="/image.jpg?width=440&height=200" rel="lightbox">link</a>

Captions:

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


<a href="/image.jpg" rel="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" rel="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.

Turn off AddThis per link:

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


data-ob_share="false"