使用时,只需要在A标签处加上rel=”lightbox”即可。e.g:
<A href= rel=lightbox><IMG src= height=”100″ width=”100″></A>

如果你的网站上已经使用了lightbox这类效果,或者下面的几点运用经验你也会觉合适(前提是使用JQuery实现)。
1. 指定哪些条件下运用Lightbox效果
在网站的js文件中添加如下语句:

function getPageScroll(){

Lightbox改造——支持滚轮缩放,lightbox滚轮缩放

   
在做文章类型的web页时,经常会遇到要点开看大图的需求,LightBox2则是在众多产品中比较优秀的一款Jquery插件。配置就不细说了,今天我主要要分享的是:如何在点开大图后,可以通过鼠标滚轮来缩放图片,下面是一个简单的指引:

  1、修改Lightbox源码使支持滚轮缩放

  2、修改Lightbox源码使图片的源可支持base64格式

  3、如何将Lightbox应用到已有的文章

 

1、修改Lightbox源码使支持滚轮缩放

   
支持鼠标滚轮主要就是把弹出后的框整个绑定上mousewheel事件,打开lightbox.js,找到Lightbox.prototype.build
= function()
{…}这一段,可以在这里(lightbox初始化的时候)把想要的滚轮事件绑定上去,比如在函数的末尾添加如下代码:

 1       // 图片滚轮缩放
 2       this.img = this.$container.find('.lb-image');
 3       this.label = this.$lightbox.find('.lb-dataContainer');
 4       $([this.$overlay[0],this.$lightbox[0]]).bind("mousewheel", function(e){
 5           var flag= e.originalEvent.wheelDelta < 0; 
 6           var imgH = self.img.height();
 7           var imgW = self.img.width();
 8           var nw = Math.round(20*imgW/imgH);
 9           var ctH = self.$outerContainer.height();
10           var ctW = self.$outerContainer.width();
11           var layH = self.$overlay.height()-20;
12           var layW = self.$overlay.width()-20;
13           // 向下
14           if(flag && imgH>20 && imgW>20) {
15               self.img.css('height', imgH - 20);
16               self.img.css('width', imgW - nw);
17               self.$outerContainer.css('height', ctH - 20);
18               self.$outerContainer.css('width', ctW - nw);
19               if(ctW-nw > 240){
20                   self.label.css('width', ctW - nw);
21               }
22           } else if(!flag && imgH<layH && imgW<layW) {
23               self.img.css('height', imgH + 20);
24               self.img.css('width', imgW + nw);
25               self.$outerContainer.css('height', ctH + 20);
26               self.$outerContainer.css('width', ctW + nw);
27               self.label.css('width', ctW + nw);
28           }  
29           e.stopPropagation();
30           return false;
31       });

   
代码比较好理解,就是给后面背景和前面图片都添加鼠标滚轮监听,然后高、宽成比例地缩放(向上滚放大、向下滚缩小),我是设定每次高度变化为20个像素,然后宽度是成比例变化。需要注意的地方,应该是在图片的最小缩小大小,和图片放大不能超过屏幕范围的限制。同时,为了更好的体验,一定要加上e.stopPropagation(),且返回false,让浏览器不要滚动。

 

2、修改Lightbox源码使支持Base64图片

   
这里说起来可能比较麻烦,先来看一下在使用原生Lightbox时的html代码格式要求:

<a href="img/image.jpg" data-lightbox="test">Image #1</a>

    这是一个最简单的弹出图,当点击Image
#1时,就会弹出一个lightbox显示img/image.jpg的内容(弹出一个元素<img src=”img/image.jpg”
/>)。
   
现在我们来考虑这种情况,如果图片是以Base64编码在服务器是存放在数据库中的?应该就是这样:

<a href="data:image/png;base64,iVBORw..." data-lightbox="test">Image #1</a>

   
问题来了,href长度在IE下是有限制的,一张大的图片,不可能放在href字段中,图片将会被阉割(只显示上半部分)。

   
另外还有一种普遍情况,如果我是先显示小图,点击小图看大图,应该就是这样:

<a href="data:image/png;base64,iVBORw..." data-lightbox="test">
    <img src="data:image/png;base64,iVBORw..." />
