+
+If you have a set of related items that you would like to group,
+additionally include a group name in the `rel` (or `data-fancybox-group`) attribute:
+
+ 
+ 
+
+Initialise the script like this:
+
+
+
+May also be passed an optional options object which will extend the default values. Example:
+
+
+
+Tip: Automatically group and apply fancyBox to all images:
+
+ $("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();
+
+Script uses the `href` attribute of the matched elements to obtain the location of the content and to figure out content type you want to display.
+You can specify type directly by adding classname (fancybox.image, fancybox.iframe, etc) or `data-fancybox-type` attribute:
+
+ //Ajax:
+ Example
+ //or
+ Example
+
+ //Iframe:
+ Example
+
+ //Inline (will display an element with `id="example"`)
+ Example
+
+ //SWF:
+ Example
+
+ //Image:
+ Example
+
+Note, ajax requests are subject to the [same origin policy](http://en.wikipedia.org/wiki/Same_origin_policy).
+If fancyBox will not be able to get content type, it will try to guess based on 'href' and will quit silently if would not succeed.
+(this is different from previsous versions where 'ajax' was used as default type or an error message was displayed).
+
+Advanced
+--------
+
+### Helpers
+
+Helpers provide a simple mechanism to extend the capabilities of fancyBox. There are two built-in helpers - 'overlay' and 'title'.
+You can disable them, set custom options or enable other helpers. Examples:
+
+ //Disable title helper
+ $(".fancybox").fancybox({
+ helpers: {
+ title: null
+ }
+ });
+
+ //Disable overlay helper
+ $(".fancybox").fancybox({
+ helpers: {
+ overlay : null
+ }
+ });
+
+ //Change title position and overlay color
+ $(".fancybox").fancybox({
+ helpers: {
+ title : {
+ type : 'inside'
+ },
+ overlay : {
+ css : {
+ 'background' : 'rgba(255,255,255,0.5)'
+ }
+ }
+ }
+ });
+
+ //Enable thumbnail helper and set custom options
+ $(".fancybox").fancybox({
+ helpers: {
+ thumbs : {
+ width: 50,
+ height: 50
+ }
+ }
+ });
+
+
+### API
+
+Also available are event driven callback methods. The `this` keyword refers to the current or upcoming object (depends on callback method). Here is how you can change title:
+
+ $(".fancybox").fancybox({
+ beforeLoad : function() {
+ this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
+
+ /*
+ "this.element" refers to current element, so you can, for example, use the "alt" attribute of the image to store the title:
+ this.title = $(this.element).find('img').attr('alt');
+ */
+ }
+ });
+
+It`s possible to open fancyBox programmatically in various ways:
+
+ //HTML content:
+ $.fancybox( 'Lorem lipsum
