jquery.imgbox.js
上传用户:dbstep
上传日期:2022-08-06
资源大小:2803k
文件大小:11k
源码类别:

WEB源码(ASP,PHP,...)

开发平台:

ASP/ASPX

  1. /*
  2.  * imgBox - jQuery Plugin
  3.  * Yet another lightbox alternative
  4.  *
  5.  * Copyright (c) 2009 jQueryGlobe
  6.  * Examples and documentation at: http://jqueryglobe.com/article/imgbox/
  7.  * 
  8.  * Version: 1.0.0 (21/10/2009)
  9.  * Requires: jQuery v1.3+
  10.  * 
  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
  14.  */
  15. ;(function($) {
  16. $.fn.fixPNG = function() {
  17. return this.each(function () {
  18. var image = $(this).css('backgroundImage');
  19. if (image.match(/^url(["']?(.*.png)["']?)$/i)) {
  20. image = RegExp.$1;
  21. $(this).css({
  22. 'backgroundImage': 'none',
  23. 'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=" + ($(this).css('backgroundRepeat') == 'no-repeat' ? 'crop' : 'scale') + ", src='" + image + "')"
  24. }).each(function () {
  25. var position = $(this).css('position');
  26. if (position != 'absolute' && position != 'relative')
  27. $(this).css('position', 'relative');
  28. });
  29. }
  30. });
  31. };
  32. 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 });
  33. $.fn.imgbox = function(settings) {
  34. return this.unbind('click.pb').bind('click.pb', function() {
  35. $.imgbox( $(this), settings );
  36. return false;
  37. });
  38. };
  39. $.imgbox = function(e, o) {
  40. if (busy) {
  41. return false;
  42. }
  43. elem = e;
  44. opts = $.extend({}, $.fn.imgbox.defaults, o);
  45. nr = jQuery.data(elem[0]);
  46. if ($('#imgbox-wrap-' + nr).length) {
  47.     zoomOut();
  48. return false;
  49. }
  50. hideActivity();
  51. if (opts.overlayShow) {
  52. $('#imgbox-overlay')
  53. .unbind().stop().hide()
  54. .css({
  55. 'height' : $(document).height(),
  56. 'opacity' : opts.overlayOpacity
  57. })
  58. .show();
  59. }
  60. preloader = new Image;
  61. preloader.src = $(elem).attr('href');
  62. if (preloader.complete == false) {
  63. showActivity();
  64. $(preloader).unbind().one('load', function() {
  65. hideActivity();
  66. zoomIn();
  67. });
  68. } else {
  69. zoomIn();
  70. }
  71. };
  72. $.fn.imgbox.defaults = {
  73. padding : 10,
  74. alignment : 'auto', // auto OR center
  75. allowMultiple : true,
  76. autoScale : true,
  77. speedIn : 500,
  78. speedOut : 500,
  79. easingIn : 'swing',
  80. easingOut : 'swing',
  81. zoomOpacity : false,
  82. overlayShow : false,
  83. overlayOpacity : 0.5,
  84. hideOnOverlayClick : true,
  85. hideOnContentClick : true
  86. };
  87. function zoomIn() {
  88. busy = true;
  89. if (opts.allowMultiple == false) {
  90. $('.imgbox-wrap').remove();
  91. $('.imgbox-bg-wrap').remove();
  92. } else {
  93. zindex = zindex + 2;
  94. }
  95. final_pos = getZoomTo();
  96. var title = $(elem).attr('title') || '';
  97. $('<div id="imgbox-wrap-' + nr + '" class="imgbox-wrap"></div>')
  98. .css({
  99. 'z-index' : zindex,
  100. 'padding' : opts.padding
  101. })
  102. .append('<img class="imgbox-img" id="imgbox-img-' + nr + '" src="' + preloader.src + '" alt="' + title + '" />')
  103. .appendTo('body');
  104. $('<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');
  105. if ($.browser.msie && parseInt($.browser.version.substr(0, 1)) < 7) {
  106. $('#imgbox-bg-' + nr).find('.imgbox-bg').fixPNG();
  107. }
  108. titleh = 0;
  109. if (title.length > 0) {
  110. $('<div id="imgbox-tmp" class="imgbox-title" />').html(title).css('width', final_pos.width).appendTo('body');
  111. titleh = $('#imgbox-tmp').outerHeight();
  112. final_pos.height += titleh;
  113. final_pos.top -= titleh > margin + shadow ? margin : margin * 0.5;
  114. $('#imgbox-tmp').remove();
  115. $('#imgbox-wrap-' + nr).append('<div class="imgbox-title">' + title + '</div>');
  116. }
  117. if (opts.speedIn > 0) {
  118. var pos = getThumbPos();
  119. orig_pos = {
  120. top : pos.top - opts.padding,
  121. left : pos.left - opts.padding,
  122. width : pos.width,
  123. height : pos.height
  124. };
  125. $('#imgbox-wrap-' + nr).css(orig_pos).show();
  126. $('#imgbox-bg-' + nr).css({
  127. top : orig_pos.top,
  128. left : orig_pos.left,
  129. width : orig_pos.width + (opts.padding * 2),
  130. height : orig_pos.height + (opts.padding * 2),
  131. 'z-index' : zindex - 1
  132. }).show();
  133. if (opts.zoomOpacity) {
  134. final_pos.opacity = 1;
  135. }
  136.    fx.prop = 0;
  137. $(fx).animate({ prop: 1 }, {
  138.  duration : opts.speedIn,
  139.  easing : opts.easingIn,
  140.  step : draw,
  141.  complete : _finish
  142. });
  143. } else {
  144. $('#imgbox-img-' + nr ).css('height', (final_pos.height - titleh) + 'px');
  145. $('#imgbox-wrap-' + nr).css(final_pos).fadeIn('normal',  _finish );
  146. $('#imgbox-bg-' + nr).css({
  147. top : final_pos.top,
  148. left : final_pos.left,
  149. width : final_pos.width + (opts.padding * 2),
  150. height : final_pos.height + (opts.padding * 2),
  151. 'z-index' : zindex - 1
  152. }).fadeIn('normal');
  153. }
  154. };
  155. function draw(pos) {
  156. var width = Math.round(orig_pos.width + (final_pos.width - orig_pos.width) * pos);
  157. var height = Math.round(orig_pos.height + (final_pos.height - orig_pos.height) * pos);
  158. var top = Math.round(orig_pos.top + (final_pos.top - orig_pos.top) * pos);
  159. var left = Math.round(orig_pos.left + (final_pos.left - orig_pos.left) * pos);
  160. $('#imgbox-wrap-' + nr).css({
  161. 'width' : width + 'px',
  162. 'height' : height + 'px',
  163. 'top' : top + 'px',
  164. 'left' : left + 'px'
  165. });
  166. $('#imgbox-bg-' + nr).css({
  167. 'width' : Math.round(width + opts.padding * 2 ) + 'px',
  168. 'height' : Math.round(height + opts.padding * 2 ) + 'px',
  169. 'top' : top + 'px',
  170. 'left' : left + 'px'
  171. });
  172. $('#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');
  173. if (typeof final_pos.opacity !== 'undefined') {
  174. var opacity = pos < 0.3 ? 0.3 : pos;
  175. $('#imgbox-wrap-' + nr).css('opacity', opacity);
  176. if ($.browser.msie == false) {
  177. $('#imgbox-bg-' + nr).css('opacity', opacity);
  178. }
  179. }
  180. };
  181. function _finish() {
  182. if (opts.overlayShow && opts.hideOnOverlayClick) {
  183. $('#imgbox-overlay').bind('click', {elem: elem, nr : nr, opts : opts, titleh : titleh}, clickHandler);
  184. }
  185. $('#imgbox-wrap-' + nr)
  186. .css('filter', '')
  187. .bind('click', {elem: elem, nr : nr, opts : opts, titleh : titleh}, clickHandler)
  188. .append('<a href="javascript:;" class="imgbox-close"></a>')
  189. .children('.imgbox-title')
  190. .show();
  191. if ($.browser.msie && parseInt($.browser.version.substr(0, 1)) < 7) {
  192. $('#imgbox-wrap-' + nr).find('.imgbox-close').fixPNG();
  193. }
  194. busy = false;
  195. };
  196. function clickHandler(e) {
  197. e.stopPropagation();
  198. 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))) {
  199. elem = e.data.elem;
  200. nr = e.data.nr;
  201. opts = e.data.opts;
  202. titleh = e.data.titleh;
  203. zoomOut();
  204. } else if ($(this).css('z-index') < zindex) {
  205. $(this).next('.imgbox-bg-wrap').css('z-index', ++zindex);
  206. $(this).css('z-index', ++zindex);
  207. }
  208. };
  209. function zoomOut() {
  210. if (busy) {
  211. return false;
  212. }
  213. busy = true;
  214. $('#imgbox-wrap-' + nr)
  215. .children('.imgbox-close, .imgbox-title')
  216. .remove();
  217. if (opts.speedOut > 0) {
  218. var pos = getThumbPos();
  219. orig_pos = {
  220. top : pos.top - opts.padding,
  221. left : pos.left - opts.padding,
  222. width : pos.width,
  223. height : pos.height
  224. };
  225. var pos = $('#imgbox-wrap-' + nr).position();
  226. final_pos = {
  227. top : pos.top ,
  228. left : pos.left,
  229. width : $('#imgbox-wrap-' + nr).width(),
  230. height : $('#imgbox-wrap-' + nr).height()
  231. };
  232. if (opts.zoomOpacity) {
  233. final_pos.opacity = 0;
  234. }
  235. setTimeout(function() {
  236. $('#imgbox-wrap-' + nr).css('z-index', 90);
  237. $('#imgbox-bg-' + nr).css('z-index', 90);
  238.     }, opts.speedOut * 0.5);
  239.     fx.prop = 1;
  240.     $(fx).animate({ prop: 0 }, {
  241.  duration : opts.speedIn,
  242.  easing : opts.easingIn,
  243.  step : draw,
  244.  complete : _clean_up
  245. });
  246. } else {
  247. if (opts.overlayShow) {
  248. _clean_up();
  249. } else {
  250. $('#imgbox-bg-' + nr).fadeOut('fast');
  251. $('#imgbox-wrap-' + nr).fadeOut('fast', _clean_up );
  252. }
  253. }
  254. };
  255. function _clean_up() {
  256. $('#imgbox-bg-' + nr).stop().remove();
  257. $('#imgbox-wrap-' + nr).remove();
  258.         zindex = zindex > 90 ? zindex - 2 : 90;
  259. if (opts.overlayShow) {
  260. $('#imgbox-overlay').unbind().stop().fadeOut(200);
  261. }
  262. busy = false;
  263. };
  264. function getZoomTo() {
  265. var wiew = getViewport();
  266. var to = {width : preloader.width, height : preloader.height};
  267. var horizontal_space = (opts.padding + shadow + margin ) * 2;
  268. var vertical_space = (opts.padding + shadow + margin ) * 2;
  269. if (opts.autoScale && (to.width > (wiew[0] - horizontal_space) || to.height > (wiew[1] - vertical_space))) {
  270. var ratio = Math.min(Math.min( wiew[0] - horizontal_space, to.width) / to.width, Math.min( wiew[1] - vertical_space, to.height) / to.height);
  271. to.width = Math.round(ratio * to.width);
  272. to.height = Math.round(ratio * to.height);
  273. }
  274. if (opts.alignment == 'center') {
  275. to.top = wiew[3] + ((wiew[1] - to.height - opts.padding * 2) * 0.5);
  276. to.left = wiew[2] + ((wiew[0] - to.width  - opts.padding * 2) * 0.5);
  277. } else {
  278. var pos = getThumbPos();
  279. to.top = pos.top  - ( ( to.height - pos.height  ) * 0.5) - opts.padding ;
  280. to.left = pos.left - ( ( to.width  - pos.width   ) * 0.5) - opts.padding ;
  281. to.top = to.top  > wiew[3] + margin + shadow ? to.top :  wiew[3] + margin + shadow; 
  282. to.left = to.left  > wiew[2] + margin + shadow ? to.left :  wiew[2] + margin + shadow;
  283. 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;
  284. 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;
  285. }
  286. if ( opts.autoScale == false ) {
  287. to.top = to.top  > wiew[3] + shadow + margin ? to.top :  wiew[3] + shadow + margin;
  288. to.left = to.left  > wiew[2] + shadow + margin ? to.left :  wiew[2] + shadow + margin;
  289. }
  290. to.top  = parseInt(to.top);
  291. to.left = parseInt(to.left);
  292. return to;
  293. };
  294. function getViewport() {
  295. return [ $(window).width(), $(window).height(), $(document).scrollLeft(), $(document).scrollTop() ];
  296. };
  297. function getThumbPos() {
  298. var thumb = $(elem).find('img').eq(0);
  299. var pos = thumb.offset();
  300. pos.top += parseFloat( thumb.css('paddingTop') );
  301. pos.left += parseFloat( thumb.css('paddingLeft') );
  302. pos.top += parseFloat( thumb.css('border-top-width') );
  303. pos.left += parseFloat( thumb.css('border-left-width') );
  304. pos.width = thumb.width();
  305. pos.height = thumb.height();
  306. return pos;
  307. };
  308. function showActivity() {
  309. var pos = getThumbPos( elem );
  310. $('#imgbox-loading').css(pos).show();
  311. };
  312. function hideActivity() {
  313. $(preloader).unbind();
  314. $('#imgbox-loading').hide();
  315. };
  316. function cancelLoading() {
  317.     hideActivity();
  318.     if (opts.overlayShow) {
  319. $('#imgbox-overlay').unbind().stop().fadeOut(200);
  320. }
  321. };
  322. function init() {
  323. $('<div id="imgbox-loading"><div></div></div><div id="imgbox-overlay"></div>').appendTo('body');
  324. $('#imgbox-loading')
  325. .click(cancelLoading)
  326. .find('div')
  327. .css('opacity', 0.4);
  328. };
  329. $(document).ready(function() {
  330. init();
  331. });
  332. })(jQuery);