Sina의 라이트박스 효과. _형태 효과

사용할 때는 A 태그에 rel="lightbox"를 추가하면 됩니다. 예:


저도 직접 작성했는데 두 개의 모듈이 포함되어 있습니다(func.js 공용 라이브러리 및 ImagesLoader.js 이미지 로딩 클래스). 잠시 후.
HTML #overlay {
FILTER: Alpha(opacity=50) BACKGROUND-IMAGE: url(images/blank.gif): #000
}


<script> <BR><!--// <BR>function addEvent(object, type, handler) <BR>{ <BR> if (object.addEventListener) { <BR> object.addEventListener(type, handler, false); <BR> } else if (object.attachEvent) { <BR> object.attachEvent(['on',type].join(''),handler); <BR> } else { <BR> object[['on',type].join('')] = handler; <BR> } <BR>} <BR>function WindowSize() <BR>{ // window size object <BR> this.w = 0; <BR> this.h = 0; <BR> return this.update(); <BR>} <BR>WindowSize.prototype.update = function() <BR>{ <BR> var d = document; <BR> this.w = <BR> (window.innerWidth) ? window.innerWidth <BR> : (d.documentElement && d.documentElement.clientWidth) ? d.documentElement.clientWidth <BR> : d.body.clientWidth; <BR> this.h = <BR> (window.innerHeight) ? window.innerHeight <BR> : (d.documentElement && d.documentElement.clientHeight) ? d.documentElement.clientHeight <BR> : d.body.clientHeight; <BR> return this; <BR>}; <BR>function PageSize() <BR>{ // page size object <BR> this.win = new WindowSize(); <BR> this.w = 0; <BR> this.h = 0; <BR> return this.update(); <BR>} <BR>PageSize.prototype.update = function() <BR>{ <BR> var d = document; <BR> this.w = <BR> (window.innerWidth && window.scrollMaxX) ? window.innerWidth + window.scrollMaxX <BR> : (d.body.scrollWidth > d.body.offsetWidth) ? d.body.scrollWidth <BR> : d.body.offsetWidt; <BR> this.h = <BR> (window.innerHeight && window.scrollMaxY) ? window.innerHeight + window.scrollMaxY <BR> : (d.body.scrollHeight > d.body.offsetHeight) ? d.body.scrollHeight <BR> : d.body.offsetHeight; <BR> this.win.update(); <BR> if (this.w < this.win.w) this.w = this.win.w; <BR> if (this.h < this.win.h) this.h = this.win.h; <BR> return this; <BR>}; <BR>function PagePos() <BR>{ // page position object <BR> this.x = 0; <BR> this.y = 0; <BR> return this.update(); <BR>} <BR>PagePos.prototype.update = function() <BR>{ <BR> var d = document; <BR> this.x = <BR> (window.pageXOffset) ? window.pageXOffset <BR> : (d.documentElement && d.documentElement.scrollLeft) ? d.documentElement.scrollLeft <BR> : (d.body) ? d.body.scrollLeft <BR> : 0; <BR> this.y = <BR> (window.pageYOffset) ? window.pageYOffset <BR> : (d.documentElement && d.documentElement.scrollTop) ? d.documentElement.scrollTop <BR> : (d.body) ? d.body.scrollTop <BR> : 0; <BR> return this; <BR>}; <BR>function UserAgent() <BR>{ // user agent information <BR> var ua = navigator.userAgent; <BR> this.isWinIE = this.isMacIE = false; <BR> this.isGecko = ua.match(/Gecko\//); <BR> this.isSafari = ua.match(/AppleWebKit/); <BR> this.isOpera = window.opera; <BR> if (document.all && !this.isGecko && !this.isSafari && !this.isOpera) { <BR> this.isWinIE = ua.match(/Win/); <BR> this.isMacIE = ua.match(/Mac/); <BR> this.isNewIE = (ua.match(/MSIE 5\.5/) || ua.match(/MSIE 6\.0/)); <BR> } <BR> return this; <BR>} <BR>// === lightbox === <BR>function LightBox(option) <BR>{ <BR> var self = this; <BR> self._imgs = new Array(); <BR> self._wrap = null; <BR> self._box = null; <BR> self._open = -1; <BR> self._page = new PageSize(); <BR> self._pos = new PagePos(); <BR> self._ua = new UserAgent(); <BR> self._expandable = false; <BR> self._expanded = false; <BR> self._expand = option.expandimg; <BR> self._shrink = option.shrinkimg; <BR> return self._init(option); <BR>} <BR>LightBox.prototype = { <BR> _init : function(option) <BR> { <BR> var self = this; <BR> var d = document; <BR> if (!d.getElementsByTagName) return; <BR> var links = d.getElementsByTagName("a"); <BR> for (var i=0;i<links.length;i++) { <BR> var anchor = links[i]; <BR> var num = self._imgs.length; <BR> if (!anchor.getAttribute("href") <BR> || anchor.getAttribute("rel") != "lightbox") continue; <BR> // initialize item <BR> self._imgs[num] = {src:anchor.getAttribute("href"),w:-1,h:-1,title:'',cls:anchor.className}; <BR> if (anchor.getAttribute("title")) <BR> self._imgs[num].title = anchor.getAttribute("title"); <BR> else if (anchor.firstChild && anchor.firstChild.getAttribute && anchor.firstChild.getAttribute("title")) <BR> self._imgs[num].title = anchor.firstChild.getAttribute("title"); <BR> anchor.onclick = self._genOpener(num); // set closure to onclick event <BR> } <BR> var body = d.getElementsByTagName("body")[0]; <BR> self._wrap = self._createWrapOn(body,option.loadingimg); <BR> self._box = self._createBoxOn(body,option); <BR> return self; <BR> }, <BR> _genOpener : function(num) <BR> { <BR> var self = this; <BR> return function() { self._show(num); return false; } <BR> }, <BR> _createWrapOn : function(obj,imagePath) <BR> { <BR> var self = this; <BR> if (!obj) return null; <BR> // create wrapper object, translucent background <BR> var wrap = document.createElement('div'); <BR> wrap.id = 'overlay'; <BR> with (wrap.style) { <BR> display = 'none'; <BR> position = 'fixed'; <BR> top = '0px'; <BR> left = '0px'; <BR> zIndex = '50'; <BR> width = '100%'; <BR> height = '100%'; <BR> } <BR> if (self._ua.isWinIE) wrap.style.position = 'absolute'; <BR> addEvent(wrap,"click",function() { self._close(); }); <BR> obj.appendChild(wrap); <BR> // create loading image, animated image <BR> var imag = new Image; <BR> imag.onload = function() { <BR> var spin = document.createElement('img'); <BR> spin.id = 'loadingImage'; <BR> spin.src = imag.src; <BR> spin.style.position = 'relative'; <BR> self._set_cursor(spin); <BR> addEvent(spin,'click',function() { self._close(); }); <BR> wrap.appendChild(spin); <BR> imag.onload = function(){}; <BR> }; <BR> if (imagePath != '') imag.src = imagePath; <BR> return wrap; <BR> }, <BR> _createBoxOn : function(obj,option) <BR> { <BR> var self = this; <BR> if (!obj) return null; <BR> // create lightbox object, frame rectangle <BR> var box = document.createElement('div'); <BR> box.id = 'lightbox'; <BR> with (box.style) { <BR> display = 'none'; <BR> position = 'absolute'; <BR> zIndex = '60'; <BR> } <BR> obj.appendChild(box); <BR> // create image object to display a target image <BR> var img = document.createElement('img'); <BR> img.id = 'lightboxImage'; <BR> self._set_cursor(img); <BR> addEvent(img,'click',function(){ self._close(); }); <BR> addEvent(img,'mouseover',function(){ self._show_action(); }); <BR> addEvent(img,'mouseout',function(){ self._hide_action(); }); <BR> box.appendChild(img); <BR> var zoom = document.createElement('img'); <BR> zoom.id = 'actionImage'; <BR> with (zoom.style) { <BR> display = 'none'; <BR> position = 'absolute'; <BR> top = '15px'; <BR> left = '15px'; <BR> zIndex = '70'; <BR> } <BR> self._set_cursor(zoom); <BR> zoom.src = self._expand; <BR> addEvent(zoom,'mouseover',function(){ self._show_action(); }); <BR> addEvent(zoom,'click', function() { self._zoom(); }); <BR> box.appendChild(zoom); <BR> addEvent(window,'resize',function(){ self._set_size(true); }); <BR> // close button <BR> if (option.closeimg) { <BR> var btn = document.createElement('img'); <BR> btn.id = 'closeButton'; <BR> with (btn.style) { <BR> display = 'inline'; <BR> position = 'absolute'; <BR> right = '10px'; <BR> top = '10px'; <BR> width = '15px'; <BR> height = '15px'; <BR> zIndex = '80'; <BR> } <BR> btn.src = option.closeimg; <BR> self._set_cursor(btn); <BR> addEvent(btn,'click',function(){ self._close(); }); <BR> box.appendChild(btn); <BR> } <BR> // caption text <BR> var caption = document.createElement('span'); <BR> caption.id = 'lightboxCaption'; <BR> with (caption.style) { <BR> display = 'none'; <BR> position = 'absolute'; <BR> zIndex = '80'; <BR> } <BR> box.appendChild(caption); <BR> // create effect image <BR> if (!option.effectpos) option.effectpos = {x:0,y:0}; <BR> else { <BR> if (option.effectpos.x == '') option.effectpos.x = 0; <BR> if (option.effectpos.y == '') option.effectpos.y = 0; <BR> } <BR> var effect = new Image; <BR> effect.onload = function() { <BR> var effectImg = document.createElement('img'); <BR> effectImg.id = 'effectImage'; <BR> effectImg.src = effect.src; <BR> if (option.effectclass) effectImg.className = option.effectclass; <BR> with (effectImg.style) { <BR> position = 'absolute'; <BR> display = 'none'; <BR> left = [option.effectpos.x,'px'].join('');; <BR> top = [option.effectpos.y,'px'].join(''); <BR> zIndex = '90'; <BR> } <BR> self._set_cursor(effectImg); <BR> addEvent(effectImg,'click',function() { effectImg.style.display = 'none'; }); <BR> box.appendChild(effectImg); <BR> }; <BR> if (option.effectimg != '') effect.src = option.effectimg; <BR> return box; <BR> }, <BR> _set_photo_size : function() <BR> { <BR> var self = this; <BR> if (self._open == -1) return; <BR> var imag = self._box.firstChild; <BR> var targ = { w:self._page.win.w - 30, h:self._page.win.h - 30 }; <BR> var orig = { w:self._imgs[self._open].w, h:self._imgs[self._open].h }; <BR> // shrink image with the same aspect <BR> var ratio = 1.0; <BR> if ((orig.w >= targ.w || orig.h >= targ.h) && orig.h && orig.w) <br><br> ratio = ((targ.w / orig.w) < (targ.h / orig.h)) ? targ.w / orig.w : targ.h / orig.h; <BR> imag.width = Math.floor(orig.w * ratio); <BR> imag.height = Math.floor(orig.h * ratio); <BR> self._expandable = (ratio < 1.0) ? true : false; <BR> if (self._ua.isWinIE) self._box.style.display = "block"; <BR> self._box.style.top = [self._pos.y + (self._page.win.h - imag.height - 30) / 2,'px'].join(''); <BR> self._box.style.left = [((self._page.win.w - imag.width - 30) / 2),'px'].join(''); <BR> self._show_caption(true); <BR> }, <BR> _set_size : function(onResize) <BR> { <BR> var self = this; <BR> if (self._open == -1) return; <BR> self._page.update(); <BR> self._pos.update(); <BR> var spin = self._wrap.firstChild; <BR> if (spin) { <BR> var top = (self._page.win.h - spin.height) / 2; <BR> if (self._wrap.style.position == 'absolute') top += self._pos.y; <BR> spin.style.top = [top,'px'].join(''); <BR> spin.style.left = [(self._page.win.w - spin.width - 30) / 2,'px'].join(''); <BR> } <BR> if (self._ua.isWinIE) { <BR> self._wrap.style.width = [self._page.win.w,'px'].join(''); <BR> self._wrap.style.height = [self._page.h,'px'].join(''); <BR> } <BR> if (onResize) self._set_photo_size(); <BR> }, <BR> _show_action : function() <BR> { <BR> var self = this; <BR> if (self._open == -1 || !self._expandable) return; <BR> var obj = document.getElementById('actionImage'); <BR> if (!obj) return; <BR> obj.src = (self._expanded) ? self._shrink : self._expand; <BR> obj.style.display = 'inline'; <BR> }, <BR> _hide_action : function() <BR> { <BR> var self = this; <BR> var obj = document.getElementById('actionImage'); <BR> if (obj) obj.style.display = 'none'; <BR> }, <BR> _zoom : function() <BR> { <BR> var self = this; <BR> if (self._expanded) { <BR> self._set_photo_size(); <BR> self._expanded = false; <BR> } else if (self._open > -1) { <BR> var imag = self._box.firstChild; <BR> self._box.style.top = [self._pos.y,'px'].join(''); <BR> self._box.style.left = '0px'; <BR> imag.width = self._imgs[self._open].w; <BR> imag.height = self._imgs[self._open].h; <BR> self._show_caption(false); <BR> self._expanded = true; <BR> } <BR> self._show_action(); <BR> }, <BR> _show_caption : function(enable) <BR> { <BR> var self = this; <BR> var caption = document.getElementById('lightboxCaption'); <BR> if (!caption) return; <BR> if (caption.innerHTML.length == 0 || !enable) { <BR> caption.style.display = 'none'; <BR> } else { // now display caption <BR> var imag = self._box.firstChild; <BR> with (caption.style) { <BR> top = [imag.height + 10,'px'].join(''); // 10 is top margin of lightbox <BR> left = '0px'; <BR> width = [imag.width + 20,'px'].join(''); // 20 is total side margin of lightbox <BR> height = '1.2em'; <BR> display = 'block'; <BR> } <BR> } <BR> }, <BR> _show : function(num) <BR> { <BR> var self = this; <BR> var imag = new Image; <BR> if (num < 0 || num >= self._imgs.length) return; <BR> var loading = document.getElementById('loadingImage'); <BR> var caption = document.getElementById('lightboxCaption'); <BR> var effect = document.getElementById('effectImage'); <BR> self._open = num; // set opened image number <BR> self._set_size(false); // calc and set wrapper size <BR> self._wrap.style.display = "block"; <BR> if (loading) loading.style.display = 'inline'; <BR> imag.onload = function() { <BR> if (self._imgs[self._open].w == -1) { <BR> // store original image width and height <BR> self._imgs[self._open].w = imag.width; <BR> self._imgs[self._open].h = imag.height; <BR> } <BR> if (effect) { <BR> effect.style.display = (!effect.className || self._imgs[self._open].cls == effect.className) <BR> ? 'block' : 'none'; <BR> } <BR> if (caption) caption.innerHTML = self._imgs[self._open].title; <BR> self._set_photo_size(); // calc and set lightbox size <BR> self._hide_action(); <BR> self._box.style.display = "block"; <BR> self._box.firstChild.src = imag.src; <BR> self._box.firstChild.setAttribute('title',self._imgs[self._open].title); <BR> if (loading) loading.style.display = 'none'; <BR> }; <BR> self._expandable = false; <BR> self._expanded = false; <BR> imag.src = self._imgs[self._open].src; <BR> }, <BR> _set_cursor : function(obj) <BR> { <BR> var self = this; <BR> if (self._ua.isWinIE && !self._ua.isNewIE) return; <BR> obj.style.cursor = 'pointer'; <BR> }, <BR> _close : function() <BR> { <BR> var self = this; <BR> self._open = -1; <BR> self._hide_action(); <BR> self._wrap.style.display = "none"; <BR> self._box.style.display = "none"; <BR> } <BR>}; <BR>// === main === <BR>addEvent(window,"load",function() { <BR> var lightbox = new LightBox({ <BR> loadingimg:'http://image2.sina.com.cn/dy/news/2006/0618/images/loading.gif', <BR> expandimg:'http://image2.sina.com.cn/dy/news/2006/0618/images/expand.gif', <BR> shrinkimg:'http://image2.sina.com.cn/dy/news/2006/0618/images/shrink.gif', <BR> effectimg:'images/zzoop.gif', <BR> effectpos:{x:-40,y:-20}, <BR> effectclass:'images/effectable', <BR> closeimg:'http://image2.sina.com.cn/dy/news/2006/0618/images/close.gif' <BR> }); <BR>}); <BR>//--> <BR></script> 뒤로가려면 여기를 클릭하세요. 돌아가려면 클릭하세요