</a>

   
好了,这有两份重复的base64数据,而且都是从服务器端传过来的,耗时耗带宽啊。

    所以我按我的需求进行了改造,代码很简单,修改Lightbox.prototype.start
= function($link) {…} 中的子函数addToAlbum:

    function addToAlbum($link) {
        self.album.push({
          // link: $link.attr('href'),
          link: $link.children().attr("src"),
          title: $link.attr('data-title') || $link.attr('title')
        });
    }

   
注释掉的部分就是原来的,$link是前面HTML代码中的a标签,改过后addToAlbum函数的作用是:在设置弹出图片的src时,不再从原始的的href中取字符作为弹出img标签的src,而是直接从a标签的子元素中找src属性,由于src属性的长度无限制,所以它不会存在图片截断的问题。 

 

3、将Lightbox应用到已有的文章

   
第2节已经讲到了Lightbox使用时HTML有一定的格式,如果已有的文章中的图片是<img
src=”img/image.jpg”>这样的,则必须对其进行一层封装:

1 function initLightbox(){
2     var imgs = $(".lightbox-container").find('img');
3     $.each(imgs,function(i) {
4         var img = $(imgs[i]);
5         img.wrap("<a href='' data-lightbox='test' ></a>");        
6     });
7 }

   
其中,“lightbox-container”是文章所在容器的class。initLightbox函数应放置在页面加载ready时,它会把文章中的所有img标签都封装成为lightbox的格式。

   

   
本文就写到这了,第2、3点大家可以看自己的使用场景去使用,lightbox改动的重点在于滚轮缩放。

    附上改造过的源码lightbox.js。    

    转载请注明原址:                       

 

在做文章类型的web页时,经常会遇到要点开看大图的需求,LightBox2则是在众多产品中比较优…

