jquery.imgbox.js
上传用户:dbstep
上传日期:2022-08-06
资源大小:2803k
文件大小:11k
源码类别:
WEB源码(ASP,PHP,...)
开发平台:
ASP/ASPX
- /*
- * imgBox - jQuery Plugin
- * Yet another lightbox alternative
- *
- * Copyright (c) 2009 jQueryGlobe
- * Examples and documentation at: http://jqueryglobe.com/article/imgbox/
- *
- * Version: 1.0.0 (21/10/2009)
- * Requires: jQuery v1.3+
- *
- * Dual licensed under the MIT and GPL licenses:
- * http://www.opensource.org/licenses/mit-license.php
- * http://www.gnu.org/licenses/gpl.html
- */
- ;(function($) {
- $.fn.fixPNG = function() {
- return this.each(function () {
- var image = $(this).css('backgroundImage');
- if (image.match(/^url(["']?(.*.png)["']?)$/i)) {
- image = RegExp.$1;
- $(this).css({
- 'backgroundImage': 'none',
- 'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=" + ($(this).css('backgroundRepeat') == 'no-repeat' ? 'crop' : 'scale') + ", src='" + image + "')"
- }).each(function () {
- var position = $(this).css('position');
- if (position != 'absolute' && position != 'relative')
- $(this).css('position', 'relative');
- });
- }
- });
- };
- var elem, opts, preloader, orig_pos, final_pos, busy = false, nr, zindex = 90, titleh = 0, shadow = 20, margin = 20, fx = $.extend($('<div/>')[0], { prop: 0 });
- $.fn.imgbox = function(settings) {
- return this.unbind('click.pb').bind('click.pb', function() {
- $.imgbox( $(this), settings );
- return false;
- });
- };
- $.imgbox = function(e, o) {
- if (busy) {
- return false;
- }
- elem = e;
- opts = $.extend({}, $.fn.imgbox.defaults, o);
- nr = jQuery.data(elem[0]);
- if ($('#imgbox-wrap-' + nr).length) {
- zoomOut();
- return false;
- }
- hideActivity();
- if (opts.overlayShow) {
- $('#imgbox-overlay')
- .unbind().stop().hide()
- .css({
- 'height' : $(document).height(),
- 'opacity' : opts.overlayOpacity
- })
- .show();
- }
- preloader = new Image;
- preloader.src = $(elem).attr('href');
- if (preloader.complete == false) {
- showActivity();
- $(preloader).unbind().one('load', function() {
- hideActivity();
- zoomIn();
- });
- } else {
- zoomIn();
- }
- };
- $.fn.imgbox.defaults = {
- padding : 10,
- alignment : 'auto', // auto OR center
- allowMultiple : true,
- autoScale : true,
- speedIn : 500,
- speedOut : 500,
- easingIn : 'swing',
- easingOut : 'swing',
- zoomOpacity : false,
- overlayShow : false,
- overlayOpacity : 0.5,
- hideOnOverlayClick : true,
- hideOnContentClick : true
- };
- function zoomIn() {
- busy = true;
- if (opts.allowMultiple == false) {
- $('.imgbox-wrap').remove();
- $('.imgbox-bg-wrap').remove();
- } else {
- zindex = zindex + 2;
- }
- final_pos = getZoomTo();
- var title = $(elem).attr('title') || '';
- $('<div id="imgbox-wrap-' + nr + '" class="imgbox-wrap"></div>')
- .css({
- 'z-index' : zindex,
- 'padding' : opts.padding
- })
- .append('<img class="imgbox-img" id="imgbox-img-' + nr + '" src="' + preloader.src + '" alt="' + title + '" />')
- .appendTo('body');
- $('<div id="imgbox-bg-' + nr + '" class="imgbox-bg-wrap"><div class="imgbox-bg imgbox-bg-n"/><div class="imgbox-bg imgbox-bg-ne"/><div class="imgbox-bg imgbox-bg-e"/><div class="imgbox-bg imgbox-bg-se"/><div class="imgbox-bg imgbox-bg-s"/><div class="imgbox-bg imgbox-bg-sw"/><div class="imgbox-bg imgbox-bg-w"/><div class="imgbox-bg imgbox-bg-nw"/></div>').appendTo('body');
- if ($.browser.msie && parseInt($.browser.version.substr(0, 1)) < 7) {
- $('#imgbox-bg-' + nr).find('.imgbox-bg').fixPNG();
- }
- titleh = 0;
- if (title.length > 0) {
- $('<div id="imgbox-tmp" class="imgbox-title" />').html(title).css('width', final_pos.width).appendTo('body');
- titleh = $('#imgbox-tmp').outerHeight();
- final_pos.height += titleh;
- final_pos.top -= titleh > margin + shadow ? margin : margin * 0.5;
- $('#imgbox-tmp').remove();
- $('#imgbox-wrap-' + nr).append('<div class="imgbox-title">' + title + '</div>');
- }
- if (opts.speedIn > 0) {
- var pos = getThumbPos();
- orig_pos = {
- top : pos.top - opts.padding,
- left : pos.left - opts.padding,
- width : pos.width,
- height : pos.height
- };
- $('#imgbox-wrap-' + nr).css(orig_pos).show();
- $('#imgbox-bg-' + nr).css({
- top : orig_pos.top,
- left : orig_pos.left,
- width : orig_pos.width + (opts.padding * 2),
- height : orig_pos.height + (opts.padding * 2),
- 'z-index' : zindex - 1
- }).show();
- if (opts.zoomOpacity) {
- final_pos.opacity = 1;
- }
- fx.prop = 0;
- $(fx).animate({ prop: 1 }, {
- duration : opts.speedIn,
- easing : opts.easingIn,
- step : draw,
- complete : _finish
- });
- } else {
- $('#imgbox-img-' + nr ).css('height', (final_pos.height - titleh) + 'px');
- $('#imgbox-wrap-' + nr).css(final_pos).fadeIn('normal', _finish );
- $('#imgbox-bg-' + nr).css({
- top : final_pos.top,
- left : final_pos.left,
- width : final_pos.width + (opts.padding * 2),
- height : final_pos.height + (opts.padding * 2),
- 'z-index' : zindex - 1
- }).fadeIn('normal');
- }
- };
- function draw(pos) {
- var width = Math.round(orig_pos.width + (final_pos.width - orig_pos.width) * pos);
- var height = Math.round(orig_pos.height + (final_pos.height - orig_pos.height) * pos);
- var top = Math.round(orig_pos.top + (final_pos.top - orig_pos.top) * pos);
- var left = Math.round(orig_pos.left + (final_pos.left - orig_pos.left) * pos);
- $('#imgbox-wrap-' + nr).css({
- 'width' : width + 'px',
- 'height' : height + 'px',
- 'top' : top + 'px',
- 'left' : left + 'px'
- });
- $('#imgbox-bg-' + nr).css({
- 'width' : Math.round(width + opts.padding * 2 ) + 'px',
- 'height' : Math.round(height + opts.padding * 2 ) + 'px',
- 'top' : top + 'px',
- 'left' : left + 'px'
- });
- $('#imgbox-img-' + nr ).css('height', Math.round( height - ( ( ((height - Math.min(orig_pos.height, final_pos.height)) * 100) / (Math.max(orig_pos.height - final_pos.height, final_pos.height - orig_pos.height) ) * titleh / 100))) + 'px');
- if (typeof final_pos.opacity !== 'undefined') {
- var opacity = pos < 0.3 ? 0.3 : pos;
- $('#imgbox-wrap-' + nr).css('opacity', opacity);
- if ($.browser.msie == false) {
- $('#imgbox-bg-' + nr).css('opacity', opacity);
- }
- }
- };
- function _finish() {
- if (opts.overlayShow && opts.hideOnOverlayClick) {
- $('#imgbox-overlay').bind('click', {elem: elem, nr : nr, opts : opts, titleh : titleh}, clickHandler);
- }
- $('#imgbox-wrap-' + nr)
- .css('filter', '')
- .bind('click', {elem: elem, nr : nr, opts : opts, titleh : titleh}, clickHandler)
- .append('<a href="javascript:;" class="imgbox-close"></a>')
- .children('.imgbox-title')
- .show();
- if ($.browser.msie && parseInt($.browser.version.substr(0, 1)) < 7) {
- $('#imgbox-wrap-' + nr).find('.imgbox-close').fixPNG();
- }
- busy = false;
- };
- function clickHandler(e) {
- e.stopPropagation();
- if (e.target.className == 'imgbox-close' || (e.data.opts.hideOnOverlayClick && e.target.id == 'imgbox-overlay') || (e.data.opts.hideOnContentClick && e.target.className == 'imgbox-img' && ($(this).css('z-index') == zindex || $('.imgbox-img').length == 1))) {
- elem = e.data.elem;
- nr = e.data.nr;
- opts = e.data.opts;
- titleh = e.data.titleh;
- zoomOut();
- } else if ($(this).css('z-index') < zindex) {
- $(this).next('.imgbox-bg-wrap').css('z-index', ++zindex);
- $(this).css('z-index', ++zindex);
- }
- };
- function zoomOut() {
- if (busy) {
- return false;
- }
- busy = true;
- $('#imgbox-wrap-' + nr)
- .children('.imgbox-close, .imgbox-title')
- .remove();
- if (opts.speedOut > 0) {
- var pos = getThumbPos();
- orig_pos = {
- top : pos.top - opts.padding,
- left : pos.left - opts.padding,
- width : pos.width,
- height : pos.height
- };
- var pos = $('#imgbox-wrap-' + nr).position();
- final_pos = {
- top : pos.top ,
- left : pos.left,
- width : $('#imgbox-wrap-' + nr).width(),
- height : $('#imgbox-wrap-' + nr).height()
- };
- if (opts.zoomOpacity) {
- final_pos.opacity = 0;
- }
- setTimeout(function() {
- $('#imgbox-wrap-' + nr).css('z-index', 90);
- $('#imgbox-bg-' + nr).css('z-index', 90);
- }, opts.speedOut * 0.5);
- fx.prop = 1;
- $(fx).animate({ prop: 0 }, {
- duration : opts.speedIn,
- easing : opts.easingIn,
- step : draw,
- complete : _clean_up
- });
- } else {
- if (opts.overlayShow) {
- _clean_up();
- } else {
- $('#imgbox-bg-' + nr).fadeOut('fast');
- $('#imgbox-wrap-' + nr).fadeOut('fast', _clean_up );
- }
- }
- };
- function _clean_up() {
- $('#imgbox-bg-' + nr).stop().remove();
- $('#imgbox-wrap-' + nr).remove();
- zindex = zindex > 90 ? zindex - 2 : 90;
- if (opts.overlayShow) {
- $('#imgbox-overlay').unbind().stop().fadeOut(200);
- }
- busy = false;
- };
- function getZoomTo() {
- var wiew = getViewport();
- var to = {width : preloader.width, height : preloader.height};
- var horizontal_space = (opts.padding + shadow + margin ) * 2;
- var vertical_space = (opts.padding + shadow + margin ) * 2;
- if (opts.autoScale && (to.width > (wiew[0] - horizontal_space) || to.height > (wiew[1] - vertical_space))) {
- var ratio = Math.min(Math.min( wiew[0] - horizontal_space, to.width) / to.width, Math.min( wiew[1] - vertical_space, to.height) / to.height);
- to.width = Math.round(ratio * to.width);
- to.height = Math.round(ratio * to.height);
- }
- if (opts.alignment == 'center') {
- to.top = wiew[3] + ((wiew[1] - to.height - opts.padding * 2) * 0.5);
- to.left = wiew[2] + ((wiew[0] - to.width - opts.padding * 2) * 0.5);
- } else {
- var pos = getThumbPos();
- to.top = pos.top - ( ( to.height - pos.height ) * 0.5) - opts.padding ;
- to.left = pos.left - ( ( to.width - pos.width ) * 0.5) - opts.padding ;
- to.top = to.top > wiew[3] + margin + shadow ? to.top : wiew[3] + margin + shadow;
- to.left = to.left > wiew[2] + margin + shadow ? to.left : wiew[2] + margin + shadow;
- to.top = to.top > wiew[1] + wiew[3] - ( to.height + vertical_space ) ? wiew[1] + wiew[3] - ( to.height + ( margin + shadow + opts.padding * 2 ) ) : to.top;
- to.left = to.left > wiew[0] + wiew[2] - ( to.width + horizontal_space ) ? wiew[0] + wiew[2] - ( to.width + ( margin + shadow + opts.padding * 2 ) ) : to.left;
- }
- if ( opts.autoScale == false ) {
- to.top = to.top > wiew[3] + shadow + margin ? to.top : wiew[3] + shadow + margin;
- to.left = to.left > wiew[2] + shadow + margin ? to.left : wiew[2] + shadow + margin;
- }
- to.top = parseInt(to.top);
- to.left = parseInt(to.left);
- return to;
- };
- function getViewport() {
- return [ $(window).width(), $(window).height(), $(document).scrollLeft(), $(document).scrollTop() ];
- };
- function getThumbPos() {
- var thumb = $(elem).find('img').eq(0);
- var pos = thumb.offset();
- pos.top += parseFloat( thumb.css('paddingTop') );
- pos.left += parseFloat( thumb.css('paddingLeft') );
- pos.top += parseFloat( thumb.css('border-top-width') );
- pos.left += parseFloat( thumb.css('border-left-width') );
- pos.width = thumb.width();
- pos.height = thumb.height();
- return pos;
- };
- function showActivity() {
- var pos = getThumbPos( elem );
- $('#imgbox-loading').css(pos).show();
- };
- function hideActivity() {
- $(preloader).unbind();
- $('#imgbox-loading').hide();
- };
- function cancelLoading() {
- hideActivity();
- if (opts.overlayShow) {
- $('#imgbox-overlay').unbind().stop().fadeOut(200);
- }
- };
- function init() {
- $('<div id="imgbox-loading"><div></div></div><div id="imgbox-overlay"></div>').appendTo('body');
- $('#imgbox-loading')
- .click(cancelLoading)
- .find('div')
- .css('opacity', 0.4);
- };
- $(document).ready(function() {
- init();
- });
- })(jQuery);