Fancybox definitions and tests added

Definitions/fancybox-2.1.d.ts

@@ -0,0 +1,126 @@
+// Type definitions for fancyBox 2.1
+// Project: https://github.com/fancyapps/fancyBox
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+
+interface FancyboxOptions {
+    padding?: any; // number or []
+    margin?: any; // number or []
+    width?: any; // number or []
+    height?: any; // number or []
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    autoSize?: bool;
+    autoHeight?: bool;
+    autoWidth?: bool;
+    autoResize?: bool;
+    autoCenter?: bool;
+    fitToView?: bool;
+    aspectRatio?: bool;
+    topRatio?: number;
+    leftRatio?: number;
+    scrolling?: string;
+    wrapCSS?: string;
+    arrows?: bool;
+    closeBtn?: bool;
+    closeClick?: bool;
+    nextClick?: bool;
+    mouseWheel?: bool;
+    autoPlay?: bool;
+    playSpeed?: number;
+    preload?: number;
+    modal?: bool;
+    loop?: bool;
+    ajax?: any;
+    iframe?: any;
+    swf?: any;
+    keys?: any;
+    direction?: any;
+    scrollOutside?: bool;
+    index?: number;
+    type?: string;
+    href?: string;
+    content?: string;
+    title?: string;
+    tpl?: any;
+
+    openEffect?: string;
+    closeEffect?: string;
+    nextEffect?: string;
+    prevEffect?: string;
+
+    openSpeed?: number;
+    closeSpeed?: number;
+    nextSpeed?: number;
+    prevSpeed?: number;
+
+    openEasing?: string;
+    closeEasing?: string;
+    nextEasing?: string;
+    prevEasing?: string;
+
+    openOpacity?: bool;
+    closeOpacity?: bool;
+
+    openMethod?: string;
+    closeMethod?: string;
+    nextMethod?: string;
+    prevMethod?: string;
+
+    helpers?: any;
+}
+
+interface FancyboxMethods {
+    open(group?: any[], options?: FancyboxOptions);
+    cancel();
+    close(force?: bool);
+    play();
+    next();
+    prev();
+    jumpto(index?: number);
+    reposition();
+    update();
+    toggle();
+    showLoading();
+    hideLoading();
+
+    (options?: FancyboxOptions): void;
+    (selector: string, options?: FancyboxOptions): void;
+    (selector: JQuery, options?: FancyboxOptions): void;
+    (group?: any[], options?: FancyboxOptions): void;
+}
+
+interface FancyboxCallback {
+    onCancel;
+    beforeLoad;
+    afterLoad;
+    beforeShow;
+    afterShow;
+    beforeClose;
+    afterClose;
+    onUpdate;
+    onPlayStart;
+    onPlayEnd;
+}
+
+interface FancyboxThumbnailHelperOptions {
+    width?: number;
+    height?: number;
+    source?: any;
+    position?: string;
+}
+
+interface FancyboxButtonHelperOptions {
+    tpl?: string;
+    position?: string;
+}
+
+interface JQuery {
+    fancybox: FancyboxMethods;
+}
+
+interface JQueryStatic {
+    fancybox: FancyboxMethods;
+}

README.md

@@ -10,17 +10,19 @@ Complete
 * Backbone.js
 * Bootstrap
 * Express (from TypeScript samples)
+* Fancybox
 * History.js
 * jQuery.Globalize
 * jQuery (from TypeScript samples)
+* Knockout.js
 * Modernizr
 * Mustache.js
 * Node.js (from TypeScript samples)
+* QUnit
 * Underscore.js
 
 In Progress
 -----------
-* Knockout.js
 * jQuery UI
 * jQuery Mobile
 
@@ -28,7 +30,6 @@ Next
 ----
 * Angular.js
 * jQuery.Validate
-* QUnit
 * PhoneGap
 * Isotope
 * Reveal.js

Tests/fancybox-tests.ts

@@ -0,0 +1,148 @@
+/// <reference path="../Definitions/jquery-1.8.d.ts" />
+/// <reference path="../Definitions/fancybox-2.1.d.ts" />
+
+$('.fancybox').fancybox();
+$('.fancybox').fancybox({
+    padding: 0,
+    openEffect: 'elastic'
+});
+$.fancybox([
+    { href: 'img1.jpg', title: 'Title' },
+    { href: 'img2.jpg', title: 'Title' }
+]);
+$.fancybox({ href: 'image.jpg', title: 'Lorem lipsum' });
+$.fancybox(['image.jpg', 'image.jpg']);
+$.fancybox('image.jpg');
+$.fancybox('<h1>Lorem lipsum</h1>');
+
+$.fancybox.cancel();
+$.fancybox.close(true);
+$.fancybox.play();
+$.fancybox.next();
+$.fancybox.prev();
+$.fancybox.jumpto(1);
+$.fancybox.reposition();
+$.fancybox.update();
+$.fancybox.toggle();
+$.fancybox.showLoading();
+$.fancybox.hideLoading();
+$(".selector").fancybox({ 'type': 'image' });
+$("#single_1").fancybox({
+    helpers: {
+        title: {
+            type: 'float'
+        }
+    }
+});
+$("#single_2").fancybox({
+    openEffect: 'elastic',
+    closeEffect: 'elastic',
+    helpers: {
+        title: {
+            type: 'inside'
+        }
+    }
+});
+$(".fancybox").fancybox({
+    openEffect: 'none',
+    closeEffect: 'none'
+});
+$(".various").fancybox({
+    maxWidth: 800,
+    maxHeight: 600,
+    fitToView: false,
+    width: '70%',
+    height: '70%',
+    autoSize: false,
+    closeClick: false,
+    openEffect: 'none',
+    closeEffect: 'none'
+});
+$(".fancybox-button").fancybox({
+    prevEffect: 'none',
+    nextEffect: 'none',
+    closeBtn: false,
+    helpers: {
+        title: { type: 'inside' },
+        buttons: {}
+    }
+});
+$(".fancybox-thumb").fancybox({
+    prevEffect: 'none',
+    nextEffect: 'none',
+    helpers: {
+        title: {
+            type: 'outside'
+        },
+        thumbs: {
+            width: 50,
+            height: 50
+        }
+    }
+});
+$('.fancybox-media').fancybox({
+    openEffect: 'none',
+    closeEffect: 'none',
+    helpers: {
+        media: {}
+    }
+});
+$(".fancybox").fancybox({
+    helpers: {
+        title: null
+    }
+});
+$(".fancybox").fancybox({
+    helpers: {
+        overlay: null
+    }
+});
+$(".fancybox").fancybox({
+    helpers: {
+        title: {
+            type: 'inside'
+        },
+        overlay: {
+            showEarly: false
+        }
+    }
+});
+$(".fancybox").fancybox({
+    helpers: {
+        thumbs: {
+            width: 50,
+            height: 50
+        }
+    }
+});
+$(".fancybox").fancybox({
+    beforeLoad: function () {
+        this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
+    }
+});
+$.fancybox('<div><h1>Lorem Lipsum</h1><p>Lorem lipsum</p></div>', {
+    title: 'Custom Title'
+});
+$.fancybox($("#inline"), {
+    title: 'Custom Title'
+});
+$.fancybox({
+    href: 'example.jpg',
+    title: 'Custom Title'
+});
+$.fancybox([
+    {
+        href: 'example1.jpg',
+        title: 'Custom Title 1'
+    },
+    {
+        href: 'example2.jpg',
+        title: 'Custom Title 2'
+    }
+], {
+    padding: 0
+});
+
+$(".fancybox").fancybox({
+    margin: [20, 60, 20, 60]
+});