我自己也写了一个,不过涉及两个模块,(func.js公用库,和imagesLoader.js图片载入类)过阵子一并发上来。
<STYLE type=text/css>
 HTML #overlay {
 FILTER: Alpha(opacity=50); BACKGROUND-IMAGE: url(images/blank.gif); BACKGROUND-COLOR: #000
}
</STYLE>
<SCRIPT language=javascript type=text/javascript>
<!–//
function addEvent(object, type, handler)
{
 if (object.addEventListener) {
 object.addEventListener(type, handler, false);
 } else if (object.attachEvent) {
 object.attachEvent([‘on’,type].join(”),handler);
 } else {
 object[[‘on’,type].join(”)] = handler;
 }
}
function WindowSize()
{ // window size object
 this.w = 0;
 this.h = 0;
 return this.update();
}
WindowSize.prototype.update = function()
{
 var d = document;
 this.w = 
 (window.innerWidth) ? window.innerWidth
 : (d.documentElement && d.documentElement.clientWidth) ? d.documentElement.clientWidth
 : d.body.clientWidth;
 this.h = 
 (window.innerHeight) ? window.innerHeight
 : (d.documentElement && d.documentElement.clientHeight) ? d.documentElement.clientHeight
 : d.body.clientHeight;
 return this;
};
function PageSize()
{ // page size object
 this.win = new WindowSize();
 this.w = 0;
 this.h = 0;
 return this.update();
}
PageSize.prototype.update = function()
{
 var d = document;
 this.w = 
 (window.innerWidth && window.scrollMaxX) ? window.innerWidth + window.scrollMaxX
 : (d.body.scrollWidth > d.body.offsetWidth) ? d.body.scrollWidth
 : d.body.offsetWidt;
 this.h = 
 (window.innerHeight && window.scrollMaxY) ? window.innerHeight + window.scrollMaxY
 : (d.body.scrollHeight > d.body.offsetHeight) ? d.body.scrollHeight
 : d.body.offsetHeight;
 this.win.update();
 if (this.w < this.win.w) this.w = this.win.w;
 if (this.h < this.win.h) this.h = this.win.h;
 return this;
};
function PagePos()
{ // page position object
 this.x = 0;
 this.y = 0;
 return this.update();
}
PagePos.prototype.update = function()
{
 var d = document;
 this.x =
 (window.pageXOffset) ? window.pageXOffset
 : (d.documentElement && d.documentElement.scrollLeft) ? d.documentElement.scrollLeft
 : (d.body) ? d.body.scrollLeft
 : 0;
 this.y =
 (window.pageYOffset) ? window.pageYOffset
 : (d.documentElement && d.documentElement.scrollTop) ? d.documentElement.scrollTop
 : (d.body) ? d.body.scrollTop
 : 0;
 return this;
};
function UserAgent()
{ // user agent information
 var ua = navigator.userAgent;
 this.isWinIE = this.isMacIE = false;
 this.isGecko = ua.match(/Gecko\//);
 this.isSafari = ua.match(/AppleWebKit/);
 this.isOpera = window.opera;
 if (document.all && !this.isGecko && !this.isSafari && !this.isOpera) {
 this.isWinIE = ua.match(/Win/);
 this.isMacIE = ua.match(/Mac/);
 this.isNewIE = (ua.match(/MSIE 5\.5/) || ua.match(/MSIE 6\.0/));
 }
 return this;
}
// === lightbox ===
function LightBox(option)
{
 var self = this;
 self._imgs = new Array();
 self._wrap = null;
 self._box = null;
 self._open = -1;
 self._page = new PageSize();
 self._pos = new PagePos();
 self._ua = new UserAgent();
 self._expandable = false;
 self._expanded = false;
 self._expand = option.expandimg;
 self._shrink = option.shrinkimg;
 return self._init(option);
}
LightBox.prototype = {
 _init : function(option)
 {
 var self = this;
 var d = document;
 if (!d.getElementsByTagName) return;
 var links = d.getElementsByTagName(“a”);
 for (var i=0;i<links.length;i++) {
 var anchor = links[i];
 var num = self._imgs.length;
 if (!anchor.getAttribute(“href”)
 || anchor.getAttribute(“rel”) != “lightbox”) continue;
 // initialize item
 self._imgs[num] = {src:anchor.getAttribute(“href”),w:-1,h:-1,title:”,cls:anchor.className};
 if (anchor.getAttribute(“title”))
 self._imgs[num].title = anchor.getAttribute(“title”);
 else if (anchor.firstChild && anchor.firstChild.getAttribute && anchor.firstChild.getAttribute(“title”))
 self._imgs[num].title = anchor.firstChild.getAttribute(“title”);
 anchor.onclick = self._genOpener(num); // set closure to onclick event
 }
 var body = d.getElementsByTagName(“body”)[0];
 self._wrap = self._createWrapOn(body,option.loadingimg);
 self._box = self._createBoxOn(body,option);
 return self;
 },
 _genOpener : function(num)
 {
 var self = this;
 return function() { self._show(num); return false; }
 },
 _createWrapOn : function(obj,imagePath)
 {
 var self = this;
 if (!obj) return null;
 // create wrapper object, translucent background
 var wrap = document.createElement(‘div’);
 wrap.id = ‘overlay’;
 with (wrap.style) {
 display = ‘none’;
 position = ‘fixed’;
 top = ‘0px’;
 left = ‘0px’;
 zIndex = ’50’;
 width = ‘100%’;
 height = ‘100%’;
 }
 if (self._ua.isWinIE) wrap.style.position = ‘absolute’;
 addEvent(wrap,”click”,function() { self._close(); });
 obj.appendChild(wrap);
 // create loading image, animated image
 var imag = new Image;
 imag.onload = function() {
 var spin = document.createElement(‘img’);
 spin.id = ‘loadingImage’;
 spin.src = imag.src;
 spin.style.position = ‘relative’;
 self._set_cursor(spin);
 addEvent(spin,’click’,function() { self._close(); });
 wrap.appendChild(spin);
 imag.onload = function(){};
 };
 if (imagePath != ”) imag.src = imagePath;
 return wrap;
 },
 _createBoxOn : function(obj,option)
 {
 var self = this;
 if (!obj) return null;
 // create lightbox object, frame rectangle
 var box = document.createElement(‘div’);
 box.id = ‘lightbox’;
 with (box.style) {
 display = ‘none’;
 position = ‘absolute’;
 zIndex = ’60’;
 }
 obj.appendChild(box);
 // create image object to display a target image
 var img = document.createElement(‘img’);
 img.id = ‘lightboxImage’;
 self._set_cursor(img);
 addEvent(img,’click’,function(){ self._close(); });
 addEvent(img,’mouseover’,function(){ self._show_action(); });
 addEvent(img,’mouseout’,function(){ self._hide_action(); });
 box.appendChild(img);
 var zoom = document.createElement(‘img’);
 zoom.id = ‘actionImage’;
 with (zoom.style) {
 display = ‘none’;
 position = ‘absolute’;
 top = ’15px’;
 left = ’15px’;
 zIndex = ’70’;
 }
 self._set_cursor(zoom);
 zoom.src = self._expand;
 addEvent(zoom,’mouseover’,function(){ self._show_action(); });
 addEvent(zoom,’click’, function() { self._zoom(); });
 box.appendChild(zoom);
 addEvent(window,’resize’,function(){ self._set_size(true); });
 // close button
 if (option.closeimg) {
 var btn = document.createElement(‘img’);
 btn.id = ‘closeButton’;
 with (btn.style) {
 display = ‘inline’;
 position = ‘absolute’;
 right = ’10px’;
 top = ’10px’;
 width = ’15px’;
 height = ’15px’;
 zIndex = ’80’;
 }
 btn.src = option.closeimg;
 self._set_cursor(btn);
 addEvent(btn,’click’,function(){ self._close(); });
 box.appendChild(btn);
 }
 // caption text
 var caption = document.createElement(‘span’);
 caption.id = ‘lightboxCaption’;
 with (caption.style) {
 display = ‘none’;
 position = ‘absolute’;
 zIndex = ’80’;
 }
 box.appendChild(caption);
 // create effect image
 if (!option.effectpos) option.effectpos = {x:0,y:0};
 else {
 if (option.effectpos.x == ”) option.effectpos.x = 0;
 if (option.effectpos.y == ”) option.effectpos.y = 0;
 }
 var effect = new Image;
 effect.onload = function() {
 var effectImg = document.createElement(‘img’);
 effectImg.id = ‘effectImage’;
 effectImg.src = effect.src;
 if (option.effectclass) effectImg.className = option.effectclass;
 with (effectImg.style) {
 position = ‘absolute’;
 display = ‘none’;
 left = [option.effectpos.x,’px’].join(”);;
 top = [option.effectpos.y,’px’].join(”);
 zIndex = ’90’;
 }
 self._set_cursor(effectImg);
 addEvent(effectImg,’click’,function() { effectImg.style.display = ‘none’; });
 box.appendChild(effectImg);
 };
 if (option.effectimg != ”) effect.src = option.effectimg;
 return box;
 },
 _set_photo_size : function()
 {
 var self = this;
 if (self._open == -1) return;
 var imag = self._box.firstChild;
 var targ = { w:self._page.win.w – 30, h:self._page.win.h – 30 };
 var orig = { w:self._imgs[self._open].w, h:self._imgs[self._open].h };
 // shrink image with the same aspect
 var ratio = 1.0;
 if ((orig.w >= targ.w || orig.h >= targ.h) && orig.h && orig.w)

复制代码 代码如下:

var yScroll;

 ratio = ((targ.w / orig.w) < (targ.h / orig.h)) ? targ.w / orig.w : targ.h / orig.h;
 imag.width = Math.floor(orig.w * ratio);
 imag.height = Math.floor(orig.h * ratio);
 self._expandable = (ratio < 1.0) ? true : false;
 if (self._ua.isWinIE) self._box.style.display = “block”;
 self._box.style.top = [self._pos.y + (self._page.win.h – imag.height – 30) / 2,’px’].join(”);
 self._box.style.left = [((self._page.win.w – imag.width – 30) / 2),’px’].join(”);
 self._show_caption(true);
 },
 _set_size : function(onResize)
 {
 var self = this;
 if (self._open == -1) return;
 self._page.update();
 self._pos.update();
 var spin = self._wrap.firstChild;
 if (spin) {
 var top = (self._page.win.h – spin.height) / 2;
 if (self._wrap.style.position == ‘absolute’) top += self._pos.y;
 spin.style.top = [top,’px’].join(”);
 spin.style.left = [(self._page.win.w – spin.width – 30) / 2,’px’].join(”);
 }
 if (self._ua.isWinIE) {
 self._wrap.style.width = [self._page.win.w,’px’].join(”);
 self._wrap.style.height = [self._page.h,’px’].join(”);
 }
 if (onResize) self._set_photo_size();
 },
 _show_action : function()
 {
 var self = this;
 if (self._open == -1 || !self._expandable) return;
 var obj = document.getElementById(‘actionImage’);
 if (!obj) return;
 obj.src = (self._expanded) ? self._shrink : self._expand;
 obj.style.display = ‘inline’;
 },
 _hide_action : function()
 {
 var self = this;
 var obj = document.getElementById(‘actionImage’);
 if (obj) obj.style.display = ‘none’;
 },
 _zoom : function()
 {
 var self = this;
 if (self._expanded) {
 self._set_photo_size();
 self._expanded = false;
 } else if (self._open > -1) {
 var imag = self._box.firstChild;
 self._box.style.top = [self._pos.y,’px’].join(”);
 self._box.style.left = ‘0px’;
 imag.width = self._imgs[self._open].w;
 imag.height = self._imgs[self._open].h;
 self._show_caption(false);
 self._expanded = true;
 }
 self._show_action();
 },
 _show_caption : function(enable)
 {
 var self = this;
 var caption = document.getElementById(‘lightboxCaption’);
 if (!caption) return;
 if (caption.innerHTML.length == 0 || !enable) {
 caption.style.display = ‘none’;
 } else { // now display caption
 var imag = self._box.firstChild;
 with (caption.style) {
 top = [imag.height + 10,’px’].join(”); // 10 is top margin of lightbox
 left = ‘0px’;
 width = [imag.width + 20,’px’].join(”); // 20 is total side margin of lightbox
 height = ‘1.2em’;
 display = ‘block’;
 }
 }
 },
 _show : function(num)
 {
 var self = this;
 var imag = new Image;
 if (num < 0 || num >= self._imgs.length) return;
 var loading = document.getElementById(‘loadingImage’);
 var caption = document.getElementById(‘lightboxCaption’);
 var effect = document.getElementById(‘effectImage’);
 self._open = num; // set opened image number
 self._set_size(false); // calc and set wrapper size
 self._wrap.style.display = “block”;
 if (loading) loading.style.display = ‘inline’;
 imag.onload = function() {
 if (self._imgs[self._open].w == -1) {
 // store original image width and height
 self._imgs[self._open].w = imag.width;
 self._imgs[self._open].h = imag.height;
 }
 if (effect) {
 effect.style.display = (!effect.className || self._imgs[self._open].cls == effect.className)
 ? ‘block’ : ‘none’;
 }
 if (caption) caption.innerHTML = self._imgs[self._open].title;
 self._set_photo_size(); // calc and set lightbox size
 self._hide_action();
 self._box.style.display = “block”;
 self._box.firstChild.src = imag.src;
 self._box.firstChild.setAttribute(‘title’,self._imgs[self._open].title);
 if (loading) loading.style.display = ‘none’;
 };
 self._expandable = false;
 self._expanded = false;
 imag.src = self._imgs[self._open].src;
 },
 _set_cursor : function(obj)
 {
 var self = this;
 if (self._ua.isWinIE && !self._ua.isNewIE) return;
 obj.style.cursor = ‘pointer’;
 },
 _close : function()
 {
 var self = this;
 self._open = -1;
 self._hide_action();
 self._wrap.style.display = “none”;
 self._box.style.display = “none”;
 }
};
// === main ===
addEvent(window,”load”,function() {
 var lightbox = new LightBox({
 loadingimg:”,
 expandimg:”,
 shrinkimg:”,
 effectimg:’images/zzoop.gif’,
 effectpos:{x:-40,y:-20},
 effectclass:’images/effectable’,
 closeimg:”
 });
});
//–>
</SCRIPT>

$(function() {
$(‘a[@rel*=lightbox]’).lightBox();
$(‘.gallery a’).lightBox();
});

if (self.pageYOffset) {
yScroll = self.pageYOffset; //NS
} else if (document.documentElement &&
document.documentElement.scrollTop){ // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
}

 <A href= rel=lightbox><IMG src= height=”100″ width=”100″></A>
 <a href=”” target=”_blank”>click here for back点击返回</a>

这样就决定只有在链接中添加“rel=lightbox”后,该链接才会出现lightbox效果;第二行中的’.gallery
a’则是针对WordPress中原生相册,添加该句后,相册中的图片也会出现lightbox的效果了。
2. 自动添加rel=lightbox属性 因为在上述定义中只有带“rel=lightbox”的链接才会有效果,一般我们是需要对每个上传图片都手动添加“rel=lightbox”这一句。但这样显得麻烦,我们可以让它自动针对带链接的图片自动添加。
首先为每一个带图片的p段落自动添加一个样式:
$(“#content p:has(img)”).addClass(“imgbg”);
比如上面一句就是指定在#content这个区域内,只要段落中带有img的话,则添加样式“imgbg”,使其原无样式的p段落变为<p
class=”imgbg”>的带样式了;
然后对<p
class=”imgbg”>这一段中的链接自动添加“rel=lightbox”属性:

arrayPageScroll = new Array(”,yScroll)
return arrayPageScroll;
}

:
Ahref=…

复制代码 代码如下:

  1. self
    打开任何一个网页,浏览器会首先创建一个窗口,这个窗口就是一 个window
    对象,也是 js 运行所依附的全局环境对象和全局作用域对象。
    self 指窗口本身,它返回的对象 跟window
    对象是一模一样的。也正因为如此,window 对象的常用方法和函数都可以用 self
    代替 window。

  2. 获得窗口的滚动偏移量
    * OmniWeb 4.2-, NetFront 3.3- 下无法获得.
    * Safari 和 OmniWeb 4.5+ 有 bug,但无影响.

$(“.imgbg a”).attr({
rel: “lightbox”
});

有三种方法获取滚动条的位置。

经过上面两部步,所有在文中带链接的图片就会自动执行lightbox的效果了。
3. 选择性地加载lightbox 我们没有必要全站加载lightbox的效果。一般来说我们是在单独的文章页面中才用到这种效果。所以我们可以把lightbox的js代码单独出来,然后在WordPress中header.php中这样设置:

  1. window.pageXOffset/pageYOffset 大多数浏览器,非常可靠
  2. document.documentElement.scrollLeft/Top Strict 模式下的 IE6
    和其它很少一些浏览器
  3. document.body.scrollLeft/Top IE6 和 其它一些浏览器

复制代码 代码如下:

浏览器在支持 document.body 或者 document.documentElement
的情况下,如果提供了 scrollLeft/Top,那么除了 Safari 和 OmniWeb 4.5+ 外,
这些值都是
很可靠的。在 Safari and OmniWeb 4.5+ 中,当滚动条偏移量为 0 时,会返回
-8,其它情况下正常。当然了,因为它们提供了正确的
window.pageXOffset/pageYOffset,
这个 bug 不会造成什么影响。

<?php if ( is_single() ) : ?>
<script type=”text/javascript” src=”<?php
bloginfo(‘template_url’); ?>/js/lightbox.js”></script>
<?php endif ?>

function getPageSize(){

更进一步,如果你想对只有照片的文章才执行该效果,则你可以准确地只为标有“照片”标签的文章才加载lightbox,设置改为:

//整个页面的大小
var xScroll, yScroll;

复制代码 代码如下:

if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){
// all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac…would also work in Explorer 6 Strict, Mozilla
and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}

<?php if ( is_single() && has_tag(‘照片’) ) : ?>
<script type=”text/javascript” src=”<?php
bloginfo(‘template_url’);
?>/js/lightbox.js.php”></script>
<?php endif ?>

//可见窗口(view port)的大小
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement &&
document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}

