LightboxOptions = Object.extend({ imageCheckerCreated: false, cbbCreated: false, maxImageWidth: 640, fileLoadingImage: '/images/lightbox/loading_en.gif', fileBottomNavCloseImage: '/images/lightbox/closelabel.png', overlayOpacity: 0.65, animate: true, animate_bg: true, resizeSpeed: 8, borderSize: 10, labelSave: "<img src=\"/e.gif\" class=\"save\"/>Сохранить (оригинал)", labelImage: "Изображение", labelOf: "из", caption_next: "&gt;&gt;", caption_prev: "&lt;&lt;", caption_prev_help: "Смотреть предыдущее изображение", caption_next_help: "Смотреть следующее изображение" }, window.LightboxOptions || {}); var LB_IframeCount = 0; var Lightbox = Class.create(); var LightBoxHTMLCreated = false; Lightbox.prototype = { imageArray: [], LoadedForms: [], LoadedFormsJS: [], lastImage: -1, lastImageWidth: 0, Started: false, LikeVideo: false, LikeForm: false, Iframe_count: 0, activeImage: undefined, initialize: function(){ this.Iframe_count = LB_IframeCount; this.keyboardAction = this.keyboardAction.bindAsEventListener(this); if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10; if (LightboxOptions.resizeSpeed < 1) LightboxOptions.resizeSpeed = 1; this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0; this.overlayDuration = LightboxOptions.animate ? 0.2 : 0; this.SlideDuration = 0.6; var size = (LightboxOptions.animate ? 250 : 1) + 'px'; if (!LightBoxHTMLCreated){ LightBoxHTMLCreated = true; objBody = $$('body')[0]; objBody.appendChild(Builder.node('div',{id:'overlay'})); objBody.appendChild(Builder.node('div',{id:'lightboxc'}));} var html = '<div id="lightbox"><div class="block_color"><div id="lightboxcbb" mode="auto" class="cbb"><table class="table p100" cellpadding="0" cellspacing="0"><tr><td colspan="3" class="head"><div id="lb_save_link" class="save_link"><a href="#" id="saveLink" target="_blank" >'+LightboxOptions.labelSave+'</a></div><div class="close_link"><div><input id="bottomNavClose" type="button" class="button" value="Скрыть"/></div></div></td></tr><tr><td class="l"><a href="#" id="prevLink" title="'+LightboxOptions.caption_prev_help+'">'+LightboxOptions.caption_prev+'</a>&nbsp;</td><td class="c" style="width:'+LightboxOptions.maxImageWifth+';"><div id="lb_image"><a class="holst shadow"><img id="lightboxImage" src="/e.gif" /></a></div><div class="left"><span id="caption">imagename</span></div><div class="left clearl"><span id="numberDisplay">imagepager</span></div><div class="right"><a id="bottomNavClose2" href="#">Скрыть</a></div></td><td class="r">&nbsp;<a href="#" id="nextLink" title="'+LightboxOptions.caption_next_help+'">'+LightboxOptions.caption_next+'</a></td></tr><tr><td></td><td class="c2"><div id="lb_images"></div></td><td></td></tr></table></div></div><div id="lightbox_loading" style="position:absolute;top:-10000px; z-index:109; background-color: green;"></div>'; $('lightboxc').innerHTML = html; $('lightbox').hide().observe('click', (function(event){ if (event.element().id == 'lightbox') this.end();}).bind(this)); $('prevLink').observe('click', (function(event){ event.stop(); this.changeImage(this.activeImage - 1);}).bindAsEventListener(this)); $('nextLink').observe('click', (function(event){ event.stop(); this.changeImage(this.activeImage + 1);}).bindAsEventListener(this)); $('bottomNavClose').observe('click', (function(event){ event.stop(); this.end();}).bind(this)); $('bottomNavClose2').observe('click', (function(event){ event.stop(); this.end();}).bind(this)); var th = this; (function(){ var ids = 'overlay lightboxc lightbox_loading lightbox outlightbox lb_images lb_image outerImageContainer imageContainer lb_save_link lightboxImage hoverNav prevLink nextLink saveLink loading loadingLink ' + 'imageDataContainer imageData_ imageData imageDetails caption numberDisplay bottomNav bottomNavClose NavCloseImage bottomNav2 bottomNavClose2 imageCheckerContainer'; $w(ids).each(function(id){ th[id] = $(id);});}).defer();}, restart: function(){ this.start(this.imageLink, this.LikeVideo, this.LikeForm);}, getnum: function(tag){ var t = tag.getAttribute("mhref").split('!@!'); var num = 0; try{ num = parseInt(t[3],10); if (isNaN(num)){ num = parseInt(tag.getAttribute("mnum"),10); if (isNaN(num)){ num = 0;}} }catch(e){}; return num;}, start: function(imageLink, likevideo, likeform){ this.imageLink = imageLink; this.LikeImage = true; this.LikeVideo = likevideo; this.LikeForm = likeform; if (this.LikeVideo || this.LikeForm ) this.LikeImage = false; if (! this.LikeImage){ $('overlay').hide().observe('click', (function(){}));} else { $('overlay').hide().observe('click', (function(){ this.end();}).bind(this));} group = MyLightBoxGetGroup(imageLink.getAttribute("rel")); LightboxOptions.imageCheckerCreated = false; $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' }); var arrayPageSize = this.getPageSize(); $('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' }); new Effect.Appear(this.overlay,{duration: this.overlayDuration, from: 0.0, to:LightboxOptions.overlayOpacity}); this.imageArray = []; var imageNum = this.getnum(imageLink); if ((group == 'lightbox')){ if (this.LikeVideo || this.LikeForm){ this.imageArray[0] = [imageLink.getAttribute("mhref"), imageLink.title];} else { t = imageLink.getAttribute("mhref").split('!@!'); this.imageArray[imageNum] = [t[0], imageLink.title, t[1], t[2] ];}} else { tags = lightboxCollection.groups[group]; for(i=0; i < tags.length; i++){ num = this.getnum(tags[i]); if (this.LikeVideo || this.LikeForm){ this.imageArray[num] = [tags[i].getAttribute("mhref"), tags[i].title];} else { t = tags[i].getAttribute("mhref").split('!@!'); this.imageArray[num] = [t[0], tags[i].title, t[1], t[2] ];}} } var arrayPageScroll = document.viewport.getScrollOffsets(); var width=0; try{ var view = document.viewport; width = view.getWidth(); if (width<=0){ width = screen.width -50;}}catch(e){} var lightboxTop = 70 + arrayPageScroll[1]; var lightboxLeft = (width- 870)/2 + arrayPageScroll[0]; this.lightboxc.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }); this.lb_images.innerHTML = ''; if (this.imageArray.length>1 && !this.LikeVideo){ var html = '<table class="table p100" cellpadding="0" cellspacing="0">'; var ids = ''; var sumw = 0; var emptw = this.imageArray.length * 10; var counter = 0; var j = 0; for (var i=0; i<this.imageArray.length;i++){ { if ( this.imageArray[i] != undefined){ var id = 'lightboxs_'+counter; ids += 'lightboxs_'+counter+'#'+i+' '; j++; if (j == 1){ html += '<tr><td></td>';} html += '<td width="90"><a href="#" class="holst shadow"><img width="80" id="'+id+'" src="'+this.imageArray[i][2]+'" /></a></td>'; if (j == 5){ html += '<td></td></tr>'; j = 0;} counter++;}} } if (j != 0 && j != 5) html += '<td></td></tr>'; this.lb_images.innerHTML = html+'</table>'; var t1_1 = ids.split(' '); for(var j = 0;j<t1_1.length;j++){ if ( t1_1[j].length>0){ var t1_2 = t1_1[j].split('#'); eval('$(t1_2[0]).observe(\'click\', (function(event){ event.stop(); this.changeImage('+t1_2[1]+');}).bindAsEventListener(this));');}} } if (!this.cbbCreated){ cbb.applyTag($('lightboxcbb'), null); this.cbbCreated = true;} new Effect.Parallel( [ new Effect.SlideDown(this.lightbox, { sync: true, duration: this.SlideDuration, delay: this.overlayDuration }), new Effect.Appear(this.lightbox, { sync: true, duration: this.SlideDuration, delay: this.overlayDuration }) ], {duration: this.SlideDuration} ); this.changeImage(imageNum); this.Started = true;}, changeImage: function(imageNum){ if (this.imageArray.length > imageNum && imageNum >= 0 ){ this.activeImage = imageNum; this.caption.update(this.imageArray[this.activeImage][1]).show(); if (this.LikeVideo){ this.prevLink.update('').show(); this.nextLink.update('').show(); this.caption.update('').show(); this.numberDisplay.update('').show(); this.lb_image.innerHTML = this.ShowVideo(this.imageArray[this.activeImage][0]); this.saveLink.innerHTML = LightboxOptions.labelSave; this.saveLink.href = this.imageArray[this.activeImage][0]; this.bottomNavClose2.update('Скрыть').show();} else if (this.LikeForm){ this.prevLink.update('').show(); this.nextLink.update('').show(); this.caption.update('').show(); this.numberDisplay.update('').show(); this.saveLink.innerHTML = ''; this.bottomNavClose2.update('').show(); this.ShowForm(this.imageArray[this.activeImage][0]);} else { this.saveLink.innerHTML = LightboxOptions.labelSave; this.bottomNavClose2.update('Скрыть').show(); this.saveLink.href = this.imageArray[this.activeImage][3]; if (this.imageArray.length > 1){ this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + ' ' + this.imageArray.length).show();} else { this.numberDisplay.update('').show();} if (imageNum > 0) this.prevLink.update(LightboxOptions.caption_prev).show(); else this.prevLink.update('').show(); if ( this.imageArray.length - 1 > imageNum ) this.nextLink.update(LightboxOptions.caption_next).show(); else this.nextLink.update('').show(); if (LightboxOptions.animate){ var src = '/e.gif'; var loading = 'Загрузка'; width = 640; height = 400; if (this.lastImage >= 0){ src = this.imageArray[this.lastImage][0]; if (this.lastImageWidth > 0) width=this.lastImageWidth; $('lightbox_temp').innerHTML = '<img width="'+width+'" id="test_lightbox_image" src="'+src+'" />'; var oimg = $('test_lightbox_image'); width = oimg.width; height = oimg.height;} width=LightboxOptions.maxImageWidth; if (!LightboxOptions.animate_bg) src = '/e.gif'; loading = '<div style="display:block;text-align:center; width:'+LightboxOptions.maxImageWidth+'px;"><div id="loader" style="background: url('+src+') no-repeat center; width:'+width+'px; height:'+height+';"><div id="loaderbg" style="display:none; width:'+width+'px; height:'+height+';"><img width="'+LightboxOptions.maxImageWidth+'" height="'+height+'" style="background: url('+LightboxOptions.fileLoadingImage+') no-repeat center" src="/e.gif" /></div></div></div>'; this.lb_image.innerHTML = loading; new Effect.Appear('loaderbg',{duration: 0.5, from: 0.0, to: 0.45});} this.imgPreloader = new Image(); this.imgPreloader.onload = (function(){ this.ShowImage();}).bind(this); this.imgPreloader.src = this.imageArray[this.activeImage][0]; this.lastImage = this.activeImage;}} }, ShowImage: function(){ var width = ''; this.lastImageWidth = this.imgPreloader.width; if (this.imgPreloader.width > LightboxOptions.maxImageWidth){ this.lastImageWidth = LightboxOptions.maxImageWidth; width=' width="'+LightboxOptions.maxImageWidth+'" ';} this.lb_image.innerHTML = '<div style="width:'+LightboxOptions.maxImageWidth+'px; text-align:center; display:block;"><img'+width+' id="test_lightbox_image" src="'+LightBox.imageArray[LightBox.activeImage][0]+'" /></div>';}, ShowVideo: function(src){ html = '<object id="NSPlay" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject" '; html += 'height="400" width="640">'; html += '<param name="FileName" value="'+src+'">'; html += '<param name="ShowControls" value="1">'; html += '<param name="ShowVideo" value="0">'; html += '<param name="ShowStatusBar" value="1">'; html += '<param name="AutoSize" value="1">'; html += '<embed type="application/x-mplayer2" '; html += 'pluginspage="http://www.microsoft.com/windows/mediaplayer/en/default.asp" '; html += 'filename="'+src+'" src="'+src+'" '; html += 'name="NSPlay" showcontrols="1" showvideo="0" showstatusbar="1" height="400" width="640"> '; html += '</object>'; return html;}, ShowForm: function(src){ this.src = src; if (this.LoadedForms[src] == null){ this.lb_image.innerHTML = 'Загрузка. Пожалуйста подождите... <br /><img src="/e.gif" class="ajaxLoader" />'; src = ReplaceAll(src, ' ', '%20'); new Ajax.Request( src, { requestHeaders: "", onComplete: this.ajaxForm.bind(this) });} else { this.ViewLoadedForm(0);}}, ajaxForm: function(response){ var answer = unescape(response.responseText); js = RunJS(answer); this.LoadedForms[this.src] = answer; this.LoadedFormsJS[this.src] = js; this.ViewLoadedForm(0);}, getAjaxForm: function (form_, action){ this.iframe_name = 'lightbox_iframe_target_'+this.Iframe_count; this.form_name = 'unique_lb_form_'+ this.Iframe_count; this.Iframe_count++; LB_IframeCount++; var caption = ''; var vars = form_.split('#?content?#'); if (vars.length > 1){ form_ = vars[1];} var Form = '<div class="p100" style="text-align:left;"><a name="aerrors"></a><form id="'+this.form_name+'" action="'+this.getAction(action, '/submit')+'" enctype="multipart/form-data" target="'+this.iframe_name+'" method="post" >'; Form += form_ + '<iframe name="'+this.iframe_name+'" id="'+this.iframe_name+'" width="1" height="1" style="display:none;" >no iframe</iframe>'; Form += '</form></div>'; return Form;}, getAction: function (action, postfix){ pos = action.indexOf('?'); if (pos != -1){ base = action.substring(0, pos); params = action.substring(pos, action.length); return base+postfix+params;} else return action+postfix;}, evalJS: function(){ evalgood_1 = false; try{ var js = this.LoadedFormsJS[this.src]+' evalgood_1 = true;'; eval(js);}catch(e){} if (evalgood_1){ clearInterval(this.EvalTimerID);} else { this.evalCounter++; if (this.evalCounter == 120){ clearInterval(this.EvalTimerID); this.lb_image.innerHTML = 'Извните, но загрузить форму не удалось. Обновите страницу и попытайтесь еще раз. <br/> Спасибо за понимание :)';}} }, ViewLoadedForm: function (error){ if (error == 1){ alert('error form'); this.lb_image.innerHTML = this.LoadedErrorForm;} else { this.lb_image.innerHTML = this.getAjaxForm(this.LoadedForms[this.src], this.src); this.evalCounter = 0; this.EvalTimerID = setInterval("LightBox.evalJS()", 500);}}, SubmitForm: function (but_div){ this.From_but_div = but_div; $(but_div).innerHTML = 'Отправка. Пожалуйста подождите... <br /><img src="/e.gif" class="ajaxLoader" />'; SubmitForm(this.form_name);}, SubmitResponse: function(flag, form, message){ if (flag == 1){ form = this.getAjaxForm(form, this.src); this.LoadedErrorForm = form; this.lb_image.innerHTML = this.LoadedErrorForm; x = $(this.From_but_div).innerHTML; $(this.From_but_div).innerHTML = x + '&nbsp;&nbsp;<span class="red">Вы допустили ошибки ввода</span> - они указаны <a href="#aerrors">в верху формы</a>.';} else { this.LoadedForms[this.src] = null; if (message == undefined || message == '') message = 'Заявка успешно отправлена.'; $(this.From_but_div).innerHTML = message + ' <a id="new_form_link" href="#">Повторить снова</a>&nbsp;&nbsp;<a id="close_form_link" href="#">Скрыть</a>'; $('close_form_link').observe('click', (function(event){ event.stop(); this.end();}).bind(this)); $('new_form_link').observe('click', (function(event){ event.stop(); this.changeImage(0) }).bind(this));}}, enableKeyboardNav: function(){ document.observe('keydown', this.keyboardAction);}, disableKeyboardNav: function(){ document.stopObserving('keydown', this.keyboardAction);}, keyboardAction: function(event){ var keycode = event.keyCode; var escapeKey; if (event.DOM_VK_ESCAPE){ escapeKey = event.DOM_VK_ESCAPE;} else { escapeKey = 27;} var key = String.fromCharCode(keycode).toLowerCase(); if (key.match(/x|o|c/) || (keycode == escapeKey)){ this.end();} else if ((key == 'p') || (keycode == 37)){ if (this.activeImage != 0){ this.disableKeyboardNav(); this.changeImage(this.activeImage - 1);}} else if ((key == 'n') || (keycode == 39)){ if (this.activeImage != (this.imageArray.length - 1)){ this.disableKeyboardNav(); this.changeImage(this.activeImage + 1);}} }, end: function(){ this.disableKeyboardNav(); new Effect.SlideUp(this.lightbox, { duration: this.SlideDuration, afterFinish: (function(){$('lb_image').innerHTML = '';}) }); new Effect.Fade(this.overlay, { duration: this.overlayDuration, delay: this.SlideDuration }); $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' }); this.Started = false; this.lastImage = -1; clearInterval(this.EvalTimerID);}, getPageSize: function(){ var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY){ xScroll = window.innerWidth + window.scrollMaxX; yScroll = window.innerHeight + window.scrollMaxY;} else if (document.body.scrollHeight > document.body.offsetHeight){ xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight;} else { xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight;} var windowWidth, windowHeight; if (self.innerHeight){ if(document.documentElement.clientWidth){ windowWidth = document.documentElement.clientWidth;} else { windowWidth = self.innerWidth;} windowHeight = self.innerHeight;} else if (document.documentElement && document.documentElement.clientHeight){ windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight;} else if (document.body){ windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight;} if(yScroll < windowHeight){ pageHeight = windowHeight;} else { pageHeight = yScroll;} if(xScroll < windowWidth){ pageWidth = xScroll;} else { pageWidth = windowWidth;} return [pageWidth,pageHeight];}}; function MyLightBoxGetGroup(rel){ var i = rel.indexOf('lightbox'); group = ''; if (i != -1){ if (rel.indexOf('[') >0 ){ group = rel.substring(i+9, rel.length-1);} else group = ''; if (group=='' || rel.length <= 9) group = 'lightbox';} return group;} var LightBox = null; function collectLightBox(){ objBody = $$('body')[0]; objBody.appendChild(Builder.node('div',{id:'lightbox_temp', style:'position:absolute; top:-10000px;'})); var selects = $$('a[rel^=lightbox]'); selects.each(function(tag){ var rel = tag.getAttribute("rel"); group = MyLightBoxGetGroup(rel); if (group != ''){ lightboxCollection.Add(group, tag); var func = null; var likevideo = false; var likeform = false; if (rel.indexOf('lightboxvideo') != -1 ){ likevideo = true;} if (rel.indexOf('lightboxform') != -1 ){ likeform = true;} tag.observe('click', (function(event){ event.stop(); var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]'); if (target){ event.stop(); LightBox.start(target, likevideo, likeform);}}).bind(this));}});} function detectLightBox(){}; var lightboxCollection = null; function LightBoxInit(){ lightboxCollection = new TagCollection("lightboxCollection1"); lightboxCollection.SetDetector(detectLightBox);} function reCollectLightBox(){ LightBoxInit(); collectLightBox();} LightBoxInit(); document.observe('dom:loaded', function (){collectLightBox(); LightBox = new Lightbox();} );