1. module fancybox
   1. function fancybox (jQuery)

module fancybox

function fancybox (jQuery)

• description and source-code

  fancybox = function (jQuery) {
      "use strict";
  
      var H = jQuery("html"),
          W = jQuery(window),
          D = jQuery(document),
          F = jQuery.fancybox = function() {
              F.open.apply(this, arguments);
          },
          IE = navigator.userAgent.match(/msie/i),
          didUpdate = null,
          isTouch = document.createTouch !== undefined,
  
          isQuery = function(obj) {
              return obj && obj.hasOwnProperty && obj instanceof jQuery;
          },
          isString = function(str) {
              return str && jQuery.type(str) === "string";
          },
          isPercentage = function(str) {
              return isString(str) && str.indexOf('%') > 0;
          },
          isScrollable = function(el) {
              return (el && !(el.style.overflow && el.style.overflow === 'hidden') && ((el.clientWidth && el.scrollWidth > el.clientWidth
  ) || (el.clientHeight && el.scrollHeight > el.clientHeight)));
          },
          getScalar = function(orig, dim) {
              var value = parseInt(orig, 10) || 0;
  
              if (dim && isPercentage(orig)) {
                  value = F.getViewport()[dim] / 100 * value;
              }
  
              return Math.ceil(value);
          },
          getValue = function(value, dim) {
              return getScalar(value, dim) + 'px';
          };
  
      jQuery.extend(F, {
          // The current version of fancyBox
          version: '2.1.5',
  
          defaults: {
              padding: 15,
              margin: 20,
  
              width: 800,
              height: 600,
              minWidth: 100,
              minHeight: 100,
              maxWidth: 9999,
              maxHeight: 9999,
              pixelRatio: 1, // Set to 2 for retina display support
  
              autoSize: true,
              autoHeight: false,
              autoWidth: false,
  
              autoResize: true,
              autoCenter: !isTouch,
              fitToView: true,
              aspectRatio: false,
              topRatio: 0.5,
              leftRatio: 0.5,
  
              scrolling: 'auto', // 'auto', 'yes' or 'no'
              wrapCSS: '',
  
              arrows: true,
              closeBtn: true,
              closeClick: false,
              nextClick: false,
              mouseWheel: true,
              autoPlay: false,
              playSpeed: 3000,
              preload: 3,
              modal: false,
              loop: true,
  
              ajax: {
                  dataType: 'html',
                  headers: {
                      'X-fancyBox': true
                  }
              },
              iframe: {
                  scrolling: 'auto',
                  preload: true
              },
              swf: {
                  wmode: 'transparent',
                  allowfullscreen: 'true',
                  allowscriptaccess: 'always'
              },
  
              keys: {
                  next: {
                      13: 'left', // enter
                      34: 'up', // page down
                      39: 'left', // right arrow
                      40: 'up' // down arrow
                  },
                  prev: {
                      8: 'right', // backspace
                      33: 'down', // page up
                      37: 'right', // left arrow
                      38: 'down' // up arrow
                  },
                  close: [27], // escape key
                  play: [32], // space - start/stop slideshow
                  toggle: [70] // letter "f" - toggle fullscreen
              },
  
              direction: {
                  next: 'left',
                  prev: 'right'
              },
  
              scrollOutside: true,
  
              // Override some properties
              index: 0,
              type: null,
              href: null,
              content: null,
              title: null,
  
              // HTML templates
              tpl: {
                  wrap: '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class
  ="fancybox-inner"></div></div></div></div>',
                  image: '<img class="fancybox-image" src="{href}" alt="" />',
                  iframe: '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace ...

• example usage

  ...
  <a href="large_1.jpg" class="fancybox" rel="gallery" title="Sample title 1">&#
  x3c;img src="small_1.jpg" /></a>
  <a href="large_2.jpg" class="fancybox" rel="gallery" title="Sample title 1">&#
  x3c;img src="small_2.jpg" /></a>
  
  Initialise the script like this:
  
  <script>
      $(document).ready(function() {
          $('.fancybox').fancybox();
      });
  </script>
  
  May also be passed an optional options object which will extend the default values. Example:
  
  <script>
      $(document).ready(function() {
  ...