/*! * jqzoom evolution library v2.3 - javascript image magnifier * http://www.mind-projects.it * * copyright 2011, engineer marco renzi * licensed under the bsd license. * * redistribution and use in source and binary forms, with or without * modification, are permitted provided that the following conditions are met: * * redistributions of source code must retain the above copyright * notice, this list of conditions and the following disclaimer. * * redistributions in binary form must reproduce the above copyright * notice, this list of conditions and the following disclaimer in the * documentation and/or other materials provided with the distribution. * * neither the name of the organization nor the * names of its contributors may be used to endorse or promote products * derived from this software without specific prior written permission. * * date: 03 may 2011 22:16:00 * modify by liuxun 2011.5.25 */ (function ($) { //global variables var isie6 = ($.browser.msie && $.browser.version < 7); var body = $(document.body); var window = $(window); var jqzoompluging_disabled = false; //disabilita globalmente il plugin $.fn.jqzoom = function (options) { return this.each(function () { var node = this.nodename.tolowercase(); if (node == 'a') { new jqzoom(this, options); } }); }; jqzoom = function (el, options) { var api = null; api = $(el).data("jqzoom"); if (api) return api; var obj = this; var settings = $.extend({}, $.jqzoom.defaults, options || {}); obj.el = el; el.rel = $(el).attr('rel'); //anchor element el.zoom_active = false; el.zoom_disabled = false; //to disable single zoom instance el.largeimageloading = false; //tell us if large image is loading el.largeimageloaded = false; //tell us if large image is loaded el.scale = {}; el.timer = null; el.mousepos = {}; el.mousedown = false; $(el).css({ 'outline-style': 'none', 'text-decoration': 'none' }); //base image var img = $("img:eq(0)", el); el.title = $(el).attr('title'); el.imagetitle = img.attr('title'); var zoomtitle = ($.trim(el.title).length > 0) ? el.title : el.imagetitle; var smallimage = new smallimage(img); var lens = new lens(); var stage = new stage(); var largeimage = new largeimage(); var loader = new loader(); //preventing default click,allowing the onclick event [exmple: lightbox] $(el).bind('click', function (e) { e.preventdefault(); return false; }); //setting the default zoomtype if not in settings var zoomtypes = ['standard', 'drag', 'innerzoom', 'reverse']; if ($.inarray($.trim(settings.zoomtype), zoomtypes) < 0) { settings.zoomtype = 'standard'; } $.extend(obj, { create: function () { //create the main objects //create zoompad if ($(".zoompad", el).length == 0) { el.zoompad = $('
').addclass('zoompad'); img.wrap(el.zoompad); } if(settings.zoomtype == 'innerzoom'){ settings.zoomwidth = smallimage.w; settings.zoomheight = smallimage.h; } //creating zoompup if ($(".zoompup", el).length == 0) { lens.append(); } //creating zoomwindow if ($(".zoomwindow", el).length == 0) { stage.append(); } //creating preload if ($(".zoompreload", el).length == 0) { loader.append(); } //preloading images if (settings.preloadimages || settings.zoomtype == 'drag' || settings.alwayson) { obj.load(); } //liuxun添加翻页效果 var zoomlistbox =settings.zoomlist+'_box'; var zoomlistbox_obj = $(zoomlistbox +' ul'); var zoomlistbox_w = $(zoomlistbox).width(); var zoomlistbox_l = $(zoomlistbox).offset().left; var zoomlistbox_img_num = $(zoomlistbox +' li img').length; var zoomlistbox_img_w = $(zoomlistbox +' li').width(); var zoomlistbox_all_w=zoomlistbox_img_num*zoomlistbox_img_w; zoomlistbox_obj.width(zoomlistbox_all_w); var zoomlist_pages=math.ceil(zoomlistbox_all_w/zoomlistbox_w); var zoomlist_page=0; $(settings.zoomlist+' a.next').click(function () { zoomlist_page++; if(zoomlist_page < zoomlist_pages){ zoomlistbox_obj.animate({ left : -zoomlist_page*zoomlistbox_w+'px'}, 500 ); }else{ zoomlist_page=zoomlist_pages-1; } }); $(settings.zoomlist+' a.pre').click(function () { zoomlist_page--; if(zoomlist_page >= 0){ zoomlistbox_obj.animate({ left : -zoomlist_page*zoomlistbox_w+'px'}, 500 ); }else{ zoomlist_page=0; } }); if(isie6){ settings.preloadimages=false; } else if($.browser.msie && $.browser.version > 6) { settings.preloadimages=true; } else if($.browser.safari) { settings.preloadimages=true; } else if($.browser.mozilla) { settings.preloadimages=false; } else if($.browser.opera) { settings.preloadimages=true; } else { } obj.init(); }, init: function () { //drag option if (settings.zoomtype == 'drag') { $(".zoompad", el).mousedown(function () { el.mousedown = true; }); $(".zoompad", el).mouseup(function () { el.mousedown = false; }); document.body.ondragstart = function () { return false; }; $(".zoompad", el).css({ cursor: 'default' }); $(".zoompup", el).css({ cursor: 'move' }); } if (settings.zoomtype == 'innerzoom') { $(".zoomwrapper", el).css({ cursor: 'crosshair' }); } $(".zoompad", el).bind('mouseenter mouseover', function (event) { img.attr('title', ''); $(el).attr('title', ''); el.zoom_active = true; //if loaded then activate else load large image smallimage.fetchdata(); if (el.largeimageloaded) { obj.activate(event); } else { obj.load(); } }); $(".zoompad", el).bind('mouseleave', function (event) { obj.deactivate(); }); $(".zoompad", el).bind('mousemove', function (e) { //prevent fast mouse mevements not to fire the mouseout event if (e.pagex > smallimage.pos.r || e.pagex < smallimage.pos.l || e.pagey < smallimage.pos.t || e.pagey > smallimage.pos.b) { lens.setcenter(); return false; } el.zoom_active = true; if (el.largeimageloaded && !$('.zoomwindow', el).is(':visible')) { obj.activate(e); } if (el.largeimageloaded && (settings.zoomtype != 'drag' || (settings.zoomtype == 'drag' && el.mousedown))) { lens.setposition(e); } }); var thumb_preload = new array(); var i = 0; //binding click event on thumbnails var thumblist = new array(); thumblist = $('a').filter(function () { var regex = new regexp("gallery[\\s]*:[\\s]*'" + $.trim(el.rel) + "'", "i"); var rel = $(this).attr('rel'); if (regex.test(rel)) { return this; } }); if (thumblist.length > 0) { //getting the first to the last var first = thumblist.splice(0, 1); thumblist.push(first); } thumblist.each(function () { //preloading thumbs if (settings.preloadimages) { var thumb_options = $.extend({}, eval("(" + $.trim($(this).attr('rel')) + ")")); thumb_preload[i] = new image(); thumb_preload[i].src = thumb_options.largeimage; i++; } $(this).click(function (e) { if($(this).hasclass('zoomthumbactive')){ return false; } thumblist.each(function () { $(this).removeclass('zoomthumbactive'); }); e.preventdefault(); obj.swapimage(this); return false; }); }); }, load: function () { if (el.largeimageloaded == false && el.largeimageloading == false) { var url = $(el).attr('href'); el.largeimageloading = true; largeimage.loadimage(url); } }, activate: function (e) { cleartimeout(el.timer); //show lens and zoomwindow lens.show(); stage.show(); }, deactivate: function (e) { switch (settings.zoomtype) { case 'drag': //nothing or lens.setcenter(); break; default: img.attr('title', el.imagetitle); $(el).attr('title', el.title); if (settings.alwayson) { lens.setcenter(); } else { stage.hide(); lens.hide(); } break; } el.zoom_active = false; }, swapimage: function (link) { el.largeimageloading = false; el.largeimageloaded = false; var options = new object(); options = $.extend({}, eval("(" + $.trim($(link).attr('rel')) + ")")); if (options.smallimage && options.largeimage) { var smallimage = options.smallimage; var largeimage = options.largeimage; $(link).addclass('zoomthumbactive'); $(el).attr('href', largeimage); img.attr('src', smallimage); lens.hide(); stage.hide(); obj.load(); } else { alert('error :: missing parameter for largeimage or smallimage.'); throw 'error :: missing parameter for largeimage or smallimage.'; } return false; } }); //sometimes image is already loaded and onload will not fire if (img[0].complete) { //fetching data from sallimage if was previously loaded smallimage.fetchdata(); if ($(".zoompad", el).length == 0) obj.create(); } /*========================================================, | smallimage |---------------------------------------------------------: | base image into the anchor element `========================================================*/ function smallimage(image) { var $obj = this; this.node = image[0]; this.findborder = function () { var bordertop = 0; bordertop = image.css('border-top-width'); btop = ''; var borderleft = 0; borderleft = image.css('border-left-width'); bleft = ''; if (bordertop) { for (i = 0; i < 3; i++) { var x = []; x = bordertop.substr(i, 1); if (isnan(x) == false) { btop = btop + '' + bordertop.substr(i, 1); } else { break; } } } if (borderleft) { for (i = 0; i < 3; i++) { if (!isnan(borderleft.substr(i, 1))) { bleft = bleft + borderleft.substr(i, 1) } else { break; } } } $obj.btop = (btop.length > 0) ? eval(btop) : 0; $obj.bleft = (bleft.length > 0) ? eval(bleft) : 0; }; this.fetchdata = function () { $obj.findborder(); $obj.w = image.width(); $obj.h = image.height(); $obj.ow = image.outerwidth(); $obj.oh = image.outerheight(); $obj.pos = image.offset(); $obj.pos.l = image.offset().left + $obj.bleft; $obj.pos.t = image.offset().top + $obj.btop; $obj.pos.r = $obj.w + $obj.pos.l; $obj.pos.b = $obj.h + $obj.pos.t; $obj.rightlimit = image.offset().left + $obj.ow; $obj.bottomlimit = image.offset().top + $obj.oh; }; this.node.onerror = function () { alert('problems while loading image.'); throw 'problems while loading image.'; }; this.node.onload = function () { $obj.fetchdata(); if ($(".zoompad", el).length == 0) obj.create(); }; return $obj; }; /*========================================================, | loader |---------------------------------------------------------: | show that the large image is loading `========================================================*/ function loader() { var $obj = this; this.append = function () { this.node = $('').addclass('zoompreload').css('visibility', 'hidden').html(settings.preloadtext); $('.zoompad', el).append(this.node); }; this.show = function () { this.node.top = (smallimage.oh - this.node.height()) / 2; this.node.left = (smallimage.ow - this.node.width()) / 2; //setting position this.node.css({ top: this.node.top, left: this.node.left, position: 'absolute', visibility: 'visible' }); }; this.hide = function () { this.node.css('visibility', 'hidden'); }; return this; } /*========================================================, | lens |---------------------------------------------------------: | lens over the image `========================================================*/ function lens() { var $obj = this; this.node = $('').addclass('zoompup'); //this.nodeimgwrapper = $("").addclass('zoompupimgwrapper'); this.append = function () { $('.zoompad', el).append($(this.node).hide()); if (settings.zoomtype == 'reverse') { this.image = new image(); this.image.src = smallimage.node.src; // fires off async $(this.node).empty().append(this.image); } }; this.setdimensions = function () { this.node.w = (parseint((settings.zoomwidth) / el.scale.x) > smallimage.w ) ? smallimage.w : (parseint(settings.zoomwidth / el.scale.x)); this.node.h = (parseint((settings.zoomheight) / el.scale.y) > smallimage.h ) ? smallimage.h : (parseint(settings.zoomheight / el.scale.y)); this.node.top = (smallimage.oh - this.node.h - 2) / 2; this.node.left = (smallimage.ow - this.node.w - 2) / 2; //centering lens this.node.css({ top: 0, left: 0, width: this.node.w + 'px', height: this.node.h + 'px', position: 'absolute', display: 'none', borderwidth: 1 + 'px' }); if (settings.zoomtype == 'reverse') { this.image.src = smallimage.node.src; $(this.node).css({ 'opacity': 1 }); $(this.image).css({ position: 'absolute', display: 'block', left: -(this.node.left + 1 - smallimage.bleft) + 'px', top: -(this.node.top + 1 - smallimage.btop) + 'px' }); } }; this.setcenter = function () { //calculating center position this.node.top = (smallimage.oh - this.node.h - 2) / 2; this.node.left = (smallimage.ow - this.node.w - 2) / 2; //centering lens this.node.css({ top: this.node.top, left: this.node.left }); if (settings.zoomtype == 'reverse') { $(this.image).css({ position: 'absolute', display: 'block', left: -(this.node.left + 1 - smallimage.bleft) + 'px', top: -(this.node.top + 1 - smallimage.btop) + 'px' }); } //centering large image largeimage.setposition(); }; this.setposition = function (e) { el.mousepos.x = e.pagex; el.mousepos.y = e.pagey; var lensleft = 0; var lenstop = 0; function overleft(lens) { return el.mousepos.x - (lens.w) / 2 < smallimage.pos.l; } function overright(lens) { return el.mousepos.x + (lens.w) / 2 > smallimage.pos.r; } function overtop(lens) { return el.mousepos.y - (lens.h) / 2 < smallimage.pos.t; } function overbottom(lens) { return el.mousepos.y + (lens.h) / 2 > smallimage.pos.b; } lensleft = el.mousepos.x + smallimage.bleft - smallimage.pos.l - (this.node.w + 2) / 2; lenstop = el.mousepos.y + smallimage.btop - smallimage.pos.t - (this.node.h + 2) / 2; if (overleft(this.node)) { lensleft = smallimage.bleft - 1; } else if (overright(this.node)) { lensleft = smallimage.w + smallimage.bleft - this.node.w - 1; } if (overtop(this.node)) { lenstop = smallimage.btop - 1; } else if (overbottom(this.node)) { lenstop = smallimage.h + smallimage.btop - this.node.h - 1; } if(isie6){ lensleft1 = lensleft-2; }else if($.browser.msie && $.browser.version > 6){ lensleft1 = lensleft1=(lensleft + ($(el).width() - smallimage.w ) /2)-2; }else{ lensleft1=(lensleft + ($(el).width() - smallimage.w ) /2); //liuxun添加判断图片居中时的偏差 } if($.browser.msie) { //liuxun添加判断是否ie lenstop1=(lenstop + ($(el).height() - smallimage.h ) /2); }else{ lenstop1 = lenstop; } this.node.left = lensleft; this.node.top = lenstop; this.node.css({ 'left': lensleft1 + 'px', 'top': lenstop1 + 'px' }); if (settings.zoomtype == 'reverse') { if ($.browser.msie && $.browser.version > 7) { $(this.node).empty().append(this.image); } $(this.image).css({ position: 'absolute', display: 'block', left: -(this.node.left + 1 - smallimage.bleft) + 'px', top: -(this.node.top + 1 - smallimage.btop) + 'px' }); } largeimage.setposition(); }; this.hide = function () { img.css({ 'opacity': 1 }); this.node.hide(); }; this.show = function () { if (settings.zoomtype != 'innerzoom' && (settings.lens || settings.zoomtype == 'drag')) { this.node.show(); } if (settings.zoomtype == 'reverse') { img.css({ 'opacity': settings.imageopacity }); } }; this.getoffset = function () { var o = {}; o.left = $obj.node.left; o.top = $obj.node.top; return o; }; return this; }; /*========================================================, | stage |---------------------------------------------------------: | window area that contains the large image `========================================================*/ function stage() { var $obj = this; this.node = $("