官方参考地址：
http://leandrovieira.com/projects/jquery/lightbox/#
前台代码：
<head runat="server"> <script src="http://www.cnblogs.com/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="jquery.lightbox-0.5.js" type="text/javascript"></script> <link href="jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" /> <title></title> <script type="text/javascript"> $(function () { $('#gallery a').lightBox(); }); </script> </head> <body> <form id="form1" runat="server"> <h2 id="example">Example</h2> <p>Click in the image and see the <strong>jQuery lightBox plugin</strong> in action.</p> <div id="gallery"> <ul> <li> <a href="http://www.cnblogs.com/Images/ibanner1.jpg" title="aaaa"> <img src="http://www.cnblogs.com/Images/ibanner1.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="http://www.cnblogs.com/Images/ibanner2.jpg" title="aaaa"> <img src="http://www.cnblogs.com/Images/ibanner2.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="http://www.cnblogs.com/Images/ibanner3.jpg" title="aaa"> <img src="http://www.cnblogs.com/Images/ibanner3.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="http://www.cnblogs.com/Images/ibanner4.jpg" title="aaa;"> <img src="http://www.cnblogs.com/Images/ibanner4.jpg" width="72" height="72" alt="" /> </a> </li> </ul> </div>
JS源文件
(function($) { /** * $ is an alias to jQuery object * */ $.fn.lightBox = function(settings) { // Settings to configure the jQuery lightBox plugin how you like settings = jQuery.extend({ // Configuration related to overlay overlayBgColor: '#000', // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color. overlayOpacity: 0.8, // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9 // Configuration related to navigation fixedNavigation: true, // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface. // Configuration related to images imageLoading: 'lightbox-ico-loading.gif', // (string) Path and the name of the loading icon imageBtnPrev: 'lightbox-btn-prev.gif', /// <reference path="lightbox-blank.gif" />前一个图片 // (string) Path and the name of the prev button image imageBtnNext: 'lightbox-btn-next.gif', //后一个图片 // (string) Path and the name of the next button image imageBtnClose: 'lightbox-btn-close.gif', // (string) Path and the name of the close btn 关闭按钮 imageBlank: 'lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel) // Configuration related to container image box containerBorderSize: 10, // (integer) If you adjust the padding in the CSS for the container, #lightbox-container-image-box, you will need to update this value containerResizeSpeed: 400, // (integer) Specify the resize duration of container image. These number are miliseconds. 400 is default. // Configuration related to texts in caption. For example: Image 2 of 8. You can alter either "Image" and "of" texts. txtImage: 'Image', // (string) Specify text "Image" txtOf: 'of', // (string) Specify text "of" // Configuration related to keyboard navigation keyToClose: 'c', // (string) (c = close) Letter to close the jQuery lightBox interface. Beyond this letter, the letter X and the SCAPE key is used to. keyToPrev: 'p', // (string) (p = previous) Letter to show the previous image keyToNext: 'n', // (string) (n = next) Letter to show the next image. // Don磘 alter these variables in any way imageArray: [], activeImage: 0 },settings);