ZShowBox image magnified display jquery edition compatibility _ jquery

Source: Internet
Author: User
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
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.