LightBox plugin使用心得
毋庸置疑, LightBox plugin很强大。
本人在开发CRM系统的时候用到了这个插件，这里分享下本人的应用心得。
一、lightbox2
官网：http://www.lokeshdhakar.com/projects/lightbox2/
1、导入：在<head>标签内加如下代码：
<script type="text/javascript" src="/plugins/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="/plugins/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/plugins/lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="/plugins/lightbox/css/lightbox.css" type="text/css" media="screen" />
很明显，这里用的是prototype。
2、关联
①添加 rel="lightbox" 属性应用到任何链接标记
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
②条件关联
<script type="text/javascript">
$(function() {
$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
$('#gallery a').lightBox(); // Select all links in object with gallery ID
$('a.lightbox').lightBox(); // Select all links with lightbox class
$('a').lightBox(); // Select all links in the page
});
</script>
③群组关联
<a href="images/image-1.jpg" rel="lightbox[lightgroup]" title="my caption">image #1</a>
将rel设置为"lightbox[lightgroup]", lightgroup为群组名称，可自定义，这样，所有rel="lightbox[lightgroup]"的链接就成了一个群组，点击其中一个链接就会有上一页、下一页的显示，如果有的话。
3、显示大小控制
Lightbox默认会按图片的实际大小来显示，但有时候图片会很大，从而出现滚动条，显得不大友好。我的处理办法是设置一个最大宽度，和一个最大高度。
思路：如果图片实际宽度大于最大宽度按最大宽度显示，高度等比缩小，
如果图片实际高度大于最大高度按最大高度显示，宽度等比缩小。
实现步骤，改造lightbox.js：
步骤一：
在LightboxOptions = Object.extend({}, window.LightboxOptions || {});中加两个扩展参数：maxWidth: 800,maxHeight: 800(大小自己定)
步骤二：
将changeImage: function (imageNum) {}函数中的imgPreloader.onload = (function () {})改造成：
imgPreloader.onload = (function () {
this.lightboxImage.src = this.imageArray[this.activeImage][0];
var imgWidth = imgPreloader.width;
var imgHeight = imgPreloader.height;
//如果图片实际宽度大于最大宽度按最大宽度显示，高度等比缩小
if (imgWidth > LightboxOptions.maxWidth) {
var ratio = LightboxOptions.maxWidth / imgWidth;
imgHeight = imgHeight * ratio;
imgWidth = LightboxOptions.maxWidth;
}
//如果图片实际高度大于最大高度按最大高度显示，宽度等比缩小
if (imgHeight > LightboxOptions.maxHeight) {
var ratio = LightboxOptions.maxHeight / imgHeight;
imgWidth = imgWidth * ratio;
imgHeight = LightboxOptions.maxHeight;
}
this.lightboxImage.width = imgWidth;
this.lightboxImage.height = imgHeight;
this.resizeImageContainer(imgWidth, imgHeight);
}).bind(this);
步骤三：容易忽略的地方：
把lightbox.css中的
#lightbox img{ width: auto; height: auto;}
样式去掉
简单三步对图片实现限制，不至于太难看。优点不用多说了，但缺点也是显而易见的：那就是这个限制写在了JS中，对所有用到了lightbox的地方都起作用，不够灵活。主要是本人对prototype库不熟悉所致。下面就讲讲我熟悉的JQuery版的lightbox。
二、jquery-lightbox-0.5
官网：http://leandrovieira.com/projects/jquery/lightbox/
1、 导入：在<head>标签内加如下代码：
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
2、关联方法同lightbox2
3、扩展：
参考：http://www.cnblogs.com/intcry/archive/2010/10/15/2014554.html
jQuery lightBox插件有一些配置，你可以定义调用它。
在该配置中，您可以定制您的jQuery lightBox插件 。
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox({
overlayBgColor:"#fff",//设置显示背景
fixedNavigation:false,//是否显示下一页跟上一页的标签
//imageLoading:'images/lightbox-ico-loading.gif',//设置下载图片
//imageBtnPrev:'images/lightbox-btn-prev.gif',//设置上一页按钮的图片地址
//imageBtnNext:'images/lightbox-btn-next.gif',//设置下一页按钮的图片地址
//imageBtnClose:'images/lightbox-btn-close.gif',//设置关闭按钮的图片地址
//imageBlank:'images/lightbox-blank.gif',//设置空白的图片地址
containerBorderSize:10,//设置显示图片边框的宽度
containerResizeSpeed:2000,//设置显示图片的时间
txtImage:"图片:",//定义介绍的文字
txtOf:"/",//定义页数中间的字符
keyToClose:"s",//设置关闭图片的快捷键
keyToPrev:"a",//设置上一页的快捷键
keyToNext:"d",//设置下一页的快捷键
//imageArray:"",
activeImage:0,//设置动态显示图片，要用到easing插件
easing:"easeOutElastic",
overlayOpacity:0.7//设置背景的透明度
maxWidth: 800, //最大宽度，自定义，将在下面用到
maxHeight: 800 //最大高度，同上
});
});
4、图片大小显示控制
第一步：拿JS开刀
找到_resize_container_image_box函数，改之。
function _resize_container_image_box(intImageWidth, intImageHeight) {
var newWidth = intImageWidth;
var newHeight = intImageHeight;
if (newWidth > settings.maxWidth) {
var ratio = settings.maxWidth / newWidth;
newHeight = newHeight * ratio;
newWidth = settings.maxWidth;
}
if (newHeight > settings.maxHeight) {
var ratio = settings.maxHeight / newHeight;
newWidth = newWidth * ratio;
newHeight = settings.maxHeight;
}
intImageWidth = newWidth;
intImageHeight = newHeight;
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;
$('#lightbox-container-image-box').animate({ width: intWidth, height: intHeight }, settings.containerResizeSpeed, function () { _show_image(); });
if ((intDiffW == 0) && (intDiffH == 0)) {
if ($.browser.msie) {
___pause(250);
} else {
___pause(100);
}
}
$('#lightbox-container-image-data-box').css({ width: intImageWidth + (settings.containerBorderSize * 2) });
$('#lightbox-image').css({ width: intImageWidth, height: intImageHeight });
$('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ height: intImageHeight + (settings.containerBorderSize * 2) });
};
第二步，在页面中加限制：
$(function () {
$('#gallery a').lightBox({ maxWidth:500,maxHeight:500});//设置最大宽度和最大高度，数值任你定
});
或者在JS中加限制：在settings = jQuery.extend({/*预定义*/}, settings
);在加两参数maxWidth:500,maxHeight:500，这方法的弊端就不多讲了。
以上是我这次用lightbox的心得，欢迎高手指正。
