Advertisement
Guest User

Fancybox without scroll blocking

a guest
Jan 5th, 2012
1,216
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2.  * FancyBox - jQuery Plugin
  3.  * Simple and fancy lightbox alternative
  4.  *
  5.  * Examples and documentation at: http://fancybox.net
  6.  *
  7.  * Copyright (c) 2008 - 2010 Janis Skarnelis
  8.  * That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated.
  9.  *
  10.  * Version: 1.3.4 (11/11/2010)
  11.  * Requires: jQuery v1.3+
  12.  *
  13.  * Dual licensed under the MIT and GPL licenses:
  14.  *   http://www.opensource.org/licenses/mit-license.php
  15.  *   http://www.gnu.org/licenses/gpl.html
  16.  */
  17.  
  18. ;(function($) {
  19.     var tmp, loading, overlay, wrap, outer, content, close, title, nav_left, nav_right,
  20.  
  21.         selectedIndex = 0, selectedOpts = {}, selectedArray = [], currentIndex = 0, currentOpts = {}, currentArray = [],
  22.  
  23.         ajaxLoader = null, imgPreloader = new Image(), imgRegExp = /\.(jpg|gif|png|bmp|jpeg)(.*)?$/i, swfRegExp = /[^\.]\.(swf)\s*$/i,
  24.  
  25.         loadingTimer, loadingFrame = 1,
  26.  
  27.         titleHeight = 0, titleStr = '', start_pos, final_pos, busy = false, fx = $.extend($('<div/>')[0], { prop: 0 }),
  28.  
  29.         isIE6 = $.browser.msie && $.browser.version < 7 && !window.XMLHttpRequest,
  30.  
  31.         /*
  32.          * Private methods
  33.          */
  34.  
  35.         _abort = function() {
  36.             loading.hide();
  37.  
  38.             imgPreloader.onerror = imgPreloader.onload = null;
  39.  
  40.             if (ajaxLoader) {
  41.                 ajaxLoader.abort();
  42.             }
  43.  
  44.             tmp.empty();
  45.         },
  46.  
  47.         _error = function() {
  48.             if (false === selectedOpts.onError(selectedArray, selectedIndex, selectedOpts)) {
  49.                 loading.hide();
  50.                 busy = false;
  51.                 return;
  52.             }
  53.  
  54.             selectedOpts.titleShow = false;
  55.  
  56.             selectedOpts.width = 'auto';
  57.             selectedOpts.height = 'auto';
  58.  
  59.             tmp.html( '<p id="fancybox-error">The requested content cannot be loaded.<br />Please try again later.</p>' );
  60.  
  61.             _process_inline();
  62.         },
  63.  
  64.         _start = function() {
  65.             var obj = selectedArray[ selectedIndex ],
  66.                 href,
  67.                 type,
  68.                 title,
  69.                 str,
  70.                 emb,
  71.                 ret;
  72.  
  73.             _abort();
  74.  
  75.             selectedOpts = $.extend({}, $.fn.fancybox.defaults, (typeof $(obj).data('fancybox') == 'undefined' ? selectedOpts : $(obj).data('fancybox')));
  76.  
  77.             ret = selectedOpts.onStart(selectedArray, selectedIndex, selectedOpts);
  78.  
  79.             if (ret === false) {
  80.                 busy = false;
  81.                 return;
  82.             } else if (typeof ret == 'object') {
  83.                 selectedOpts = $.extend(selectedOpts, ret);
  84.             }
  85.  
  86.             title = selectedOpts.title || (obj.nodeName ? $(obj).attr('title') : obj.title) || '';
  87.  
  88.             if (obj.nodeName && !selectedOpts.orig) {
  89.                 selectedOpts.orig = $(obj).children("img:first").length ? $(obj).children("img:first") : $(obj);
  90.             }
  91.  
  92.             if (title === '' && selectedOpts.orig && selectedOpts.titleFromAlt) {
  93.                 title = selectedOpts.orig.attr('alt');
  94.             }
  95.  
  96.             href = selectedOpts.href || (obj.nodeName ? $(obj).attr('href') : obj.href) || null;
  97.  
  98.             if ((/^(?:javascript)/i).test(href) || href == '#') {
  99.                 href = null;
  100.             }
  101.  
  102.             if (selectedOpts.type) {
  103.                 type = selectedOpts.type;
  104.  
  105.                 if (!href) {
  106.                     href = selectedOpts.content;
  107.                 }
  108.  
  109.             } else if (selectedOpts.content) {
  110.                 type = 'html';
  111.  
  112.             } else if (href) {
  113.                 if (href.match(imgRegExp)) {
  114.                     type = 'image';
  115.  
  116.                 } else if (href.match(swfRegExp)) {
  117.                     type = 'swf';
  118.  
  119.                 } else if ($(obj).hasClass("iframe")) {
  120.                     type = 'iframe';
  121.  
  122.                 } else if (href.indexOf("#") === 0) {
  123.                     type = 'inline';
  124.  
  125.                 } else {
  126.                     type = 'ajax';
  127.                 }
  128.             }
  129.  
  130.             if (!type) {
  131.                 _error();
  132.                 return;
  133.             }
  134.  
  135.             if (type == 'inline') {
  136.                 obj = href.substr(href.indexOf("#"));
  137.                 type = $(obj).length > 0 ? 'inline' : 'ajax';
  138.             }
  139.  
  140.             selectedOpts.type = type;
  141.             selectedOpts.href = href;
  142.             selectedOpts.title = title;
  143.  
  144.             if (selectedOpts.autoDimensions) {
  145.                 if (selectedOpts.type == 'html' || selectedOpts.type == 'inline' || selectedOpts.type == 'ajax') {
  146.                     selectedOpts.width = 'auto';
  147.                     selectedOpts.height = 'auto';
  148.                 } else {
  149.                     selectedOpts.autoDimensions = false;   
  150.                 }
  151.             }
  152.  
  153.             if (selectedOpts.modal) {
  154.                 selectedOpts.overlayShow = true;
  155.                 selectedOpts.hideOnOverlayClick = false;
  156.                 selectedOpts.hideOnContentClick = false;
  157.                 selectedOpts.enableEscapeButton = false;
  158.                 selectedOpts.showCloseButton = false;
  159.             }
  160.  
  161.             selectedOpts.padding = parseInt(selectedOpts.padding, 10);
  162.             selectedOpts.margin = parseInt(selectedOpts.margin, 10);
  163.  
  164.             tmp.css('padding', (selectedOpts.padding + selectedOpts.margin));
  165.  
  166.             $('.fancybox-inline-tmp').unbind('fancybox-cancel').bind('fancybox-change', function() {
  167.                 $(this).replaceWith(content.children());               
  168.             });
  169.  
  170.             switch (type) {
  171.                 case 'html' :
  172.                     tmp.html( selectedOpts.content );
  173.                     _process_inline();
  174.                 break;
  175.  
  176.                 case 'inline' :
  177.                     if ( $(obj).parent().is('#fancybox-content') === true) {
  178.                         busy = false;
  179.                         return;
  180.                     }
  181.  
  182.                     $('<div class="fancybox-inline-tmp" />')
  183.                         .hide()
  184.                         .insertBefore( $(obj) )
  185.                         .bind('fancybox-cleanup', function() {
  186.                             $(this).replaceWith(content.children());
  187.                         }).bind('fancybox-cancel', function() {
  188.                             $(this).replaceWith(tmp.children());
  189.                         });
  190.  
  191.                     $(obj).appendTo(tmp);
  192.  
  193.                     _process_inline();
  194.                 break;
  195.  
  196.                 case 'image':
  197.                     busy = false;
  198.  
  199.                     $.fancybox.showActivity();
  200.  
  201.                     imgPreloader = new Image();
  202.  
  203.                     imgPreloader.onerror = function() {
  204.                         _error();
  205.                     };
  206.  
  207.                     imgPreloader.onload = function() {
  208.                         busy = true;
  209.  
  210.                         imgPreloader.onerror = imgPreloader.onload = null;
  211.  
  212.                         _process_image();
  213.                     };
  214.  
  215.                     imgPreloader.src = href;
  216.                 break;
  217.  
  218.                 case 'swf':
  219.                     selectedOpts.scrolling = 'no';
  220.  
  221.                     str = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="' + selectedOpts.width + '" height="' + selectedOpts.height + '"><param name="movie" value="' + href + '"></param>';
  222.                     emb = '';
  223.  
  224.                     $.each(selectedOpts.swf, function(name, val) {
  225.                         str += '<param name="' + name + '" value="' + val + '"></param>';
  226.                         emb += ' ' + name + '="' + val + '"';
  227.                     });
  228.  
  229.                     str += '<embed src="' + href + '" type="application/x-shockwave-flash" width="' + selectedOpts.width + '" height="' + selectedOpts.height + '"' + emb + '></embed></object>';
  230.  
  231.                     tmp.html(str);
  232.  
  233.                     _process_inline();
  234.                 break;
  235.  
  236.                 case 'ajax':
  237.                     busy = false;
  238.  
  239.                     $.fancybox.showActivity();
  240.  
  241.                     selectedOpts.ajax.win = selectedOpts.ajax.success;
  242.  
  243.                     ajaxLoader = $.ajax($.extend({}, selectedOpts.ajax, {
  244.                         url : href,
  245.                         data : selectedOpts.ajax.data || {},
  246.                         error : function(XMLHttpRequest, textStatus, errorThrown) {
  247.                             if ( XMLHttpRequest.status > 0 ) {
  248.                                 _error();
  249.                             }
  250.                         },
  251.                         success : function(data, textStatus, XMLHttpRequest) {
  252.                             var o = typeof XMLHttpRequest == 'object' ? XMLHttpRequest : ajaxLoader;
  253.                             if (o.status == 200) {
  254.                                 if ( typeof selectedOpts.ajax.win == 'function' ) {
  255.                                     ret = selectedOpts.ajax.win(href, data, textStatus, XMLHttpRequest);
  256.  
  257.                                     if (ret === false) {
  258.                                         loading.hide();
  259.                                         return;
  260.                                     } else if (typeof ret == 'string' || typeof ret == 'object') {
  261.                                         data = ret;
  262.                                     }
  263.                                 }
  264.  
  265.                                 tmp.html( data );
  266.                                 _process_inline();
  267.                             }
  268.                         }
  269.                     }));
  270.  
  271.                 break;
  272.  
  273.                 case 'iframe':
  274.                     _show();
  275.                 break;
  276.             }
  277.         },
  278.  
  279.         _process_inline = function() {
  280.             var
  281.                 w = selectedOpts.width,
  282.                 h = selectedOpts.height;
  283.  
  284.             if (w.toString().indexOf('%') > -1) {
  285.                 w = parseInt( ($(window).width() - (selectedOpts.margin * 2)) * parseFloat(w) / 100, 10) + 'px';
  286.  
  287.             } else {
  288.                 w = w == 'auto' ? 'auto' : w + 'px';   
  289.             }
  290.  
  291.             if (h.toString().indexOf('%') > -1) {
  292.                 h = parseInt( ($(window).height() - (selectedOpts.margin * 2)) * parseFloat(h) / 100, 10) + 'px';
  293.  
  294.             } else {
  295.                 h = h == 'auto' ? 'auto' : h + 'px';   
  296.             }
  297.  
  298.             tmp.wrapInner('<div style="width:' + w + ';height:' + h + ';overflow: ' + (selectedOpts.scrolling == 'auto' ? 'auto' : (selectedOpts.scrolling == 'yes' ? 'scroll' : 'hidden')) + ';position:relative;"></div>');
  299.  
  300.             selectedOpts.width = tmp.width();
  301.             selectedOpts.height = tmp.height();
  302.  
  303.             _show();
  304.         },
  305.  
  306.         _process_image = function() {
  307.             selectedOpts.width = imgPreloader.width;
  308.             selectedOpts.height = imgPreloader.height;
  309.  
  310.             $("<img />").attr({
  311.                 'id' : 'fancybox-img',
  312.                 'src' : imgPreloader.src,
  313.                 'alt' : selectedOpts.title
  314.             }).appendTo( tmp );
  315.  
  316.             _show();
  317.         },
  318.  
  319.         _show = function() {
  320.             var pos, equal;
  321.  
  322.             loading.hide();
  323.  
  324.             if (wrap.is(":visible") && false === currentOpts.onCleanup(currentArray, currentIndex, currentOpts)) {
  325.                 $.event.trigger('fancybox-cancel');
  326.  
  327.                 busy = false;
  328.                 return;
  329.             }
  330.  
  331.             busy = true;
  332.  
  333.             $(content.add( overlay )).unbind();
  334.  
  335.             $(window).unbind("resize.fb scroll.fb");
  336.             $(document).unbind('keydown.fb');
  337.  
  338.             if (wrap.is(":visible") && currentOpts.titlePosition !== 'outside') {
  339.                 wrap.css('height', wrap.height());
  340.             }
  341.  
  342.             currentArray = selectedArray;
  343.             currentIndex = selectedIndex;
  344.             currentOpts = selectedOpts;
  345.  
  346.             if (currentOpts.overlayShow) {
  347.                 overlay.css({
  348.                     'background-color' : currentOpts.overlayColor,
  349.                     'opacity' : currentOpts.overlayOpacity,
  350.                     'cursor' : currentOpts.hideOnOverlayClick ? 'pointer' : 'auto',
  351.                     'height' : $(document).height()
  352.                 });
  353.  
  354.                 if (!overlay.is(':visible')) {
  355.                     if (isIE6) {
  356.                         $('select:not(#fancybox-tmp select)').filter(function() {
  357.                             return this.style.visibility !== 'hidden';
  358.                         }).css({'visibility' : 'hidden'}).one('fancybox-cleanup', function() {
  359.                             this.style.visibility = 'inherit';
  360.                         });
  361.                     }
  362.  
  363.                     overlay.show();
  364.                 }
  365.             } else {
  366.                 overlay.hide();
  367.             }
  368.  
  369.             final_pos = _get_zoom_to();
  370.  
  371.             _process_title();
  372.  
  373.             if (wrap.is(":visible")) {
  374.                 $( close.add( nav_left ).add( nav_right ) ).hide();
  375.  
  376.                 pos = wrap.position(),
  377.  
  378.                 start_pos = {
  379.                     top  : pos.top,
  380.                     left : pos.left,
  381.                     width : wrap.width(),
  382.                     height : wrap.height()
  383.                 };
  384.  
  385.                 equal = (start_pos.width == final_pos.width && start_pos.height == final_pos.height);
  386.  
  387.                 content.fadeTo(currentOpts.changeFade, 0.3, function() {
  388.                     var finish_resizing = function() {
  389.                         content.html( tmp.contents() ).fadeTo(currentOpts.changeFade, 1, _finish);
  390.                     };
  391.  
  392.                     $.event.trigger('fancybox-change');
  393.  
  394.                     content
  395.                         .empty()
  396.                         .removeAttr('filter')
  397.                         .css({
  398.                             'border-width' : currentOpts.padding,
  399.                             'width' : final_pos.width - currentOpts.padding * 2,
  400.                             'height' : selectedOpts.autoDimensions ? 'auto' : final_pos.height - titleHeight - currentOpts.padding * 2
  401.                         });
  402.  
  403.                     if (equal) {
  404.                         finish_resizing();
  405.  
  406.                     } else {
  407.                         fx.prop = 0;
  408.  
  409.                         $(fx).animate({prop: 1}, {
  410.                              duration : currentOpts.changeSpeed,
  411.                              easing : currentOpts.easingChange,
  412.                              step : _draw,
  413.                              complete : finish_resizing
  414.                         });
  415.                     }
  416.                 });
  417.  
  418.                 return;
  419.             }
  420.  
  421.             wrap.removeAttr("style");
  422.  
  423.             content.css('border-width', currentOpts.padding);
  424.  
  425.             if (currentOpts.transitionIn == 'elastic') {
  426.                 start_pos = _get_zoom_from();
  427.  
  428.                 content.html( tmp.contents() );
  429.  
  430.                 wrap.show();
  431.  
  432.                 if (currentOpts.opacity) {
  433.                     final_pos.opacity = 0;
  434.                 }
  435.  
  436.                 fx.prop = 0;
  437.  
  438.                 $(fx).animate({prop: 1}, {
  439.                      duration : currentOpts.speedIn,
  440.                      easing : currentOpts.easingIn,
  441.                      step : _draw,
  442.                      complete : _finish
  443.                 });
  444.  
  445.                 return;
  446.             }
  447.  
  448.             if (currentOpts.titlePosition == 'inside' && titleHeight > 0) {
  449.                 title.show();  
  450.             }
  451.  
  452.             content
  453.                 .css({
  454.                     'width' : final_pos.width - currentOpts.padding * 2,
  455.                     'height' : selectedOpts.autoDimensions ? 'auto' : final_pos.height - titleHeight - currentOpts.padding * 2
  456.                 })
  457.                 .html( tmp.contents() );
  458.  
  459.             wrap
  460.                 .css(final_pos)
  461.                 .fadeIn( currentOpts.transitionIn == 'none' ? 0 : currentOpts.speedIn, _finish );
  462.         },
  463.  
  464.         _format_title = function(title) {
  465.             if (title && title.length) {
  466.                 if (currentOpts.titlePosition == 'float') {
  467.                     return '<table id="fancybox-title-float-wrap" cellpadding="0" cellspacing="0"><tr><td id="fancybox-title-float-left"></td><td id="fancybox-title-float-main">' + title + '</td><td id="fancybox-title-float-right"></td></tr></table>';
  468.                 }
  469.  
  470.                 return '<div id="fancybox-title-' + currentOpts.titlePosition + '">' + title + '</div>';
  471.             }
  472.  
  473.             return false;
  474.         },
  475.  
  476.         _process_title = function() {
  477.             titleStr = currentOpts.title || '';
  478.             titleHeight = 0;
  479.  
  480.             title
  481.                 .empty()
  482.                 .removeAttr('style')
  483.                 .removeClass();
  484.  
  485.             if (currentOpts.titleShow === false) {
  486.                 title.hide();
  487.                 return;
  488.             }
  489.  
  490.             titleStr = $.isFunction(currentOpts.titleFormat) ? currentOpts.titleFormat(titleStr, currentArray, currentIndex, currentOpts) : _format_title(titleStr);
  491.  
  492.             if (!titleStr || titleStr === '') {
  493.                 title.hide();
  494.                 return;
  495.             }
  496.  
  497.             title
  498.                 .addClass('fancybox-title-' + currentOpts.titlePosition)
  499.                 .html( titleStr )
  500.                 .appendTo( 'body' )
  501.                 .show();
  502.  
  503.             switch (currentOpts.titlePosition) {
  504.                 case 'inside':
  505.                     title
  506.                         .css({
  507.                             'width' : final_pos.width - (currentOpts.padding * 2),
  508.                             'marginLeft' : currentOpts.padding,
  509.                             'marginRight' : currentOpts.padding
  510.                         });
  511.  
  512.                     titleHeight = title.outerHeight(true);
  513.  
  514.                     title.appendTo( outer );
  515.  
  516.                     final_pos.height += titleHeight;
  517.                 break;
  518.  
  519.                 case 'over':
  520.                     title
  521.                         .css({
  522.                             'marginLeft' : currentOpts.padding,
  523.                             'width' : final_pos.width - (currentOpts.padding * 2),
  524.                             'bottom' : currentOpts.padding
  525.                         })
  526.                         .appendTo( outer );
  527.                 break;
  528.  
  529.                 case 'float':
  530.                     title
  531.                         .css('left', parseInt((title.width() - final_pos.width - 40)/ 2, 10) * -1)
  532.                         .appendTo( wrap );
  533.                 break;
  534.  
  535.                 default:
  536.                     title
  537.                         .css({
  538.                             'width' : final_pos.width - (currentOpts.padding * 2),
  539.                             'paddingLeft' : currentOpts.padding,
  540.                             'paddingRight' : currentOpts.padding
  541.                         })
  542.                         .appendTo( wrap );
  543.                 break;
  544.             }
  545.  
  546.             title.hide();
  547.         },
  548.  
  549.         _set_navigation = function() {
  550.             if (currentOpts.enableEscapeButton || currentOpts.enableKeyboardNav) {
  551.                 $(document).bind('keydown.fb', function(e) {
  552.                     if (e.keyCode == 27 && currentOpts.enableEscapeButton) {
  553.                         e.preventDefault();
  554.                         $.fancybox.close();
  555.  
  556.                     } else if ((e.keyCode == 37 || e.keyCode == 39) && currentOpts.enableKeyboardNav && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA' && e.target.tagName !== 'SELECT') {
  557.                         e.preventDefault();
  558.                         $.fancybox[ e.keyCode == 37 ? 'prev' : 'next']();
  559.                     }
  560.                 });
  561.             }
  562.  
  563.             if (!currentOpts.showNavArrows) {
  564.                 nav_left.hide();
  565.                 nav_right.hide();
  566.                 return;
  567.             }
  568.  
  569.             if ((currentOpts.cyclic && currentArray.length > 1) || currentIndex !== 0) {
  570.                 nav_left.show();
  571.             }
  572.  
  573.             if ((currentOpts.cyclic && currentArray.length > 1) || currentIndex != (currentArray.length -1)) {
  574.                 nav_right.show();
  575.             }
  576.         },
  577.  
  578.         _finish = function () {
  579.             if (!$.support.opacity) {
  580.                 content.get(0).style.removeAttribute('filter');
  581.                 wrap.get(0).style.removeAttribute('filter');
  582.             }
  583.  
  584.             if (selectedOpts.autoDimensions) {
  585.                 content.css('height', 'auto');
  586.             }
  587.  
  588.             wrap.css('height', 'auto');
  589.  
  590.             if (titleStr && titleStr.length) {
  591.                 title.show();
  592.             }
  593.  
  594.             if (currentOpts.showCloseButton) {
  595.                 close.show();
  596.             }
  597.  
  598.             _set_navigation();
  599.    
  600.             if (currentOpts.hideOnContentClick) {
  601.                 content.bind('click', $.fancybox.close);
  602.             }
  603.  
  604.             if (currentOpts.hideOnOverlayClick) {
  605.                 overlay.bind('click', $.fancybox.close);
  606.             }
  607.  
  608.             $(window).bind("resize.fb", $.fancybox.resize);
  609.  
  610.             if (currentOpts.centerOnScroll) {
  611.                 $(window).bind("scroll.fb", $.fancybox.center);
  612.             }
  613.  
  614.             if (currentOpts.type == 'iframe') {
  615.                 $('<iframe id="fancybox-frame" name="fancybox-frame' + new Date().getTime() + '" frameborder="0" hspace="0" ' + ($.browser.msie ? 'allowtransparency="true""' : '') + ' scrolling="' + selectedOpts.scrolling + '" src="' + currentOpts.href + '"></iframe>').appendTo(content);
  616.             }
  617.  
  618.             wrap.show();
  619.  
  620.             busy = false;
  621.  
  622.             $.fancybox.center();
  623.  
  624.             currentOpts.onComplete(currentArray, currentIndex, currentOpts);
  625.  
  626.             _preload_images();
  627.         },
  628.  
  629.         _preload_images = function() {
  630.             var href,
  631.                 objNext;
  632.  
  633.             if ((currentArray.length -1) > currentIndex) {
  634.                 href = currentArray[ currentIndex + 1 ].href;
  635.  
  636.                 if (typeof href !== 'undefined' && href.match(imgRegExp)) {
  637.                     objNext = new Image();
  638.                     objNext.src = href;
  639.                 }
  640.             }
  641.  
  642.             if (currentIndex > 0) {
  643.                 href = currentArray[ currentIndex - 1 ].href;
  644.  
  645.                 if (typeof href !== 'undefined' && href.match(imgRegExp)) {
  646.                     objNext = new Image();
  647.                     objNext.src = href;
  648.                 }
  649.             }
  650.         },
  651.  
  652.         _draw = function(pos) {
  653.             var dim = {
  654.                 width : parseInt(start_pos.width + (final_pos.width - start_pos.width) * pos, 10),
  655.                 height : parseInt(start_pos.height + (final_pos.height - start_pos.height) * pos, 10),
  656.  
  657.                 top : parseInt(start_pos.top + (final_pos.top - start_pos.top) * pos, 10),
  658.                 left : parseInt(start_pos.left + (final_pos.left - start_pos.left) * pos, 10)
  659.             };
  660.  
  661.             if (typeof final_pos.opacity !== 'undefined') {
  662.                 dim.opacity = pos < 0.5 ? 0.5 : pos;
  663.             }
  664.  
  665.             wrap.css(dim);
  666.  
  667.             content.css({
  668.                 'width' : dim.width - currentOpts.padding * 2,
  669.                 'height' : dim.height - (titleHeight * pos) - currentOpts.padding * 2
  670.             });
  671.         },
  672.  
  673.         _get_viewport = function() {
  674.             return [
  675.                 $(window).width() - (currentOpts.margin * 2),
  676.                 $(window).height() - (currentOpts.margin * 2),
  677.                 $(document).scrollLeft() + currentOpts.margin,
  678.                 $(document).scrollTop() + currentOpts.margin
  679.             ];
  680.         },
  681.  
  682.         _get_zoom_to = function () {
  683.             var view = _get_viewport(),
  684.                 to = {},
  685.                 resize = currentOpts.autoScale,
  686.                 double_padding = currentOpts.padding * 2,
  687.                 ratio;
  688.  
  689.             if (currentOpts.width.toString().indexOf('%') > -1) {
  690.                 to.width = parseInt((view[0] * parseFloat(currentOpts.width)) / 100, 10);
  691.             } else {
  692.                 to.width = currentOpts.width + double_padding;
  693.             }
  694.  
  695.             if (currentOpts.height.toString().indexOf('%') > -1) {
  696.                 to.height = parseInt((view[1] * parseFloat(currentOpts.height)) / 100, 10);
  697.             } else {
  698.                 to.height = currentOpts.height + double_padding;
  699.             }
  700.  
  701.             if (resize && (to.width > view[0] || to.height > view[1])) {
  702.                 if (selectedOpts.type == 'image' || selectedOpts.type == 'swf') {
  703.                     ratio = (currentOpts.width ) / (currentOpts.height );
  704.  
  705.                     if ((to.width ) > view[0]) {
  706.                         to.width = view[0];
  707.                         to.height = parseInt(((to.width - double_padding) / ratio) + double_padding, 10);
  708.                     }
  709.  
  710.                     if ((to.height) > view[1]) {
  711.                         to.height = view[1];
  712.                         to.width = parseInt(((to.height - double_padding) * ratio) + double_padding, 10);
  713.                     }
  714.  
  715.                 } else {
  716.                     to.width = Math.min(to.width, view[0]);
  717.                     to.height = Math.min(to.height, view[1]);
  718.                 }
  719.             }
  720.  
  721.             to.top = parseInt(Math.max(view[3] - 20, view[3] + ((view[1] - to.height - 40) * 0.5)), 10);
  722.             to.left = parseInt(Math.max(view[2] - 20, view[2] + ((view[0] - to.width - 40) * 0.5)), 10);
  723.  
  724.             return to;
  725.         },
  726.  
  727.         _get_obj_pos = function(obj) {
  728.             var pos = obj.offset();
  729.  
  730.             pos.top += parseInt( obj.css('paddingTop'), 10 ) || 0;
  731.             pos.left += parseInt( obj.css('paddingLeft'), 10 ) || 0;
  732.  
  733.             pos.top += parseInt( obj.css('border-top-width'), 10 ) || 0;
  734.             pos.left += parseInt( obj.css('border-left-width'), 10 ) || 0;
  735.  
  736.             pos.width = obj.width();
  737.             pos.height = obj.height();
  738.  
  739.             return pos;
  740.         },
  741.  
  742.         _get_zoom_from = function() {
  743.             var orig = selectedOpts.orig ? $(selectedOpts.orig) : false,
  744.                 from = {},
  745.                 pos,
  746.                 view;
  747.  
  748.             if (orig && orig.length) {
  749.                 pos = _get_obj_pos(orig);
  750.  
  751.                 from = {
  752.                     width : pos.width + (currentOpts.padding * 2),
  753.                     height : pos.height + (currentOpts.padding * 2),
  754.                     top : pos.top - currentOpts.padding - 20,
  755.                     left : pos.left - currentOpts.padding - 20
  756.                 };
  757.  
  758.             } else {
  759.                 view = _get_viewport();
  760.  
  761.                 from = {
  762.                     width : currentOpts.padding * 2,
  763.                     height : currentOpts.padding * 2,
  764.                     top : parseInt(view[3] + view[1] * 0.5, 10),
  765.                     left : parseInt(view[2] + view[0] * 0.5, 10)
  766.                 };
  767.             }
  768.  
  769.             return from;
  770.         },
  771.  
  772.         _animate_loading = function() {
  773.             if (!loading.is(':visible')){
  774.                 clearInterval(loadingTimer);
  775.                 return;
  776.             }
  777.  
  778.             $('div', loading).css('top', (loadingFrame * -40) + 'px');
  779.  
  780.             loadingFrame = (loadingFrame + 1) % 12;
  781.         };
  782.  
  783.     /*
  784.      * Public methods
  785.      */
  786.  
  787.     $.fn.fancybox = function(options) {
  788.         if (!$(this).length) {
  789.             return this;
  790.         }
  791.  
  792.         $(this)
  793.             .data('fancybox', $.extend({}, options, ($.metadata ? $(this).metadata() : {})))
  794.             .unbind('click.fb')
  795.             .bind('click.fb', function(e) {
  796.                 e.preventDefault();
  797.  
  798.                 if (busy) {
  799.                     return;
  800.                 }
  801.  
  802.                 busy = true;
  803.  
  804.                 $(this).blur();
  805.  
  806.                 selectedArray = [];
  807.                 selectedIndex = 0;
  808.  
  809.                 var rel = $(this).attr('rel') || '';
  810.  
  811.                 if (!rel || rel == '' || rel === 'nofollow') {
  812.                     selectedArray.push(this);
  813.  
  814.                 } else {
  815.                     selectedArray = $("a[rel=" + rel + "], area[rel=" + rel + "]");
  816.                     selectedIndex = selectedArray.index( this );
  817.                 }
  818.  
  819.                 _start();
  820.  
  821.                 return;
  822.             });
  823.  
  824.         return this;
  825.     };
  826.  
  827.     $.fancybox = function(obj) {
  828.         var opts;
  829.  
  830.         if (busy) {
  831.             return;
  832.         }
  833.  
  834.         busy = true;
  835.         opts = typeof arguments[1] !== 'undefined' ? arguments[1] : {};
  836.  
  837.         selectedArray = [];
  838.         selectedIndex = parseInt(opts.index, 10) || 0;
  839.  
  840.         if ($.isArray(obj)) {
  841.             for (var i = 0, j = obj.length; i < j; i++) {
  842.                 if (typeof obj[i] == 'object') {
  843.                     $(obj[i]).data('fancybox', $.extend({}, opts, obj[i]));
  844.                 } else {
  845.                     obj[i] = $({}).data('fancybox', $.extend({content : obj[i]}, opts));
  846.                 }
  847.             }
  848.  
  849.             selectedArray = jQuery.merge(selectedArray, obj);
  850.  
  851.         } else {
  852.             if (typeof obj == 'object') {
  853.                 $(obj).data('fancybox', $.extend({}, opts, obj));
  854.             } else {
  855.                 obj = $({}).data('fancybox', $.extend({content : obj}, opts));
  856.             }
  857.  
  858.             selectedArray.push(obj);
  859.         }
  860.  
  861.         if (selectedIndex > selectedArray.length || selectedIndex < 0) {
  862.             selectedIndex = 0;
  863.         }
  864.  
  865.         _start();
  866.     };
  867.  
  868.     $.fancybox.showActivity = function() {
  869.         clearInterval(loadingTimer);
  870.  
  871.         loading.show();
  872.         loadingTimer = setInterval(_animate_loading, 66);
  873.     };
  874.  
  875.     $.fancybox.hideActivity = function() {
  876.         loading.hide();
  877.     };
  878.  
  879.     $.fancybox.next = function() {
  880.         return $.fancybox.pos( currentIndex + 1);
  881.     };
  882.  
  883.     $.fancybox.prev = function() {
  884.         return $.fancybox.pos( currentIndex - 1);
  885.     };
  886.  
  887.     $.fancybox.pos = function(pos) {
  888.         if (busy) {
  889.             return;
  890.         }
  891.  
  892.         pos = parseInt(pos);
  893.  
  894.         selectedArray = currentArray;
  895.  
  896.         if (pos > -1 && pos < currentArray.length) {
  897.             selectedIndex = pos;
  898.             _start();
  899.  
  900.         } else if (currentOpts.cyclic && currentArray.length > 1) {
  901.             selectedIndex = pos >= currentArray.length ? 0 : currentArray.length - 1;
  902.             _start();
  903.         }
  904.  
  905.         return;
  906.     };
  907.  
  908.     $.fancybox.cancel = function() {
  909.         if (busy) {
  910.             return;
  911.         }
  912.  
  913.         busy = true;
  914.  
  915.         $.event.trigger('fancybox-cancel');
  916.  
  917.         _abort();
  918.  
  919.         selectedOpts.onCancel(selectedArray, selectedIndex, selectedOpts);
  920.  
  921.         busy = false;
  922.     };
  923.  
  924.     // Note: within an iframe use - parent.$.fancybox.close();
  925.     $.fancybox.close = function() {
  926.         if (busy || wrap.is(':hidden')) {
  927.             return;
  928.         }
  929.  
  930.         busy = true;
  931.  
  932.         if (currentOpts && false === currentOpts.onCleanup(currentArray, currentIndex, currentOpts)) {
  933.             busy = false;
  934.             return;
  935.         }
  936.  
  937.         _abort();
  938.  
  939.         $(close.add( nav_left ).add( nav_right )).hide();
  940.  
  941.         $(content.add( overlay )).unbind();
  942.  
  943.         $(window).unbind("resize.fb scroll.fb");
  944.         $(document).unbind('keydown.fb');
  945.  
  946.         content.find('iframe').attr('src', isIE6 && /^https/i.test(window.location.href || '') ? 'javascript:void(false)' : 'about:blank');
  947.  
  948.         if (currentOpts.titlePosition !== 'inside') {
  949.             title.empty();
  950.         }
  951.  
  952.         wrap.stop();
  953.  
  954.         function _cleanup() {
  955.             overlay.fadeOut('fast');
  956.  
  957.             title.empty().hide();
  958.             wrap.hide();
  959.  
  960.             $.event.trigger('fancybox-cleanup');
  961.  
  962.             content.empty();
  963.  
  964.             currentOpts.onClosed(currentArray, currentIndex, currentOpts);
  965.  
  966.             currentArray = selectedOpts = [];
  967.             currentIndex = selectedIndex = 0;
  968.             currentOpts = selectedOpts  = {};
  969.  
  970.             busy = false;
  971.         }
  972.  
  973.         if (currentOpts.transitionOut == 'elastic') {
  974.             start_pos = _get_zoom_from();
  975.  
  976.             var pos = wrap.position();
  977.  
  978.             final_pos = {
  979.                 top  : pos.top ,
  980.                 left : pos.left,
  981.                 width : wrap.width(),
  982.                 height : wrap.height()
  983.             };
  984.  
  985.             if (currentOpts.opacity) {
  986.                 final_pos.opacity = 1;
  987.             }
  988.  
  989.             title.empty().hide();
  990.  
  991.             fx.prop = 1;
  992.  
  993.             $(fx).animate({ prop: 0 }, {
  994.                  duration : currentOpts.speedOut,
  995.                  easing : currentOpts.easingOut,
  996.                  step : _draw,
  997.                  complete : _cleanup
  998.             });
  999.  
  1000.         } else {
  1001.             wrap.fadeOut( currentOpts.transitionOut == 'none' ? 0 : currentOpts.speedOut, _cleanup);
  1002.         }
  1003.     };
  1004.  
  1005.     $.fancybox.resize = function() {
  1006.         if (overlay.is(':visible')) {
  1007.             overlay.css('height', $(document).height());
  1008.         }
  1009.  
  1010.         $.fancybox.center(true);
  1011.     };
  1012.  
  1013.     $.fancybox.center = function() {
  1014.         var view, align;
  1015.  
  1016.         if (busy) {
  1017.             return;
  1018.         }
  1019.  
  1020.         align = arguments[0] === true ? 1 : 0;
  1021.         view = _get_viewport();
  1022.  
  1023.         if (!align && (wrap.width() > view[0] || wrap.height() > view[1])) {
  1024.             return;
  1025.         }
  1026.  
  1027.         wrap
  1028.             .stop()
  1029.             .animate({
  1030.                 'top' : parseInt(Math.max(view[3] - 20, view[3] + ((view[1] - content.height() - 40) * 0.5) - currentOpts.padding)),
  1031.                 'left' : parseInt(Math.max(view[2] - 20, view[2] + ((view[0] - content.width() - 40) * 0.5) - currentOpts.padding))
  1032.             }, typeof arguments[0] == 'number' ? arguments[0] : 200);
  1033.     };
  1034.  
  1035.     $.fancybox.init = function() {
  1036.         if ($("#fancybox-wrap").length) {
  1037.             return;
  1038.         }
  1039.  
  1040.         $('body').append(
  1041.             tmp = $('<div id="fancybox-tmp"></div>'),
  1042.             loading = $('<div id="fancybox-loading"><div></div></div>'),
  1043.             overlay = $('<div id="fancybox-overlay"></div>'),
  1044.             wrap = $('<div id="fancybox-wrap"></div>')
  1045.         );
  1046.  
  1047.         outer = $('<div id="fancybox-outer"></div>')
  1048.             .append('<div class="fancybox-bg" id="fancybox-bg-n"></div><div class="fancybox-bg" id="fancybox-bg-ne"></div><div class="fancybox-bg" id="fancybox-bg-e"></div><div class="fancybox-bg" id="fancybox-bg-se"></div><div class="fancybox-bg" id="fancybox-bg-s"></div><div class="fancybox-bg" id="fancybox-bg-sw"></div><div class="fancybox-bg" id="fancybox-bg-w"></div><div class="fancybox-bg" id="fancybox-bg-nw"></div>')
  1049.             .appendTo( wrap );
  1050.  
  1051.         outer.append(
  1052.             content = $('<div id="fancybox-content"></div>'),
  1053.             close = $('<a id="fancybox-close"></a>'),
  1054.             title = $('<div id="fancybox-title"></div>'),
  1055.  
  1056.             nav_left = $('<a href="javascript:;" id="fancybox-left"><span class="fancy-ico" id="fancybox-left-ico"></span></a>'),
  1057.             nav_right = $('<a href="javascript:;" id="fancybox-right"><span class="fancy-ico" id="fancybox-right-ico"></span></a>')
  1058.         );
  1059.  
  1060.         close.click($.fancybox.close);
  1061.         loading.click($.fancybox.cancel);
  1062.  
  1063.         nav_left.click(function(e) {
  1064.             e.preventDefault();
  1065.             $.fancybox.prev();
  1066.         });
  1067.  
  1068.         nav_right.click(function(e) {
  1069.             e.preventDefault();
  1070.             $.fancybox.next();
  1071.         });
  1072.  
  1073.         if ($.fn.mousewheel) {
  1074.             wrap.bind('mousewheel.fb', function(e, delta) {
  1075.                 if (!busy && $(e.target).get(0).clientHeight == 0 || $(e.target).get(0).scrollHeight === $(e.target).get(0).clientHeight) {
  1076.                                         e.preventDefault();
  1077.                     $.fancybox[ delta > 0 ? 'prev' : 'next']();
  1078.                 }
  1079.             });
  1080.         }
  1081.  
  1082.         if (!$.support.opacity) {
  1083.             wrap.addClass('fancybox-ie');
  1084.         }
  1085.  
  1086.         if (isIE6) {
  1087.             loading.addClass('fancybox-ie6');
  1088.             wrap.addClass('fancybox-ie6');
  1089.  
  1090.             $('<iframe id="fancybox-hide-sel-frame" src="' + (/^https/i.test(window.location.href || '') ? 'javascript:void(false)' : 'about:blank' ) + '" scrolling="no" border="0" frameborder="0" tabindex="-1"></iframe>').prependTo(outer);
  1091.         }
  1092.     };
  1093.  
  1094.     $.fn.fancybox.defaults = {
  1095.         padding : 10,
  1096.         margin : 40,
  1097.         opacity : false,
  1098.         modal : false,
  1099.         cyclic : false,
  1100.         scrolling : 'auto', // 'auto', 'yes' or 'no'
  1101.  
  1102.         width : 560,
  1103.         height : 340,
  1104.  
  1105.         autoScale : true,
  1106.         autoDimensions : true,
  1107.         centerOnScroll : false,
  1108.  
  1109.         ajax : {},
  1110.         swf : { wmode: 'transparent' },
  1111.  
  1112.         hideOnOverlayClick : true,
  1113.         hideOnContentClick : false,
  1114.  
  1115.         overlayShow : true,
  1116.         overlayOpacity : 0.7,
  1117.         overlayColor : '#777',
  1118.  
  1119.         titleShow : true,
  1120.         titlePosition : 'float', // 'float', 'outside', 'inside' or 'over'
  1121.         titleFormat : null,
  1122.         titleFromAlt : false,
  1123.  
  1124.         transitionIn : 'fade', // 'elastic', 'fade' or 'none'
  1125.         transitionOut : 'fade', // 'elastic', 'fade' or 'none'
  1126.  
  1127.         speedIn : 300,
  1128.         speedOut : 300,
  1129.  
  1130.         changeSpeed : 300,
  1131.         changeFade : 'fast',
  1132.  
  1133.         easingIn : 'swing',
  1134.         easingOut : 'swing',
  1135.  
  1136.         showCloseButton  : true,
  1137.         showNavArrows : true,
  1138.         enableEscapeButton : true,
  1139.         enableKeyboardNav : true,
  1140.  
  1141.         onStart : function(){},
  1142.         onCancel : function(){},
  1143.         onComplete : function(){},
  1144.         onCleanup : function(){},
  1145.         onClosed : function(){},
  1146.         onError : function(){}
  1147.     };
  1148.  
  1149.     $(document).ready(function() {
  1150.         $.fancybox.init();
  1151.     });
  1152.  
  1153. })(jQuery);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement