2 * FancyBox - jQuery Plugin
3 * simple and fancy lightbox alternative
5 * Copyright (c) 2009 Janis Skarnelis
6 * Examples and documentation at: http://fancybox.net
8 * Version: 1.2.6 (16/11/2009)
9 * Requires: jQuery v1.3+
11 * Dual licensed under the MIT and GPL licenses:
12 * http://www.opensource.org/licenses/mit-license.php
13 * http://www.gnu.org/licenses/gpl.html
17 $.fn.fixPNG = function() {
18 return this.each(function () {
19 var image = $(this).css('backgroundImage');
21 if (image.match(/^url\(["']?(.*\.png)["']?\)$/i)) {
24 'backgroundImage': 'none',
25 'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=" + ($(this).css('backgroundRepeat') == 'no-repeat' ? 'crop' : 'scale') + ", src='" + image + "')"
27 var position = $(this).css('position');
28 if (position != 'absolute' && position != 'relative')
29 $(this).css('position', 'relative');
35 var elem, opts, busy = false, imagePreloader = new Image, loadingTimer, loadingFrame = 1, imageRegExp = /\.(jpg|gif|png|bmp|jpeg)(.*)?$/i;
36 var ieQuirks = null, IE6 = false, oldIE = false;
38 $.fn.fancybox = function(o) {
39 var settings = $.extend({}, $.fn.fancybox.defaults, o);
40 var matchedGroup = this;
42 function _initialize() {
44 opts = $.extend({}, settings);
54 if ($.isFunction(opts.callbackOnStart)) {
55 opts.callbackOnStart();
61 if (settings.itemArray.length > 0) {
62 opts.itemArray = settings.itemArray;
67 if (!elem.rel || elem.rel == '') {
68 var item = {href: elem.href, title: elem.title};
70 if ($(elem).children("img:first").length) {
71 item.orig = $(elem).children("img:first");
76 if (item.title == '' || typeof item.title == 'undefined') {
77 item.title = item.orig.attr('alt');
80 opts.itemArray.push( item );
83 var subGroup = $(matchedGroup).filter("a[rel=" + elem.rel + "]");
86 for (var i = 0; i < subGroup.length; i++) {
87 item = {href: subGroup[i].href, title: subGroup[i].title};
89 if ($(subGroup[i]).children("img:first").length) {
90 item.orig = $(subGroup[i]).children("img:first");
92 item.orig = $(subGroup[i]);
95 if (item.title == '' || typeof item.title == 'undefined') {
96 item.title = item.orig.attr('alt');
99 opts.itemArray.push( item );
104 while ( opts.itemArray[ opts.itemCurrent ].href != elem.href ) {
108 if (opts.overlayShow) {
110 $('embed, object, select').css('visibility', 'hidden');
111 $("#fancy_overlay").css('height', $(document).height());
114 $("#fancy_overlay").css({
115 'background-color' : opts.overlayColor,
116 'opacity' : opts.overlayOpacity
120 $(window).bind("resize.fb scroll.fb", $.fn.fancybox.scrollBox);
125 function _change_item() {
126 $("#fancy_right, #fancy_left, #fancy_close, #fancy_title").hide();
128 var href = opts.itemArray[ opts.itemCurrent ].href;
130 if (href.match("iframe") || elem.className.indexOf("iframe") >= 0) {
131 $.fn.fancybox.showLoading();
132 _set_content('<iframe id="fancy_frame" onload="jQuery.fn.fancybox.showIframe()" name="fancy_iframe' + Math.round(Math.random()*1000) + '" frameborder="0" hspace="0" src="' + href + '"></iframe>', opts.frameWidth, opts.frameHeight);
134 } else if (href.match(/#/)) {
135 var target = window.location.href.split('#')[0]; target = href.replace(target, ''); target = target.substr(target.indexOf('#'));
137 _set_content('<div id="fancy_div">' + $(target).html() + '</div>', opts.frameWidth, opts.frameHeight);
139 } else if (href.match(imageRegExp)) {
140 imagePreloader = new Image; imagePreloader.src = href;
142 if (imagePreloader.complete) {
146 $.fn.fancybox.showLoading();
147 $(imagePreloader).unbind().bind('load', function() {
148 $("#fancy_loading").hide();
154 $.fn.fancybox.showLoading();
155 $.get(href, function(data) {
156 $("#fancy_loading").hide();
157 _set_content( '<div id="fancy_ajax">' + data + '</div>', opts.frameWidth, opts.frameHeight );
162 function _proceed_image() {
163 var width = imagePreloader.width;
164 var height = imagePreloader.height;
166 var horizontal_space = (opts.padding * 2) + 40;
167 var vertical_space = (opts.padding * 2) + 60;
169 var w = $.fn.fancybox.getViewport();
171 if (opts.imageScale && (width > (w[0] - horizontal_space) || height > (w[1] - vertical_space))) {
172 var ratio = Math.min(Math.min(w[0] - horizontal_space, width) / width, Math.min(w[1] - vertical_space, height) / height);
174 width = Math.round(ratio * width);
175 height = Math.round(ratio * height);
178 _set_content('<img alt="" id="fancy_img" src="' + imagePreloader.src + '" />', width, height);
181 function _preload_neighbor_images() {
182 if ((opts.itemArray.length -1) > opts.itemCurrent) {
183 var href = opts.itemArray[opts.itemCurrent + 1].href || false;
185 if (href && href.match(imageRegExp)) {
186 objNext = new Image();
191 if (opts.itemCurrent > 0) {
192 var href = opts.itemArray[opts.itemCurrent -1].href || false;
194 if (href && href.match(imageRegExp)) {
195 objNext = new Image();
201 function _set_content(value, width, height) {
204 var pad = opts.padding;
206 if (oldIE || ieQuirks) {
207 $("#fancy_content")[0].style.removeExpression("height");
208 $("#fancy_content")[0].style.removeExpression("width");
215 $("#fancy_content").css({
217 'right' : pad + 'px',
218 'bottom' : pad + 'px',
224 if (oldIE || ieQuirks) {
225 $("#fancy_content")[0].style.setExpression('height', '(this.parentNode.clientHeight - ' + pad * 2 + ')');
226 $("#fancy_content")[0].style.setExpression('width', '(this.parentNode.clientWidth - ' + pad * 2 + ')');
229 $("#fancy_content").css({
239 if ($("#fancy_outer").is(":visible") && width == $("#fancy_outer").width() && height == $("#fancy_outer").height()) {
240 $("#fancy_content").fadeOut('fast', function() {
241 $("#fancy_content").empty().append($(value)).fadeIn("normal", function() {
249 var w = $.fn.fancybox.getViewport();
251 var itemTop = (height + 60) > w[1] ? w[3] : (w[3] + Math.round((w[1] - height - 60) * 0.5));
252 var itemLeft = (width + 40) > w[0] ? w[2] : (w[2] + Math.round((w[0] - width - 40) * 0.5));
257 'width': width + 'px',
258 'height': height + 'px'
261 if ($("#fancy_outer").is(":visible")) {
262 $("#fancy_content").fadeOut("normal", function() {
263 $("#fancy_content").empty();
264 $("#fancy_outer").animate(itemOpts, opts.zoomSpeedChange, opts.easingChange, function() {
265 $("#fancy_content").append($(value)).fadeIn("normal", function() {
273 if (opts.zoomSpeedIn > 0 && opts.itemArray[opts.itemCurrent].orig !== undefined) {
274 $("#fancy_content").empty().append($(value));
276 var orig_item = opts.itemArray[opts.itemCurrent].orig;
277 var orig_pos = $.fn.fancybox.getPosition(orig_item);
279 $("#fancy_outer").css({
280 'left': (orig_pos.left - 20 - opts.padding) + 'px',
281 'top': (orig_pos.top - 20 - opts.padding) + 'px',
282 'width': $(orig_item).width() + (opts.padding * 2),
283 'height': $(orig_item).height() + (opts.padding * 2)
286 if (opts.zoomOpacity) {
287 itemOpts.opacity = 'show';
290 $("#fancy_outer").animate(itemOpts, opts.zoomSpeedIn, opts.easingIn, function() {
296 $("#fancy_content").hide().empty().append($(value)).show();
297 $("#fancy_outer").css(itemOpts).fadeIn("normal", function() {
304 function _set_navigation() {
305 if (opts.itemCurrent !== 0) {
306 $("#fancy_left, #fancy_left_ico").unbind().bind("click", function(e) {
315 $("#fancy_left").show();
318 if (opts.itemCurrent != ( opts.itemArray.length -1)) {
319 $("#fancy_right, #fancy_right_ico").unbind().bind("click", function(e) {
328 $("#fancy_right").show();
333 if ($.browser.msie) {
334 $("#fancy_content")[0].style.removeAttribute('filter');
335 $("#fancy_outer")[0].style.removeAttribute('filter');
340 _preload_neighbor_images();
342 $(document).bind("keydown.fb", function(e) {
343 if (e.keyCode == 27 && opts.enableEscapeButton) {
344 $.fn.fancybox.close();
346 } else if(e.keyCode == 37 && opts.itemCurrent !== 0) {
347 $(document).unbind("keydown.fb");
352 } else if(e.keyCode == 39 && opts.itemCurrent != (opts.itemArray.length - 1)) {
353 $(document).unbind("keydown.fb");
359 if (opts.hideOnContentClick) {
360 $("#fancy_content").click($.fn.fancybox.close);
363 if (opts.overlayShow && opts.hideOnOverlayClick) {
364 $("#fancy_overlay").bind("click", $.fn.fancybox.close);
367 if (opts.showCloseButton) {
368 $("#fancy_close").bind("click", $.fn.fancybox.close).show();
371 if (typeof opts.itemArray[ opts.itemCurrent ].title !== 'undefined' && opts.itemArray[ opts.itemCurrent ].title.length > 0) {
372 var pos = $("#fancy_outer").position();
374 $('#fancy_title div').text( opts.itemArray[ opts.itemCurrent ].title).html();
376 $('#fancy_title').css({
377 'top' : pos.top + $("#fancy_outer").outerHeight() - 32,
378 'left' : pos.left + (($("#fancy_outer").outerWidth() * 0.5) - ($('#fancy_title').width() * 0.5))
382 if (opts.overlayShow && IE6) {
383 $('embed, object, select', $('#fancy_content')).css('visibility', 'visible');
386 if ($.isFunction(opts.callbackOnShow)) {
387 opts.callbackOnShow( opts.itemArray[ opts.itemCurrent ] );
390 if ($.browser.msie) {
391 $("#fancy_outer")[0].style.removeAttribute('filter');
392 $("#fancy_content")[0].style.removeAttribute('filter');
398 return this.unbind('click.fb').bind('click.fb', _initialize);
401 $.fn.fancybox.scrollBox = function() {
402 var w = $.fn.fancybox.getViewport();
404 if (opts.centerOnScroll && $("#fancy_outer").is(':visible')) {
405 var ow = $("#fancy_outer").outerWidth();
406 var oh = $("#fancy_outer").outerHeight();
409 'top' : (oh > w[1] ? w[3] : w[3] + Math.round((w[1] - oh) * 0.5)),
410 'left' : (ow > w[0] ? w[2] : w[2] + Math.round((w[0] - ow) * 0.5))
413 $("#fancy_outer").css(pos);
415 $('#fancy_title').css({
416 'top' : pos.top + oh - 32,
417 'left' : pos.left + ((ow * 0.5) - ($('#fancy_title').width() * 0.5))
421 if (IE6 && $("#fancy_overlay").is(':visible')) {
422 $("#fancy_overlay").css({
423 'height' : $(document).height()
427 if ($("#fancy_loading").is(':visible')) {
428 $("#fancy_loading").css({'left': ((w[0] - 40) * 0.5 + w[2]), 'top': ((w[1] - 40) * 0.5 + w[3])});
432 $.fn.fancybox.getNumeric = function(el, prop) {
433 return parseInt($.curCSS(el.jquery?el[0]:el,prop,true))||0;
436 $.fn.fancybox.getPosition = function(el) {
437 var pos = el.offset();
439 pos.top += $.fn.fancybox.getNumeric(el, 'paddingTop');
440 pos.top += $.fn.fancybox.getNumeric(el, 'borderTopWidth');
442 pos.left += $.fn.fancybox.getNumeric(el, 'paddingLeft');
443 pos.left += $.fn.fancybox.getNumeric(el, 'borderLeftWidth');
448 $.fn.fancybox.showIframe = function() {
449 $("#fancy_loading").hide();
450 $("#fancy_frame").show();
453 $.fn.fancybox.getViewport = function() {
454 return [$(window).width(), $(window).height(), $(document).scrollLeft(), $(document).scrollTop() ];
457 $.fn.fancybox.animateLoading = function() {
458 if (!$("#fancy_loading").is(':visible')){
459 clearInterval(loadingTimer);
463 $("#fancy_loading > div").css('top', (loadingFrame * -40) + 'px');
465 loadingFrame = (loadingFrame + 1) % 12;
468 $.fn.fancybox.showLoading = function() {
469 clearInterval(loadingTimer);
471 var w = $.fn.fancybox.getViewport();
473 $("#fancy_loading").css({'left': ((w[0] - 40) * 0.5 + w[2]), 'top': ((w[1] - 40) * 0.5 + w[3])}).show();
474 $("#fancy_loading").bind('click', $.fn.fancybox.close);
476 loadingTimer = setInterval($.fn.fancybox.animateLoading, 66);
479 $.fn.fancybox.close = function() {
482 $(imagePreloader).unbind();
484 $(document).unbind("keydown.fb");
485 $(window).unbind("resize.fb scroll.fb");
487 $("#fancy_overlay, #fancy_content, #fancy_close").unbind();
489 $("#fancy_close, #fancy_loading, #fancy_left, #fancy_right, #fancy_title").hide();
491 __cleanup = function() {
492 if ($("#fancy_overlay").is(':visible')) {
493 $("#fancy_overlay").fadeOut("fast");
496 $("#fancy_content").empty();
498 if (opts.centerOnScroll) {
499 $(window).unbind("resize.fb scroll.fb");
503 $('embed, object, select').css('visibility', 'visible');
506 if ($.isFunction(opts.callbackOnClose)) {
507 opts.callbackOnClose();
513 if ($("#fancy_outer").is(":visible") !== false) {
514 if (opts.zoomSpeedOut > 0 && opts.itemArray[opts.itemCurrent].orig !== undefined) {
515 var orig_item = opts.itemArray[opts.itemCurrent].orig;
516 var orig_pos = $.fn.fancybox.getPosition(orig_item);
519 'left': (orig_pos.left - 20 - opts.padding) + 'px',
520 'top': (orig_pos.top - 20 - opts.padding) + 'px',
521 'width': $(orig_item).width() + (opts.padding * 2),
522 'height': $(orig_item).height() + (opts.padding * 2)
525 if (opts.zoomOpacity) {
526 itemOpts.opacity = 'hide';
529 $("#fancy_outer").stop(false, true).animate(itemOpts, opts.zoomSpeedOut, opts.easingOut, __cleanup);
532 $("#fancy_outer").stop(false, true).fadeOut('fast', __cleanup);
542 $.fn.fancybox.build = function() {
545 html += '<div id="fancy_overlay"></div>';
546 html += '<div id="fancy_loading"><div></div></div>';
548 html += '<div id="fancy_outer">';
549 html += '<div id="fancy_inner">';
551 html += '<div id="fancy_close"></div>';
553 html += '<div id="fancy_bg"><div class="fancy_bg" id="fancy_bg_n"></div><div class="fancy_bg" id="fancy_bg_ne"></div><div class="fancy_bg" id="fancy_bg_e"></div><div class="fancy_bg" id="fancy_bg_se"></div><div class="fancy_bg" id="fancy_bg_s"></div><div class="fancy_bg" id="fancy_bg_sw"></div><div class="fancy_bg" id="fancy_bg_w"></div><div class="fancy_bg" id="fancy_bg_nw"></div></div>';
555 html += '<a href="javascript:;" id="fancy_left"><span class="fancy_ico" id="fancy_left_ico"></span></a><a href="javascript:;" id="fancy_right"><span class="fancy_ico" id="fancy_right_ico"></span></a>';
557 html += '<div id="fancy_content"></div>';
562 html += '<div id="fancy_title"></div>';
564 $(html).appendTo("body");
566 $('<table cellspacing="0" cellpadding="0" border="0"><tr><td class="fancy_title" id="fancy_title_left"></td><td class="fancy_title" id="fancy_title_main"><div></div></td><td class="fancy_title" id="fancy_title_right"></td></tr></table>').appendTo('#fancy_title');
570 $("div#fancy_overlay").css("position", "absolute");
571 $("#fancy_loading div, #fancy_close, .fancy_title, .fancy_ico").fixPNG();
573 $("#fancy_inner").prepend('<iframe id="fancy_bigIframe" src="javascript:false;" scrolling="no" frameborder="0"></iframe>');
575 // Get rid of the 'false' text introduced by the URL of the iframe
576 var frameDoc = $('#fancy_bigIframe')[0].contentWindow.document;
583 $.fn.fancybox.defaults = {
589 zoomSpeedChange : 300,
592 easingChange : 'swing',
596 overlayOpacity : 0.3,
597 overlayColor : '#666',
598 enableEscapeButton : true,
599 showCloseButton : true,
600 hideOnOverlayClick : true,
601 hideOnContentClick : true,
602 centerOnScroll : true,
604 callbackOnStart : null,
605 callbackOnShow : null,
606 callbackOnClose : null
609 $(document).ready(function() {
612 if ($("#fancy_outer").length < 1) {
613 $.fn.fancybox.build();