/* * FancyBox - simple jQuery plugin for fancy image zooming * Examples and documentation at: http://fancy.klade.lv/ * Version: 1.2.0-beta-3 (11/02/2009) * Copyright (c) 2009 Janis Skarnelis * Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php * Requires: jQuery v1.3.1 or later */ ;(function($) { function log() { if (window.console && window.console.log) window.console.log(arguments[0]); }; var elem, opts, busy = false, imagePreloader = new Image, loadingTimer, loadingFrame = 1, imageRegExp = '[^\.]\.(jpg|jpeg|png|tiff|gif|bmp)\s*$'; var isIE6 = ($.browser.msie && parseInt($.browser.version.substr(0,1)) < 7); $.fn.fancybox = function(settings) { settings = $.extend({}, $.fn.fancybox.defaults, settings); var matchedGroup = this; function _initialize() { elem = this; opts = settings; _start(); return false; }; function _start() { if (busy) return; opts.itemArray = []; opts.itemCurrent = 0; if (settings.itemArray.length > 0) { opts.itemArray = settings.itemArray; } else if ( matchedGroup.length == 1 ) { var item = { href: elem.href, title: elem.title, target: elem.target }; if (opts.zoomSpeedIn > 0 || opts.zoomSpeedOut > 0) { if ($(elem).children("img:first").length) { var context = $(elem).children("img:first"); item.orig = { 'width': context.width(), 'height': context.height(), 'pos': $.fn.fancybox.getPosition(context) }; } } opts.itemArray.push( item ); } else { var item = {}; for (var i = 0; i < matchedGroup.length; i++) { item = {href: matchedGroup[i].href, title: matchedGroup[i].title}; if (opts.zoomSpeedIn > 0 || opts.zoomSpeedOut > 0) { if ($(matchedGroup[i]).children("img:first").length) { var context = $(matchedGroup[i]).children("img:first"); item.orig = { 'width': context.width(), 'height': context.height(), 'pos': $.fn.fancybox.getPosition(context) }; } } opts.itemArray.push( item ); } } while ( opts.itemArray[ opts.itemCurrent ].href != elem.href ) { opts.itemCurrent++; } if (opts.overlayShow) { if (isIE6) { $('embed, object, select').css({ 'visibility' : 'hidden'}); } $("#fancy_overlay").css('opacity', opts.overlayOpacity).show(); } _change_item(); }; function _change_item() { $("#fancy_right, #fancy_left, #fancy_close, #fancy_title").hide(); var href = opts.itemArray[ opts.itemCurrent ].href; if (href.match(/#/)) { var target = window.location.href.split('#')[0]; target = href.replace(target, ''); _set_content('
' + $(target).html() + '
', opts.frameWidth, opts.frameHeight); } else if (href.match(imageRegExp)) { imagePreloader = new Image; imagePreloader.src = href; if (imagePreloader.complete) { _proceed_image(); } else { $.fn.fancybox.showLoading(); $(imagePreloader).unbind().bind('load', function() { $("#fancy_loading").hide(); _proceed_image(); }); } /* } else if ( href.match("iframe")) { $.get(href, function(data) { _set_content( '
' + data + '
', opts.frameWidth, opts.frameHeight ); }); */ } else { _set_content('', opts.frameWidth, opts.frameHeight); } }; function _proceed_image() { if (opts.imageScale) { var w = $.fn.fancybox.getViewport(); var r = Math.min(Math.min(w[0], imagePreloader.width) / imagePreloader.width, Math.min(w[1], imagePreloader.height) / imagePreloader.height); var ww = Math.round(r * imagePreloader.width) - 50; var hh = Math.round(r * imagePreloader.height) - 100; } else { var ww = imagePreloader.width; var hh = imagePreloader.height; } _set_content('', ww, hh); _preload_neighbor_images(); }; function _preload_neighbor_images() { if ( (opts.itemArray.length -1) > opts.itemCurrent ) { var href = opts.itemArray[opts.itemCurrent + 1].href; if (href.match(imageRegExp)) { objNext = new Image(); objNext.src = href; } } if ( opts.itemCurrent > 0 ) { var href = opts.itemArray[opts.itemCurrent -1].href; if (href.match(imageRegExp)) { objNext = new Image(); objNext.src = href; } } }; function _set_content(value, ww, hh) { var w = $.fn.fancybox.getViewport(); ww += 30; hh += 40; var itemLeft = w[2] + Math.round((w[0] - ww) / 2) - 20; var itemTop = w[3] + Math.round((w[1] - hh) / 2) - 20; var itemOpts = { 'left': itemLeft, 'top': itemTop, 'width': ww + 'px', 'height': hh + 'px' } if ($("#fancy_outer").is(":visible")) { if (ww == $("#fancy_content").width() && hh == $("#fancy_content").height()) { $("#fancy_content").fadeOut("fast", function() { $("#fancy_content").empty().append($(value)).fadeIn("fast", function() { _finish(); }); }); } else { $("#fancy_content").fadeOut("fast", function() { $("#fancy_content").empty(); $("#fancy_outer").animate(itemOpts, opts.zoomSpeedChange, opts.zoomEasing, function() { $("#fancy_content").append($(value)).fadeIn("fast", function() { _finish(); }); }); }); } } else { if (opts.zoomSpeedIn > 0 && opts.itemArray[opts.itemCurrent].orig !== undefined) { $("#fancy_content").empty().append($(value)); $("#fancy_outer").css({ 'left': (opts.itemArray[opts.itemCurrent].orig.pos.left - 18) + 'px', 'top': (opts.itemArray[opts.itemCurrent].orig.pos.top - 18) + 'px', 'width': opts.itemArray[opts.itemCurrent].orig.width + 'px', 'height': opts.itemArray[opts.itemCurrent].orig.height + 'px' }); busy = true; $("#fancy_outer").animate(itemOpts, opts.zoomSpeedIn, opts.zoomEasing, function() { _finish(); }); } else { $("#fancy_content").empty().append($(value)); busy = true; $("#fancy_outer").css(itemOpts).fadeIn("normal", function() { _finish(); }); } } }; function _set_navigation() { if ( opts.itemCurrent != 0 ) { $("#fancy_left").unbind().bind("click", function(e) { e.stopPropagation(); opts.itemCurrent--; _change_item(); return false; }).show(); } else { $("#fancy_left").hide(); } if ( opts.itemCurrent != ( opts.itemArray.length -1 ) ) { $("#fancy_right").unbind().bind("click", function(e) { e.stopPropagation(); opts.itemCurrent++; _change_item(); return false; }).show(); } else { $("#fancy_right").hide(); } }; function _finish() { _set_navigation(); $(document).keydown(function(e) { if (e.keyCode == 27) { $.fn.fancybox.close(); $(document).unbind("keydown"); } else if(e.keyCode == 37 && opts.itemCurrent != 0) { opts.itemCurrent--; _change_item(); $(document).unbind("keydown"); } else if(e.keyCode == 39 && opts.itemCurrent != (opts.itemArray.length - 1)) { opts.itemCurrent++; _change_item(); $(document).unbind("keydown"); } }); $(window).resize(function() { $.fn.fancybox.scrollBox(); }); if (opts.centerOnScroll) { $(window).scroll($.fn.fancybox.scrollBox); } else { $("div#fancy_outer").css("position", "absolute"); } if (opts.hideOnContentClick) { $("#fancy_wrap").click($.fn.fancybox.close); } else { $("#fancy_wrap").unbind(); } $("#fancy_close").show(); if (opts.itemArray[ opts.itemCurrent ].title !== undefined && opts.itemArray[ opts.itemCurrent ].title.length > 0) { $('#fancy_title div').html(opts.itemArray[ opts.itemCurrent ].title); $('#fancy_title').show(); } $.fn.fancybox.scrollBox(); busy = false; }; return this.unbind('click').click(_initialize); }; $.fn.fancybox.scrollBox = function(el) { var pos = $.fn.fancybox.getViewport(); $("#fancy_outer").css('left', (pos[2] + Math.round((pos[0] - $("#fancy_outer").width()) / 2) - 20)); $("#fancy_outer").css('top', (pos[3] + Math.round((pos[1] - $("#fancy_outer").height()) / 2) - 20)); }; $.fn.fancybox.getNumeric = function(el, prop) { return parseInt($.curCSS(el.jquery?el[0]:el,prop,true))||0; }; $.fn.fancybox.getPosition = function(el) { var pos = el.offset(); pos.top += $.fn.fancybox.getNumeric(el, 'paddingTop'); pos.top += $.fn.fancybox.getNumeric(el, 'borderTopWidth'); pos.left += $.fn.fancybox.getNumeric(el, 'paddingLeft'); pos.left += $.fn.fancybox.getNumeric(el, 'borderLeftWidth'); return pos; }; $.fn.fancybox.showIframe = function() { $("#fancy_loading").hide(); $("#fancy_frame").show(); }; $.fn.fancybox.getViewport = function() { return [$(window).width(), $(window).height(), $(document).scrollLeft(), $(document).scrollTop() ]; }; $.fn.fancybox.animateLoading = function() { if (!$("#fancy_loading").is(':visible')){ clearInterval(loadingTimer); return; } $("#fancy_loading > div").css('top', (loadingFrame * -40) + 'px'); loadingFrame = (loadingFrame + 1) % 12; }; $.fn.fancybox.showLoading = function() { clearInterval(loadingTimer); var pos = $.fn.fancybox.getViewport(); $("#fancy_loading").css({'left': ((pos[0] - 40) / 2 + pos[2]), 'top': ((pos[1] - 40) / 2 + pos[3])}).show(); $("#fancy_loading").bind('click', $.fn.fancybox.close); loadingTimer = setInterval($.fn.fancybox.animateLoading, 66); }; $.fn.fancybox.close = function() { $(imagePreloader).unbind(); $("#fancy_close, #fancy_loading, #fancy_left, #fancy_right, #fancy_title").hide(); busy = true; if ($("#fancy_outer").is(":visible") !== false) { if (opts.zoomSpeedOut > 0 && opts.itemArray[opts.itemCurrent].orig !== undefined) { $("#fancy_outer").animate({ 'left': (opts.itemArray[opts.itemCurrent].orig.pos.left - 18) + 'px', 'top': (opts.itemArray[opts.itemCurrent].orig.pos.top - 18) + 'px', 'width': opts.itemArray[opts.itemCurrent].orig.width + 'px', 'height': opts.itemArray[opts.itemCurrent].orig.height + 'px' }, opts.zoomSpeedOut, opts.zoomEasing, function() { busy = false; $("#fancy_overlay, #fancy_outer").hide(); if (isIE6) { $('embed, object, select').css({ 'visibility' : 'visible'}); } }); } else { $("#fancy_outer").stop().fadeOut("fast", function() { busy = false; $("#fancy_overlay, #fancy_outer").hide(); if (isIE6) { $('embed, object, select').css({ 'visibility' : 'visible'}); } }); } } else { $("#fancy_close, #fancy_loading, #fancy_left, #fancy_right, #fancy_overlay").hide(); } return false; }; $.fn.fancybox.build = function() { var html = ''; html += '
'; html += '
'; html += '
'; html += '
'; html += '
'; html += '
'; html += '
'; html += '
'; html += ''; html += '
'; html += '
'; html += '
'; html += '
'; $(html).appendTo("body"); $('
').appendTo('#fancy_title'); if (isIE6) { $("#fancy_inner").prepend(''); } if (jQuery.fn.pngFix) $(document).pngFix(); $("#fancy_overlay, #fancy_bigIframe, #fancy_loading, #fancy_close").bind("click", $.fn.fancybox.close); }; $.fn.fancybox.defaults = { imageScale : true, zoomOpacity : true, zoomSpeedIn : 0, zoomSpeedOut : 0, zoomSpeedChange : 300, zoomEasing : 'easeOutBack', frameWidth : 425, frameHeight : 355, overlayShow : true, overlayOpacity : 0.3, hideOnContentClick : false, centerOnScroll : true, itemArray : [] }; $(document).ready(function() { $.fn.fancybox.build(); }); })(jQuery);