angular-colorbox

Angular Colorbox

Angular Colorbox is directive for the lightweight customizable lightbox Colorbox plugin.

Features

Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+

• Flexible Angular directive
• Supports photos, grouping, slideshow, ajax, inline, and iframed content. Lightweight: 10KB of JavaScript (less than 5KBs gzipped).
• Appearance is controlled through CSS so it can be restyled.
• Can be extended with callbacks & event-hooks without altering the source files.
• Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
• Preloads upcoming images in a photo group.
• Colorbox is currently used on more than 2 million websites.

Installation

Via Bower:

bower install angular-colorbox

Via npm:

npm install angular-colorbox

In a browser:

<link rel="stylesheet" type="text/css" href="themes/dark/colorbox-darktheme.css" media="screen" />
<script src="jquery.colorbox.js"></script>
<script src="angular-colorbox.js"></script>

Getting Started

Include the Colorbox plug-in and the directive on a page.

Basic via attribute

<img id="cb_01" src="path_to_image" colorboxable>

Options via attribute

<img id="cb_01" src="path_to_image" colorboxable="{opacity:0.5}">

Basic via tag

<img id="cb_02" src="path_to_image" >
<colorbox box-for="cb_02" />

Options via tag

<img id="cb_03" src="path_to_image" >
<colorbox box-for="cb_03"  options="{href:'images/large/image1.jpg', opacity:0.5, title:'A nice colorbox' }" />

For more information on how to setup and customise, check the examples.

License

Licensed under MIT license.