ZShowBox image magnified display jquery edition compatibility _ jquery

ZShowBox zoomed in to demonstrate jquery compatibility. For more information, see.
ZShowBox. js

The Code is as follows:

/*
* ZShowBox (image enlargement)
*/
Function zShowBox (domChunk ){
// Add class = "zshowbox" to each image Link"
Var zcounter = 0;
$ (DomChunk + 'A'). each (function (){
Var a_href = $ (this) [0]. href. toLowerCase ();
Var file_type = a_href.substring (a_href.lastIndexOf ('.'));
If (file_type = '.jpeg '| file_type = '.jpg' | file_type = '.png '| file_type = '.gif' | file_type = '.bmp ') {$ (this ). addClass ('zshowbox '). attr ('id', 'zsb-'+ zcounter); zcounter ++ ;};
});
$ (DomChunk + 'a. zshowbox'). click (function (){
Var current = $ (this). attr ('id'). split ('zsb-') [1],
Pagesize = zsb_getPageSize (),
Zsb_img_url = $ (this). attr ('href '),
Css_zsb_bg = 'z-index: 9999; overflow: hidden; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #000 url ('+ loadingimg +') no-repeat center ;',
Css_zsb = 'z-index: 99999; position: fixed; left: 50%; top: 50% ;',
Css_zsb_img = 'display: none; border: 5px solid #777; border-radius: 6px;-moz-border-radius: 6px;-webkit-border-radius: 6px; box-shadow: 1px 1px 5px #333,-1px-1px 5px #333;-moz-box-shadow: 1px 1px 5px #333,-1px-1px 5px #333; -webkit-box-shadow: 1px 1px 5px #333,-1px-1px 5px #333 ;',
Css_zsb_p_n = 'display: none; cursor: pointer; position: absolute; top: 50%; line-height: 80px; margin:-40px 0 0 0; color: # eee; text-shadow: 1px 3px 5px #000; font-size: 40px; font-family: Arial, Tahoma ;';
If (typeof document. body. style. maxHeight = "undefined") {// if IE 6
Alert (IE6! Too low ...... ');
Return false;
} Else {
$ ('Body'). append ('

«

»

');
$ ('# Zsb_bg'). fadeTo (600, 0.7 );
Zsh_img ('# zsb_img', zsb_img_url, pagesize, current, zcounter );
$ ('# Zsb_prev, # zsb_next'). click (function (){
If ($ (this). attr ('id') = 'zsb _ prev') current --; else current ++;
Certificate (this).parent().prev().css ("background-image", 'url ('+ loadingimg + ')');
$ ('# Zsb'). find ('img '). remove (). end (). append ('');
Zsb_img_url = $ ('# zsb-' + current). attr ('href ');
Zsh_img ('# zsb_img', zsb_img_url, pagesize, current, zcounter );
Return false;
});
$ ('# Zsb_bg, # zsb_img'). click (function (){
$ ('# Zsb_bg, # zsb_img'). unbind ('click ');
$ ('# Zsb_bg, # zsb'). fadeOut (400, function () {$ (this). remove ();});
Return false;
});
}
Return false;
});
}
Function zsh_img (img_id, zsb_img_url, pagesize, current, zcounter ){
$ ('# Zsb_prev, # zsb_next'). hide ();
// Obtain the pixel value of the image width and height dynamically
/// Under IE, ajax will be cached, so the onreadystatechange function is not triggered, so a random number must be added.
$ (Img_id). attr ('src', zsb_img_url + '? T = '+ Math. random (). load (function (){
Var img_w, img_h;
Var x = pagesize [0]-100, y = pagesize [1]-100;
// ImgReady upload ready event-Get image size faster
ImgReady (zsb_img_url, function (){
Img_w = this. width; img_h = this. height;
});
// Img_w = $ (this). width (), img_h = $ (this). height ();
If (img_w> x ){
Img_h = img_h * (x/img_w );
Img_w = x;
If (img_h> y ){
Img_w = img_w * (y/img_h );
Img_h = y;
}
} Else if (img_h> y ){
Img_w = img_w * (y/img_h );
Img_h = y;
If (img_w> x ){
Img_h = img_h * (x/img_w );
Img_w = x;
}
}
Var marginleft =-(img_w/2 + 5) + 'px ',
Margintop =-(img_h/2 + 5) + 'px ';
Img_w = img_w + 'px ', img_h = img_h + 'px ';
Border (this).css ({"width": img_w, "height": img_h margin ({"margin-left": marginleft, "margin-top": margintop indexing indexes .prev(border .css ("background-image ", "none ");
If (current> 0) {$ ('# zsb_prev'). show ();}
If (current <zcounter-1) {$ ('# zsb_next'). show ();}
});
}
Function zsb_getPageSize (){
Var de = document.doc umentElement;
Var w = window. innerWidth | self. innerWidth | (de & de. clientWidth) | document. body. clientWidth;
Var h = window. innerHeight | self. innerHeight | (de & de. clientHeight) | document. body. clientHeight;
ArrayPageSize = [w, h];
Return arrayPageSize;
}
Var loadingimg = (function loadingimg () {// obtain the loading image url
Var I = 0, got =-1, url, len = document. getElementsByTagName ('script'). length;
While (I <= len & got =-1 ){
Url = document. getElementsByTagName ('script') [I]. src;
Got = url. indexOf ('/zshowbox. js ');
I ++;
}
Return url. replace ('/zshowbox. js','/zshowbox-loading.gif ');
})();

Image header data loading readiness event-Get image size faster

The Code is as follows:

/**
* Image header data loading readiness event-Get image size faster
* @ Version 2011.05.27
* @ Author TangBin
* @ See http://www.planeart.cn /? P = 1121
* @ Param {String} image path
* @ Param {Function} the dimension is ready.
* @ Param {Function} (optional)
* @ Param {Function} loading error (optional)
* @ Example imgReady ('/upload/201109/20110924011408313 .png', function (){
Alert ('size ready: width = '+ this. width +'; height = '+ this. height );
});
*/
Var imgReady = (function (){
Var list = [], intervalId = null,
// Used for queue execution
Tick = function (){
Var I = 0;
For (; I <list. length; I ++ ){
List [I]. end? List. splice (I --, 1): list [I] ();
};
! List. length & stop ();
},
// Stop all timer queues
Stop = function (){
ClearInterval (intervalId );
IntervalId = null;
};
Return function (url, ready, load, error ){
Var onready, width, height, newWidth, newHeight,
Img = new Image ();
Img. src = url;
// If the image is cached, the cached data is directly returned.
If (img. complete ){
Ready. call (img );
Load & load. call (img );
Return;
};
Width = img. width;
Height = img. height;
// Load the event after the error
Img. onerror = function (){
Error & error. call (img );
Onready. end = true;
Img = img. onload = img. onerror = null;
};
// The image size is ready
Onready = function (){
NewWidth = img. width;
NewHeight = img. height;
If (newWidth! = Width | newHeight! = Height |
// If the image has been loaded elsewhere, area detection can be used.
NewWidth * newHeight> 1024
){
Ready. call (img );
Onready. end = true;
};
};
Onready ();
// Events that have been fully loaded
Img. onload = function (){
// Onload may be faster than onready In the timer time difference range
// Check and ensure that onready takes priority
! Onready. end & onready ();
Load & load. call (img );
// The ie gif animation cyclically executes onload and sets the empty onload parameter.
Img = img. onload = img. onerror = null;
};
// Add to the queue for regular execution
If (! Onready. end ){
List. push (onready );
// Only one timer is allowed at a time to reduce the performance loss of the browser.
If (intervalId = null) intervalId = setInterval (tick, 40 );
};
};
})();

Call:

The Code is as follows:

ZShowBox ('. gridlist ');

Additional loging


Package