https://encspb.ru/static/scripts/jsibox_basic.js

1/*
2 * jsImageBox - slim and simple image modal viewer for webpages http://www.jsimagebox.ru
3 * Copyright (C) 2008 c0rr, p_ann
4 *
5 * Licensed under the terms of GNU General Public License Version 2 or later (the "GPL")
6 *    http://www.gnu.org/licenses/gpl.html
7 */
8
9
10// Глобальный обьект в нем хранятся настройки и закешированы ссылки на DOM узлы и переменные состояния
11var jsiBox = {
12	// НАСТРОЙКИ //
13	boxBorderColor : '#727272',        // Цвет границы бокса
14	boxBorderWidth : '1px',            // Толщина границы бокса
15	boxBgColor     : '#484848',        // Цвет фона бокса
16	imgBgColor     : '#fff',           // Цвет подложки изображения
17	overlayColor   : '#fff',           // Цвет затемнения страницы
18	nextArrow      : '→',         // Следующее изображение
19	prevArrow      : '←',         // Предыдущее изображение
20	closeSymbol    : '×',        // Значок закрытия бокса
21	statusString   : '\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 [num] \u0438\u0437 [total]', // Строка описания текущего соcтояния
22	selfDir        : ''                // Путь к каталогу кода бокса, если пустая строка то скрипт попробует автоматически вычислить путь
23
24};
25
26// Ф-ция добавляет HTML код бокса к текущему документу и кеширует ссылки на составные элементы
27function jsiBoxInit()
28{
29    if (jsiBox.selfDir == '') {
30		// Попробовать вычислить путь к коду - нужно для задания путей к изображениям
31		var scriptNodes = document.getElementsByTagName('script');
32		for (var i = 0; i < scriptNodes.length; i++) {
33			if (scriptNodes[i].src && scriptNodes[i].src.match('jsibox_basic.js')) {
34				jsiBox.selfDir = scriptNodes[i].src.split('jsibox_basic.js')[0];
35				break;
36			}
37		}
38	}
39	var boxHTML =  '<style type="text/css">#jsiMainBox * {margin: 0; padding: 0; border: 0; text-decoration: none;} #jsiMainBox a.jsiBtn {outline: none; color: #fff; font-size: 30px; width: 40px;  vertical-align:middle;font-weight:normal; } </style>'
40                  +'<div id="wrapJsiBox" style="position: absolute; top:0; left:0; display: none; z-index: 1000; background-color:'+jsiBox.overlayColor+'; opacity: 0.6; filter: alpha(opacity=\'60\');"></div>'
41                  +'<div style="position: absolute; top: 0; left: 0; width: 100%; z-index: 2000;">'
42                  +'  <div id="jsiMainBox" style="color: #fff;text-align:left;position: relative; display: none; margin: auto; z-index: 2; width: 400px; background:'+jsiBox.boxBgColor+'; border: '+jsiBox.boxBorderWidth+' solid '+jsiBox.boxBorderColor+'; padding-bottom: 4px;">'
43                  +'      <p style="text-align: right; font: bold 10px Tahoma; padding-top: 0;width:100%;overflow:hidden;padding-bottom:0;height:30px;">'
44                  +'        <img src="'+$(".context_path").text()+'/static/images/ajax-loader2.gif" alt="" id="jsiBoxLoading" style="float:left; display:inline; margin:7px 5px 0 8px;" />'
45                  +'        <span style="width: 75px; height:37px; margin:auto; display:block;">'
46                  +'           <a href="#" id="prevJsiBoxLink" onclick="return jsiBoxPrev();" style="top: 0;left: 0;line-height:30px;" class="jsiBtn">'+jsiBox.prevArrow+'</a>'
47                  +'          <a href="#" id="nextJsiBoxLink" onclick="return jsiBoxNext();" style="top: 0;right: 0;line-height:30px;" class="jsiBtn">'+jsiBox.nextArrow+'</a>'
48                  +'        </span>'
49                  +'        <a href="#" style="padding:0 8px 0 0;width:28px;line-height:32px;margin-top:-35px; display:block; float:right;" onclick="return jsiBoxClose();" class="jsiBtn">'+jsiBox.closeSymbol+'</a>'
50                  +'      </p>'
51                  +'      <p id="jsiBoxNumberOfImage" style="margin:-7px; padding:0 48px 2px 0;text-align:right;"></p>'
52                  +'      <div id="jsiBoxMainImageWrap" style="background:'+jsiBox.imgBgColor+'; margin: 20px 40px; overflow: hidden; position: relative;">'
53                  +'        <img src="'+$(".context_path").text()+'/static/images/blank.gif" id="jsiBoxMainImage" alt="" style="display: block;" />'
54                  +'      </div>'

55                  +'      <span id="jsiBoxTitle" style="margin:20px 40px 15px 40px; font: normal 13px Tahoma;"></span>'
56 		          +'      <a href="#" class="extLink" id="jsiBoxExtLink" style="margin-left:27px;"></a>'
57                  +'      <div class="extDiv" id="jsiBoxExtDiv" style="display:none"></div>'
58                  +'  </div>'
59                  +'</div>';
60	jsiBox.wrapNode = document.getElementById('wrapJsiBox');
61	if (!jsiBox.wrapNode) {
62		document.write(boxHTML);
63	}
64	// Создание контейнера для предзагрузки изображений
65	jsiBox.preloadImg        = new Image();
66	jsiBox.preloadImg.onload = jsiBoxDisplayMainImg;
67	// Кеширование (ссылок на) DOM узлов составных элементов бокса внутри объекта
68	jsiBox.wrapNode      = document.getElementById('wrapJsiBox');
69	jsiBox.boxNode       = document.getElementById('jsiMainBox');
70	jsiBox.progressImg   = document.getElementById('jsiBoxLoading');
71	jsiBox.prevLinkNode  = document.getElementById('prevJsiBoxLink');
72	jsiBox.nextLinkNode  = document.getElementById('nextJsiBoxLink');
73	jsiBox.infoNode      = document.getElementById('jsiBoxNumberOfImage');
74	jsiBox.wrapImgNode   = document.getElementById('jsiBoxMainImageWrap');
75	jsiBox.mainImg       = document.getElementById('jsiBoxMainImage');
76	jsiBox.titleNode     = document.getElementById('jsiBoxTitle');
77    jsiBox.extLink       = document.getElementById('jsiBoxExtLink');
78    jsiBox.extDiv        = document.getElementById('jsiBoxExtDiv');
79    jsiBox.imageInfo     = {};
80    jsiBox.nodeId        = 0;
81
82	jsiBox.currentImgIndex = 0;           // Порядковый номер отображаемого в текущий момент изображения "галлереи"
83	jsiBox.linkNodesArray  = new Array(); // Массив DOM узлов ссылок на изображения текущей галлереи
84
85    buildImageInfo();
86
87}
88
89// Запуск анимации и инициализации навигации
90function jsiBoxDisplayMainImg()
91{
92	// инициализация навигации
93	var previousImgIndex = jsiBox.currentImgIndex - 1;
94	if (previousImgIndex >= 0) {
95		jsiBox.prevLinkNode.style.display = '';
96	} else {
97		jsiBox.prevLinkNode.style.display = 'none'; // Скрыть ссылку "=>"
98	}
99	var nextImgIndex = jsiBox.currentImgIndex + 1;
100	if (nextImgIndex < jsiBox.linkNodesArray.length) {
101		jsiBox.nextLinkNode.style.display = '';
102	} else {
103		jsiBox.nextLinkNode.style.display = 'none'; // Скрыть ссылку "<="
104	}
105
106	if (jsiBox.linkNodesArray.length > 1) {
107		// Нарисовать порядковый номер в навигации
108		var info = jsiBox.statusString.replace('[num]', jsiBox.currentImgIndex + 1);
109		info     = info.replace('[total]', jsiBox.linkNodesArray.length);
110		jsiBox.infoNode.innerHTML = info;
111	}
112	jsiBoxDimMainImage(10);                    // Запускаем анимацию "растворения"
113	jsiBox.progressImg.style.display = 'none'; // Убираем индикатор загрузки
114	jsiBox.titleNode.innerHTML       = '';
115	jsiBox.titleNode.style.display   = 'none'; // Убираем тайтл изображения
116}
117
118// Ф-ция анимации растворения - увеличивает прозрачность изображения от заданного в opacity значения до нуля (диапазон opacity [0-10])
119function jsiBoxDimMainImage(opacity)
120{
121	var newOpacity;
122	if (opacity) {
123		newOpacity = opacity; // первый вызов ф-ции, задаем свойство
124	} else {
125		var step   = 2;     // Шаг изменения
126		newOpacity = jsiBox.mainImg.style.opacity*10 - step; // Изменяем значение
127	}
128	jsiBox.mainImg.style.opacity = newOpacity/10;                          // для всех нормальных броузеров
129	jsiBox.mainImg.style.filter  = 'alpha(opacity=' + newOpacity*10 + ')'; // для IE
130
131	if (jsiBox.mainImg.style.opacity > 0) {
132		setTimeout('jsiBoxDimMainImage()', 35); // продолжим анимацию
133	} else {
134		jsiBox.mainImg.style.display = 'none';
135		jsiBox.mainImg.style.opacity = 0;
136		jsiBox.mainImg.style.filter  = 'alpha(opacity=100)';
137		jsiBoxResize(); // Запуск анимации ресайза бокса
138	}
139}
140
141// Ф-ция анимирует изменение размеров блока при разнице размеров загружаемых изображений
142function jsiBoxResize()
143{
144	var leftInnerMargin   = parseInt(jsiBox.wrapImgNode.style.marginLeft, 10) || 0;
145	var rightInnerMargin  = parseInt(jsiBox.wrapImgNode.style.marginRight, 10) || 0;
146	var leftBorder        = parseInt(jsiBox.boxNode.style.borderLeftWidth, 10) || 0;
147	var rightBorder       = parseInt(jsiBox.boxNode.style.borderRightWidth, 10) || 0;
148	// Изменение ширины относительно внутреннего блока, однако ширину менять будем внешенему
149	var deltaWidth  = jsiBox.wrapImgNode.offsetWidth - jsiBox.preloadImg.width;
150	// Вычисляется изменение высоты только для блока вокруг изображения, внешние блоки отресайзятся сами при изменении высоты внутреннего
151	var deltaHeight = jsiBox.wrapImgNode.offsetHeight - jsiBox.preloadImg.he

151ight;
152
153	// Шаг изменения поставим в зависимость от расстояния, чтобы "сначала быстро, потом медленно"
154	var widthResizeStep  = deltaWidth / 4;
155	var heightResizeStep = deltaHeight / 4;
156	widthResizeStep      = (widthResizeStep > 0) ? Math.ceil(widthResizeStep) : Math.floor(widthResizeStep);
157	heightResizeStep     = (heightResizeStep > 0) ? Math.ceil(heightResizeStep) : Math.floor(heightResizeStep);
158
159	if (Math.abs(deltaWidth) > Math.abs(widthResizeStep)) {
160		var newWidth              = jsiBox.boxNode.offsetWidth - leftBorder - rightBorder - widthResizeStep;
161		jsiBox.boxNode.style.width = newWidth + 'px'; // Изменение ширины внешнего блока, внутренние блоки отресайзятся сами
162	}
163	if (Math.abs(deltaHeight) > Math.abs(heightResizeStep)) {
164		var newHeight                  = jsiBox.wrapImgNode.offsetHeight - heightResizeStep;
165		jsiBox.wrapImgNode.style.height = newHeight + 'px'; // Изменение высоты внутреннего блока
166	}
167
168	if (((Math.abs(deltaHeight) > Math.abs(heightResizeStep)) || (Math.abs(deltaWidth) > Math.abs(widthResizeStep))) && checkImageInfoState()) {
169		setTimeout('jsiBoxResize()', 35); // Анимируем дальше
170	} else {
171		// Стопорим и "добиваем" нужные значения, т.к. в процессе анимации они могли быть вычислены не точно
172		jsiBox.boxNode.style.width      = jsiBox.preloadImg.width + leftInnerMargin + rightInnerMargin + 'px';
173		jsiBox.mainImg.style.width      = jsiBox.preloadImg.width + 'px';
174		jsiBox.wrapImgNode.style.height = jsiBox.preloadImg.height + 'px';
175		jsiBox.mainImg.src              = jsiBox.preloadImg.src;
176		jsiBox.mainImg.style.display    = 'block';
177		// Нарисуем тайтл изображения
178		var imageTitle = (jsiBox.linkNodesArray[jsiBox.currentImgIndex]) ? jsiBox.linkNodesArray[jsiBox.currentImgIndex].title : '';
179		if (imageTitle != '') {
180			jsiBox.titleNode.style.display = 'block';
181			jsiBox.titleNode.innerHTML     = imageTitle;
182		}
183		jsiBoxLightenMainImage(); // Запускаем анимацию "проявления" изображения
184		//jsiBoxAnimSglOverlay('animation3.gif');
185		//jsiBoxAnimMultiOverlay('animation3.gif');
186	}
187}
188
189// Уменьшает прозрачность изображения от текщего значения до полностью непрозрачного - эффект проявления
190function jsiBoxLightenMainImage()
191{
192	var step        = 2;
193	var newOpacity  = jsiBox.mainImg.style.opacity*10 + step;
194
195	jsiBox.mainImg.style.opacity = newOpacity/10;
196	jsiBox.mainImg.style.filter  = 'alpha(opacity=' + newOpacity*10 + ')';
197
198	if (jsiBox.mainImg.style.opacity < 1) {
199		setTimeout('jsiBoxLightenMainImage()', 35);
200	} else {
201		jsiBox.mainImg.style.opacity = '';
202		jsiBox.mainImg.style.filter  = '';
203	}
204}
205
206// Показ предыдущего изображения "галлереи"
207function jsiBoxNext()
208{
209	jsiBox.progressImg.style.display = 'block'; // Показать индикатор загрузки
210
211	var nextImgIndex = jsiBox.currentImgIndex + 1;
212	if (nextImgIndex < jsiBox.linkNodesArray.length) {
213		jsiBox.currentImgIndex = nextImgIndex;
214		jsiBox.preloadImg.src  = jsiBox.linkNodesArray[nextImgIndex].href;
215
216        var href=getOriginalImageHref(jsiBox.linkNodesArray[nextImgIndex].id);
217        jsiBox.extLink.href  = href;
218        if(href!="#") jsiBox.extLink.style.display   = 'block';
219        else jsiBox.extLink.style.display   = 'none';
220
221        prepareImageInfoState(jsiBox.linkNodesArray[nextImgIndex].id)
222
223	}
224	return false;
225}
226
227// Показ следующего изображения "галлереи"
228function jsiBoxPrev()
229{
230	jsiBox.progressImg.style.display = 'block'; // Показать индикатор загрузки
231
232	var prevImgIndex = jsiBox.currentImgIndex - 1;
233	if (prevImgIndex >= 0) {
234		jsiBox.currentImgIndex = prevImgIndex;
235		jsiBox.preloadImg.src  = jsiBox.linkNodesArray[prevImgIndex].href;
236        var href=getOriginalImageHref(jsiBox.linkNodesArray[prevImgIndex].id);
237        jsiBox.extLink.href  = href;
238        if(href!="#") jsiBox.extLink.style.display   = 'block';
239        else jsiBox.extLink.style.display   = 'none';
240
241        prepareImageInfoState(jsiBox.linkNodesArray[prevImgIndex].id)
242
243	}
244	return false;

245}
246
247// Ф-ция закрытия бокса
248function jsiBoxClose()
249{
250	jsiBox.wrapNode.style.display   = 'none';
251	jsiBox.boxNode.style.display    = 'none';
252	return false;
253}
254
255// Отправляет изображение на просмотр в боксе
256function jsiBoxOpen(domNode)
257{
258    var docLinks = document.getElementsByTagName('a');
259	jsiBox.progressImg.style.display = 'block'; // Показать индикатор загрузки
260	jsiBox.linkNodesArray            = new Array();
261	// Пройдемся по всему списку ссылок для того чтобы найти элементы с заданным rel инаполнить "галлерею"
262	if (domNode.rel != '') {
263		for (var i = 0; i < docLinks.length; i++){
264			if (docLinks[i].rel == domNode.rel) {
265				jsiBox.linkNodesArray.push(docLinks[i]); // Добавим найденный элемент в массив {TODO} IE 5 do not have push
266			}
267			if (docLinks[i] == domNode) {
268				jsiBox.currentImgIndex = jsiBox.linkNodesArray.length - 1;
269			}
270		}
271	} else {
272		jsiBox.linkNodesArray.push(domNode);
273		jsiBox.currentImgIndex = 0;
274	}
275	jsiBox.infoNode.innerHTML  = '&#160;';
276	jsiBox.titleNode.innerHTML = '';
277	// Сделать общий темный фон
278	var pagesize                 = getPageSizeWithScroll();
279	jsiBox.wrapNode.style.display = 'block';
280	jsiBox.wrapNode.style.height  = pagesize[1] + 'px';
281	jsiBox.wrapNode.style.width   = "100%";
282	// отобразить бокс с учетом прокрутки
283	var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
284	jsiBox.boxNode.style.top         =  getScrollXY()[1] + 20 + "px";
285	jsiBox.mainImg.src               =  $(".context_path").text()+'/static/images/blank.gif';
286	jsiBox.wrapImgNode.style.height  = '30px';
287	jsiBox.boxNode.style.width       = '200px';
288	jsiBox.boxNode.style.display     = 'block';
289	jsiBox.preloadImg.src            = domNode.href; // Добавим изображение в очередь загрузки
290
291    prepareImageInfoState(domNode.id)
292    buildExtLink(jsiBox.extLink, domNode.id);
293
294	return false;
295}
296
297// Вспомогательная ф-ция получения размера документа
298function getPageSizeWithScroll()
299{
300	if( window.innerHeight && window.scrollMaxY ) {  // Firefox
301		pageWidth = document.body.clientWidth + window.scrollMaxX;
302		pageHeight = window.innerHeight + window.scrollMaxY;
303	} else if( document.body.scrollHeight > document.body.offsetHeight ) { // all but Explorer Mac
304		pageWidth = document.body.scrollWidth;
305		pageHeight = document.body.scrollHeight;
306	} else { // works in Explorer 6 Strict, Mozilla (not FF) and Safari
307		pageWidth = document.body.offsetWidth + document.body.offsetLeft;
308		pageHeight = document.body.offsetHeight + document.body.offsetTop;
309	}
310	arrayPageSizeWithScroll = new Array(pageWidth, pageHeight);
311	return arrayPageSizeWithScroll;
312}
313
314// Вспомогательная ф-ция построение внешней ссылки
315function buildExtLink(extLink, id) {
316
317        var idLinkIndex=id.indexOf("_");
318        var extLinkId="extLink"+id.substr(idLinkIndex);
319        var pageExtLink=$("#"+extLinkId);
320        if(pageExtLink.length!=0)
321        {
322             extLink.href=pageExtLink.attr("href");
323             extLink.target  = pageExtLink.attr("target");
324             extLink.innerHTML=pageExtLink.text();
325             if(pageExtLink.attr("href")!="#") {
326                 jsiBox.titleNode.style.margin= "20px 40px 40px 40px";
327             }
328             else {
329                 jsiBox.titleNode.style.margin= "20px 40px 15px 40px";
330             }
331        }
332}
333
334function getOriginalImageHref(id)
335{
336        var idLinkIndex=id.indexOf("_");
337        var extLinkId="extLink"+id.substr(idLinkIndex);
338        var extLink =$("#"+extLinkId)
339        if(extLink.length!=0)
340        {
341            var extLinkHref=extLink.attr("href");
342            if(extLinkHref!="#") {
343                jsiBox.titleNode.style.margin= "20px 40px 40px 40px";
344            }
345            else {
346               jsiBox.titleNode.style.margin= "20px 40px 15px 40px";
347            }
348
349	        return extLinkHref;
350        }
351        else return "#";
352}
353
354
355function getScrollXY() {
356  var scrOfX = 0, scrOfY = 0;
357  if( typeof( window.pageYOffset ) == 'number' ) {
358    //Netscape compliant
359    scrOfY = window.pageYOffset;
360    scrOfX = window.pageXOffset;
361  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
362    //DOM compliant
363    scrOfY = document.body.scrollTop;
364    scrOfX = document.body.scrollLeft;
365  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
366    //IE6 standards compliant mode
367    scrOfY = document.documentElement.scrollTop;
368    scrOfX = document.documentElement.scrollLeft;
369  }
370  return [ scrOfX, scrOfY ];
371}
372
373function doSmth()
374{
375   if(jsiBox.wrapNode.style.display=='block')
376   {
377      jsiBox.boxNode.style.top=getScrollXY()[1] + 20 + "px";
378   }
379}
380
381
382function buildImageInfo() {
383
384    var images=$(".imageInfo")
385
386    if(images.length>0) {
387
388        images.each(function() {
389            jsiBox.imageInfo[$(this).attr("id")] = "empty"

390        });
391        //alert(JSON.stringify(imageInfo)); // '{"one":1,"two":"2"}'
392        images.each(function() {
393
394            var imageInfoUrl=$("#imageInfoURL_"+$(this).attr("id"));
395            var imageInfoUrlString;
396
397            if(imageInfoUrl.length>0) {
398
399                imageInfoUrlString=imageInfoUrl.text();
400            }
401            else {
402                imageInfoUrlString=$(".path_for_request").text()+"/imageInfo/"+$(this).attr("id")+"?lc="+$(".language_for_request").text();
403            }
404            jQuery.getJSON(imageInfoUrlString, function(data) {
405
406                $.each(data, function() {
407
408                       jsiBox.imageInfo[data.id_img]=data.content;
409                });
410            });
411        });
412    }
413}
414
415
416function checkImageInfoState() {
417
418    var imageInfoId=jsiBox.nodeId.substr(jsiBox.nodeId.indexOf("_")+1);
419    var content=jsiBox.imageInfo[imageInfoId]
420
421    if(content=='empty') {
422
423        return false;
424    }
425    else if(content=='null') {
426        jsiBox.extDiv.style.display   = 'none';
427    }
428    else if(content!=null) {
429
430        if(jsiBox.extDiv.style.display  == 'none') {
431
432            $(jsiBox.extDiv).html(content);
433            jsiBox.extDiv.style.display   = 'block';
434        }
435    }
436
437    return true;
438}
439
440
441function prepareImageInfoState(id) {
442   jsiBox.nodeId=id
443   jsiBox.extDiv.style.display  = 'none'
444   $("#"+jsiBox.extDiv.id).empty()
445}
446
447
448//window.onscroll=doSmth
449// Инициализируем бокс