上面几点就是我对lightbox的运用了,希望对各位有所帮助啦。

// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}

// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}

  1. 指定哪些条件下运用Ligh…

arrayPageSize = new
Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}

文档加载完之前是无法获取窗口大小值的,而且还要对不同浏览器使用不同的方法。可用参数如下:

  1. window.innerHeight/Width IE 除外的大多数浏览器
  2. document.body.clientHeight/Width 包括 IE 在内的大多数浏览器
  3. document.documentElement.clientHeight/Width 包括 IE 在内的大多 DOM
    浏览器

关于 clientHeight/Width
会有点乱,因为在不同浏览器下,甚至在同一个浏览器下 clientHeight/Width
都可能不同,要看文档类型激发的是浏览器的
strict 模式还是 quirks
模式。有时,它们指的是窗口的尺寸,有时是文档内容的尺寸。下表展示了不同浏览器、不同模式中的属性:

Properties and what they relate to
Browser window.
innerHeight
document.
body.
clientHeight
document.
documentElement.
clientHeight
Opera 9.5+ strict window document window
Opera 9.5+ quirks window window document
Opera 7-9.2 window window document
Opera 6 window window N/A
Mozilla strict window document window
Mozilla quirks window window document
KHTML window document document
Safari window document document
iCab 3 window document document
iCab 2 window window N/A
IE 6+ strict N/A document window
IE 5-7 quirks N/A window 0
IE 4 N/A window N/A
ICEbrowser window window document
Tkhtml Hv3 window window document
Netscape 4 window N/A N/A

