Self-write picture mask layer Amplification function jquery Plugin source code, photobox.js version 1.0, incompatible IE6

Attis ~ ~ ~

There's nothing to say about this dick. Development of plug-in experience, but bad weather, the company needs to let me develop a picture to enlarge the plugin

But the company eldest words, like late of the imperial decree, Micro-minister will when tude, MO dare not from AH ~ ~ ~

As a result, as a super small white, I can only blind research, fortunately dark not negative dick silk people, this cock silk finally out, although not perfect, but the function is still able to use the

First, the source code, to seek the various great God guidance:

/******************************* * Photobox Cross browser compatible plugin v1.0 (IE6 not supported) * Format: <a href= "Big.jpg" id= "B1" title= "I'm a piece of crap, you bite me!" "></a>///$ (" #b1 "). Photobox (); /;(function ($) {$.fn.photobox = function (options) {var opts = $.extend ({}, $. Fn.photobox.defaults, options);//integration of the Parameters return This.each (function () {$ (this). Click (function () {if (Opts.showshadow) {// If the setting displays a shadow matte layer, the $.fn.photobox.shadow (opts.shadowoptions) is displayed;} if (Opts.showbox) {//assumes that the setting displays a picture border, the $.fn.photobox.box () is displayed;} if (OPTS.SHOWCLOSEBTN) {//Assume that the setting displays a close button, the $.fn.photobox.closebtn () is displayed;} var $this = $ (this), var imgsrc = $this. attr ("href"), var title = $this. attr ("title"), var bigimg = new Image (),//JS to get picture height and Width bigimg.src = Imgsrc;var h = Bigimg.height;var W = Bigimg.width;var $bigphoto = $ (' </div> '); $boxshadow. attr ({" ID ":" Boxshadow "}); $boxshadow. CSS (shadowoptions); $boxshadow. css (options); $ ("Body"). Append ($boxshadow);}; $.fn.photobox.box = function () {var wh = $ (window). height (); var ww = $ (window). Width (), var $box = $ (' &LT;DIV&GT;&LT;/DIV&G t; '); /Package Image div$box.attr ({"id": "Pb_box"}), $box. css ({"Background-color": "#fff", "padding": "10px", "position": "Fixed", " Opacity ":" 0 "," width ":" 0px "," height ":" 0px "," Top ": parseint (WH/2) +" px "," left ":p arseint (WW/2) +" px "," Z-index ": 10000 }); $ ("Body"). Append ($box);}; $.FN.PHOTOBOX.CLOSEBTN = function () {//Picture close Buttonvar $close = $ (' <a></a> ');//Close button$close.attr ({"id": " Pb_closebtn "}); $close. css ({" Background ":" url (' css/web/images/close.png ') "," position ":" absolute "," opacity ":" 0 ", "width": "0px", "height": "0px", "Top": " -15px", "right": " -15px", "Z-index": 10000}); $ ("#pb_box"). Append ($close);}; $.fn.photobox.title = function (title) {var $title = $ (' <span></span> ');//Picture title$title.attr ({"id": "pb_ Phototitle "}); $title. css ({" Line-height ":" 20px "," Color ":" #1e2024 "," Text-align ":" Center "}), $title. HTML (title); $ ( "Img[rel= ' Photobox '). After ($title);}; $.fn.photobox.close = function () {$ ("#boxshadow, #pb_closebtn"). Click (function () {var wh = $ (window). height (); var ww = $ ( window). width (); $ ("#boxshadow"). FadeOut ($.fn.photobox.defaults.speed,function () {$ (this). Remove ();}); $ ("#pb_box"). Animate ({"width": "20px", "height": "20px", "Top":p arseint (WH/2) + "px", "left":p arseint (WW/2) + "px", " Opacity ": 0},$.fn.photobox.defaults.speed,function () {$ (this). Remove ();}); $ ("img[rel= ' Photobox ')"). Animate ({"width": "0px", "height": "0px", "opacity": 0},$.fn.photobox.defaults.speed, Function () {$ (this). Remove ();}); if (OPTS.SHOWCLOSEBTN) {//Assume the settings show off button$ ("#pb_closebtn"). Stop (true). Animate ({"width": "0px", "height": "0px", " Opacity ": 0},$.fn.photobox.defaults.speed,function () {$ (this). Remove ();}); if (Opts.showtitle) {$ ("#pb_phototitle"). Stop (true). Animate ({"height": "0px", "width": "0px", "opacity": 0},$. Fn.photobox.defaults.speed,function () {$ (this). Remove ();});}); $.fn.photobox.resize = function () {$ (window). Resize (function () {if ("body"). Has ($ ("#").Pb_box ")) {var wh = $ (window). Height (), var ww = $ (window). Width (), var h = $ (" #pb_box "). Height (), var w = $ (" #pb_box "). Width (); $ ("#pb_box"). Stop (true). Animate ({' top ':(wh-h)/2 + ' px ', ' left ':(ww-w)/2 + ' px '},100);}});}; $.fn.photobox.defaults = {showclosebtn:true,showtitle:true,speed:400,//The following parameters temporarily disagree with user changes Showshadow:true,showbox:true , showoverlay:true,//This feature is temporarily open shadowoptions:{"Background-color": "#000", "opacity": 0.6, "Z-index": 9999},// The mask layer's zindex is smaller than the image layer's Zindexautoresize:true};}) (JQuery);

Attached sheet:

Logic is very easy, because the IE6 than the excrement, and now most of the development does not consider him, so, this cock silk also did not consider him, will continue to be intact, how to use, please view JS top pig excrement

Format: <a href= "Big.jpg" id= "B1" title= "I'm a piece of crap, you bite me!" "></a>///$ (" #b1 "). Photobox ();

The number of passes, at the moment only can pass three parameters, more of this goods also do not hang you, in order to save trouble, I put CSS style are written in JS inside, will be put forward to make code more standard.

$ ("#b1"). Photobox ({showclosebtn:true,showtitle:true,speed:500});

A look at the name is clear, respectively, represents the Display off button (PS: The icon to close the button himself, I do not upload, to find your dear artist sister to put, give you a with art sister Kiss Me my chance, touched it! ), the display title, is in the picture below has the sentence, to this picture to do a brief introduction, the speed, the unit millisecond, own experience bar ~ ~

Now is only 1.0 version, I also rookie a, welcome to the master to the Novice under the guidance of, greatly appreciated!

No matter what the question or the generous enlighten, please cabernet cock silk qq:1740437

At the same time, there are like folk music, love antique, love to shoot the micro-film, but also to make a friend with Ben Dick, wow quack ~ ~ ~