jquery plugin jquery. Lightbox.js realize click to enlarge the picture and click on the effect of switch (with demo source download) _jquery

The example in this article describes jquery plug-in jquery. Lightbox.js to achieve click to enlarge the picture and click on the switch effect. Share to everyone for your reference, specific as follows:

The plug-in is written by the author of the article, the purpose is to promote the author's JS ability, but also to some JS rookie in the use of plug-ins to provide some convenience, the veteran on the leisurely fly it.

This plug-in is designed to achieve the current more popular click to enlarge the picture and click on the effect of switching pictures, you can according to their actual needs to set whether or not to add the effect of switching pictures. The overall code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

Plug-in jquery. Lightbox.js Code:

/* *lightbox 1.0 *dependence jquery-1.7.1.js/*;(function (a) {A.fn.lightbox = function (options) {var defaults = {
    Controls:true///Previous, Next button is displayed, default is display true} var opts = A.extend (defaults, options); var lb_wrap = ' <div class= "lb_wrap" ><div class= "LIGHTBOX_BG" ></div><div class= "Lightbox" >
    </div></div>;
    A ("Body"). Append (Lb_wrap); Controls if (Opts.controls) {A (". Lightbox"). Append (' <p class= "prev" ></p><p class= "Next" ></
      P> ');
      The function imgobj (obj1, obj2) {//imgobj.height is the actual height of the picture obtained via an img object var imgobj = new Image ();
      IMGOBJ.SRC = obj1.attr ("src");
      var margintop = 0-(imgobj.height)/2;
      Obj2.css ("Margin-top", margintop);
      This.each (function () {var obj = a (this);
      var numpic = obj.find ("li"). length;
      var num = 0; Click Assign value and display Obj.find ("img"). Click (function () {var src = A (this). attr ("src");
        A (". Lg_img"). attr ("src", SRC);
        Imgobj (A (". Lg_img"), A (". Lightbox"));
        A (". Lb_wrap"). FadeIn ();
        A (". Lg_img"). FadeIn ();
        A (". Prev"). FadeIn (). Siblings (". Next"). FadeIn ();  num = A (this). Parent (). index ();
      Gets the index of the parent element of the current picture and assigns Num to the back click on the previous, next service});
         Previous A (". Prev"). Click (function () {if (num = = 0) {num = Numpic;
        var src = obj.find ("li"). EQ (num-1). FIND ("img"). attr ("src");
        A (". Lg_img"). attr ("src", SRC);
        Imgobj (A (". Lg_img"), A (". Lightbox"));
        num--;
      });
        Next A (". Next"). Click (function () {if (num = = numpic-1) {num =-1;
        var src = obj.find ("li"). EQ (num+1). FIND ("img"). attr ("src");
        A (". Lg_img"). attr ("src", SRC);
        Imgobj (A (". Lg_img"), A (". Lightbox"));
        num++;
      });
        Click to hide A (". Lb_wrap") In addition to the previous one and the next one. Click (function (e) {var e = e | | window.event; var elem = E.target | |
         E.srcelement;
           while (Elem) {if (Elem.classname && elem.className.indexOf (' prev ') >-1) {return;
             } if (Elem.classname && elem.className.indexOf (' Next ') >-1) {return;
         } elem = Elem.parentnode; A (this). FIND ("img"). attr ("src", "loading.gif"). Hide ();
         After hiding, assign the default picture to the SRC a (this) of the picture in Lightbox. Find (". Prev"). Hide (). Siblings (". Next"). Hide ();
        A (this). Fadeout ();
      });

 }}) (JQuery);

Full instance code click here to download the site.

More about jquery-related content readers can view the site topics: "jquery drag-and-drop effects and tips summary", "JQuery Extended Skills Summary", "jquery common Classic Effects Summary", "jquery animation and special effects usage Summary" and "jquery Selector usage Summary 》

I hope this article will help you with the jquery program design.