如上所示,好歹还是有个值是确定的:innerHeight,不过 IE
却不支持这个属性。目前,几乎所有的浏览器都支持使用
window.innerHeight/Width 属性。

算法逻辑:

  1. 如果存在 window.innerHeight/Width 属性, 是可以完全信赖的, 使用
    window.innerHeight/Width 就可以了.
  2. 否则如果存在 document.documentElement.clientHeight/Width 属性且值大于
    0,就用 document.documentElement.clientHeight/Width.
  3. 否则就用 document.body.clientHeight/Width.

此算法在 IE6+ “standards compliant mode” 下,当窗口所谓 0px × 0px
大小时,失效。

 

 

function showLightbox(objLink)
{
// prep objects
var objOverlay = document.getElementById(‘overlay’);
// overlay 为遮罩层
var objLightbox = document.getElementById(‘lightbox’);
var objCaption = document.getElementById(‘lightboxCaption’);
var objImage = document.getElementById(‘lightboxImage’);
var objLoadingImage = document.getElementById(‘loadingImage’);
// 加载图片
var objLightboxDetails = document.getElementById(‘lightboxDetails’);

var arrayPageSize = getPageSize();
var arrayPageScroll = getPageScroll();

// center loadingImage if it exists
if (objLoadingImage) {
// arrayPageSize = new
Array(pageWidth,pageHeight,windowWidth,windowHeight)
objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3]
– 35 – objLoadingImage.height) / 2) + ‘px’);
// top = 滚动条位置 + [视口高度 - 35px(浏览器状态栏高度) –
加载图片的高度]/2
objLoadingImage.style.left = (((arrayPageSize[0] – 20 –
objLoadingImage.width) / 2) + ‘px’);
objLoadingImage.style.display = ‘block’;
// 设置加载图片在页面中间,浏览器状态栏高度约为 35px,滚动条栏宽度约为
20px。
}

