<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" />

<script type="text/javascript">
oB.settings.imageBorderWidth = 1;
oB.settings.fadeControls = true;
</script>

---

Options

Behavior

oB.settings.searchTerm
Rel tag keyword used for identifying an OrangeBox link (default: “lightbox”)

oB.settings.checkAlias
If content in a link already exists from another link, do not add the content to the gallery set multiple times (default: true)

oB.settings.nextGen
If link is from NextGen Gallery, use the link’s title as the OrangeBox caption and the link’s alt tag as the OrangeBox title (default: false)

oB.settings.autoplay
Automatically starts the slideshow (default: false)

oB.settings.keyboardNavigation
Allows keyboard navigation (default: true)

oB.settings.addThis
Shows AddThis widget after title (default: true)

oB.settings.streamItems
Number of items to pull from Content Stream (default: 10)

oB.settings.preloaderDelay
Sets delay in milliseconds for preloader (default: 600)

oB.settings.slideshowTimer
Sets timer in milliseconds for slideshow (default: 3000)

oB.settings.notFound
Not Found Error Message (default: “Not Found”)

oB.settings.logging
Logging for OrangeBox true/false/”debug” (default: false)

Appearance

oB.settings.overlayOpacity
Sets the opacity percentage of the overlay background (default: 0.95)

oB.settings.contentBorderWidth
Sets width in pixels of content boarder (default: 4)

oB.settings.contentRoundedBorder
Enables corner rounding for the window (default: true)

oB.settings.showClose
Shows close button (default: true)

oB.settings.showDots
Shows navigation dots (default: false)

oB.settings.showNav
Shows navigation arrows (default: true)

oB.settings.fadeControls
Allows the controls to fade in/out (default: false)

oB.settings.fadeTime
Sets fade in/out time in milliseconds (default: 200)

Heights/Widths

The three options below are set using value pairs. To set a pair use the syntax: “[height, width]“. There are three different ways to specify a value:

1. No Maximum: 0 (width will still be constrained to the browser window)
2. Percentage of browser window: Any value between 0 and 1
3. Pixel Value: Any value greater than 1 (width will still be constrained to the browser window)

oB.settings.contentMinSize
Sets the minimum size for the content window (default: [100, 200])

oB.settings.contentMaxSize
Sets the maximum size for the content window (default: [0.75, 0.75])

oB.settings.videoAspect
Sets the aspect ratio for displaying videos (default: [390, 640])

---

Callbacks

.bind(oB_ready);
Triggers when OrangeBox is ready

.bind(oB_init);
Triggers when OrangeBox is shown (includes a linkback if valid)

.bind(oB_closing);
Triggers when OrangeBox close is called

.bind(oB_closed);
Triggers when OrangeBox is closed

.bind(oB_navigate);
Triggers when OrangeBox navigates (includes the id of the object)

.bind(oB_play);
Triggers when OrangeBox play is called

.bind(oB_pause);
Triggers when OrangeBox pause is called

To listen for callbacks:

$(document).bind('oB_init', yourFunction(event, link));

$(document).bind('oB_navigate',function(event, id){
alert('OrangeBox is Navigating to ID: '+id);
});

---

Public Methods

create(this, options)
Creates OrangeBox window

$("#anchorID").orangeBox('create');
$(document).orangeBox('create', $("#anchorID"));

createCustom(content, options)
Creates OrangeBox window with custom content

var content = {
    href : '/wallpaper.jpg',
    title : 'wallpaper',
    caption : "This object was built dynamically"
}
$("document").orangeBox('createCustom', content);

Only the href is required unless showing inline content (in that case the html attribute is also required). You can also specify these attributes:

• link
• linkText
• linkTarget
• delay
• html (used to specify inline content to be shown if inline link is provided)
• gallery

destroy(options)
Closes OrangeBox window

$(document).orangeBox('destroy');

navigate(direction, index, options)
Navigates to new index. Use direction or index, not both.
Direction: next = 1 previous = -1, Index: index of item in gallery

$(document).orangeBox('navigate', 1, false);
$(document).orangeBox('navigate', false, 8);

play/pause
Plays or Pauses the image set slideshow

$(document).orangeBox('play');
$(document).orangeBox('pause');

showLoad(“stop”)
Shows the loading animation. If “stop” is called, the animation is hidden

$(document).orangeBox('showLoad', "stop");

You can add options to the create, destroy and navigate methods that override the default OrangeBox options. To do this follow the structure below (notice the last option does not have a comma):

var options = {
    autoplay : true,
    slideshowTimer : 2000,
    notFound : "The object called cannot be found"
}
$(document).orangeBox('navigate', 1, false, options);