jquery Image Special effects plug-in revealing to achieve stretch amplification _jquery

Click the picture, the picture stretch enlarge display, the effect is very good!

How to use:

1, Head area reference file Jquery.js,photorevealer.js,datouwang.css

2, add <!--code in the file to start--><!--code end--> area code

3, the number of pictures can be free increase or decrease, add or delete <td></td> can

4, if the picture information more, need more space, can modify the number of the 36th line in the Photorevealer.js

Core code:

$ (document). Ready (function () {$ ('. Photo_slider '). each (the function () {var $this = $ (this). addclass (' Photo-area ');
  var $img = $this. Find (' img ');
     
  var $info = $this. Find ('. Info_area ');
   
  var opts = {};
    $img. Load (function () {OPTS.IMGW = $img. Width ();
  OPTS.IMGH = $img. Height ();
   
  });
  OPTS.ORGW = $this. Width ();
   
  Opts.orgh = $this. Height ();
   
  $img. css ({marginleft: " -150px", MarginTop: " -150px"});
 
  var $wrap = $ (' <div class= ' photo_slider_img ' > '). Append ($img). Prependto ($this);
   
  var $open = $ (' <a href= "#" class= "more_info" >more info ></a> "). Appendto ($this);
   
  var $close = $ (' <a class= ' close ' >Close</a> '). Appendto ($info);
  OPTS.WRAPW = $wrap. Width ();
   
  Opts.wraph = $wrap. Height (); 
    $open. Click (function () {$this. Animate ({WIDTH:OPTS.IMGW, Height: (opts.imgh+30), BorderWidth: "10"
         
    }, 600);
     
    $open. fadeout (); $wrap. Animate ({Width:oPTS.IMGW, HEIGHT:OPTS.IMGH}, 600);
     
    $ (". Info_area", $this). FadeIn ();
     
    $img. Animate ({margintop: "0px", marginleft: "0px"}, 600);
  return false;
   
  });
     $close. Click (function () {$this. Animate ({WIDTH:OPTS.ORGW, Height:opts.orgh, BorderWidth: "1"
     
    }, 600);
     
    $open. FadeIn ();
     
      $wrap. Animate ({WIDTH:OPTS.WRAPW, height:opts.wraph}, 600);
 
    $img. Animate ({margintop: " -150px", MarginLeft: " -150px"}, 600);
    $ (". Info_area", $this). fadeout ();
  return false;
   
});
 
}); });

The above is the entire code of this article, I hope you can enjoy.