// set height of Overlay to take up whole page and show
// 设置遮罩层高度
objOverlay.style.height = (arrayPageSize[1] + ‘px’);
objOverlay.style.display = ‘block’;

// preload image
imgPreload = new Image();

imgPreload.onload=function(){
objImage.src = objLink.href;

// center lightbox and make sure that the top and left values are not
negative
// and the image placed outside the viewport
var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] – 35 –
imgPreload.height) / 2);
var lightboxLeft = ((arrayPageSize[0] – 20 – imgPreload.width) / 2);

objLightbox.style.top = (lightboxTop < 0) ? “0px” : lightboxTop +
“px”;
objLightbox.style.left = (lightboxLeft < 0) ? “0px” : lightboxLeft +
“px”;

objLightboxDetails.style.width = imgPreload.width + ‘px’;

if(objLink.getAttribute(‘title’)){
objCaption.style.display = ‘block’;
objCaption.innerHTML = objLink.getAttribute(‘title’);
} else {
objCaption.style.display = ‘none’;
}

// A small pause between the image loading and displaying is required
with IE,
// this prevents the previous image displaying for a short burst causing
flicker.
if (navigator.appVersion.indexOf(“MSIE”)!=-1){
pause(250);
}

if (objLoadingImage) { objLoadingImage.style.display = ‘none’; }
// 隐藏加载图

// Hide select boxes as they will ‘peek’ through the image in IE
selects = document.getElementsByTagName(“select”);
for (i = 0; i != selects.length; i++) {
selects[i].style.visibility = “hidden”;
}

objLightbox.style.display = ‘block’;

// After image is loaded, update the overlay height as the new image
might have
// increased the overall page height.
arrayPageSize = getPageSize();
objOverlay.style.height = (arrayPageSize[1] + ‘px’);

// Check for ‘x’ keypress
listenKey();

return false;
}

imgPreload.src = objLink.href;

}

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图