这是我在网上下载的一个案例，由于公司的项目要用到，我对他进行了改版。
虽然是一个别人写的案例，但是我公司没有人能对它修改成需要的样式，我既然研究出来了，就在这里分享下我的心得！
这里我把我理解的内容给大家解释下，希望用的时候可以方便的。
?
这段代码的结构是一个ul无序列表：
<ul>
??????? <li>
??????????? <a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
??????????????? <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
??????????? </a>
??????? </li>
</ul>
然后在头部的jQuery代码中进行调用：
$(function() {
??????? $('#gallery a').lightBox();
??? });
?
这个效果的代码全部在一个外部的js文件中。而模态窗口的css样式又全部在一个外部文件中，这样很方面修改。
?
首先研究外部的js文件：
?
可以看到，整个模态窗口的结构都是用jQuery动态生成的，在这段代码里：
$('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="' + settings.imageLoading + '"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="' + settings.imageBtnClose + '"></a></div></div></div></div>');
这个结构显然不好研究，可以把它复制出来，粘到一个新建的html文件中，这样方便观察结构。
其中，
<div id="jquery-lightbox">
这个div的宽度是通屏的，
?<div id="lightbox-container-image-box">
<div id="lightbox-container-image-data-box">
这两个div通过margin：0 auto属性设置成屏幕的居中显示。
弄懂了这些结构，再加上外部的css样式，基本上就可以对它进行改版了。
?
但是我做的这个案例改动比较大，由上下布局改为左右布局，两个左右切换的箭头要由图片上面变成整个区域的左右两边。
鉴于是左右的布局，我把可以自动使用大小的布局改成了固定的布局，
var intCurrentWidth = $('#lightbox-container-image-box').width();
???var intCurrentHeight = $('#lightbox-container-image-box').height();
???var intWidth = (intImageWidth + (settings.containerBorderSize * 2));?
???var intHeight = (intImageHeight + (settings.containerBorderSize * 2));?
???var intDiffW = intCurrentWidth - intWidth;
???var intDiffH = intCurrentHeight - intHeight;
?这些是获取高度和宽度的变量，改成相应的数字就可以了。
至于两个左右的箭头，我不得不在多加了个div给固定位置：
$('body').append('')
加额外的表情必须在这里面添加才可能生效。
?
?
理解了上述这些东西，基本上这个效果你就可以任意的改动了，最好是css样式好一点的人比较好改！
?
?
下面的两个压缩包，上面的是原来效果的。下面的是根据我公司的需求，修改过效果的。
?
?
?