Click on the picture and the picture is stretched and enlarged, and the effect is very good!
How to use:
1. Head area reference file,
2. Add <!-- code to the file Start --><!-- code End --> area code
3. The number of pictures can be increased or decreased freely, and you can add or delete <td></td>
4. If the image information is more and more space is needed, you can modify the number on line 36.
Core code:
$(document).ready(function(){ $('.photo_slider').each(function(){ var $this = $(this).addClass('photo-area'); var $img = $('img'); var $info = $('.info_area'); var opts = {}; $(function(){ = $(); = $(); }); = $(); = $(); $ ({ 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); = $(); = $(); $(function(){ $({ width: , height: (+30), borderWidth: "10" }, 600 ); $(); $({ width: , height: }, 600 ); $(".info_area",$this).fadeIn(); $({ marginTop: "0px", marginLeft: "0px" }, 600 ); return false; }); $(function(){ $({ width: , height: , borderWidth: "1" }, 600 ); $(); $({ width: , height: }, 600 ); $({ marginTop: "-150px", marginLeft: "-150px" }, 600 ); $(".info_area",$this).fadeOut(); return false; }); }); });
The above is the entire code of this article, I hope you like it.