https://pravsemya.ru/wp-content/themes/pravsemya/js/plFloatWindow_1.3.js?ver=1.0.7

1/*МОДУЛЬ ВСПЛЫВАЮЩЕГО ОКНА + ГАЛЕРЕИ "PERFECT FLOAT WINDOW"
2===========================================================
3версия 1.3.1
4	- доработана функция plFW.showGallery(elem) для показа галереи картинок, находящихся внутри элемента с передаваемым в функцию id
5версия 1.3 
6	- все функции всплывающего окна переведены в объект plFW
7	- добавлена возможность отключить закрытие при нажатии на фон (closeByBackground)
8	- добавлена возможность избежать сдвиг центрированных блоков при открытии окна (fixScrollBars)
9	- максимальные и минимальные размеры изображений вынесены в свойства объекта plFW
10	- добавлена функция определения ширины полосы прокрутки getSbWidth()
11	- добавлено событие onChangeImg
12версия 1.2
13	- исправлено повторное открытие окна при уже имеющимся
14	- изменены и добавлены некоторые стандартные стили элементов управления
15//-------------------------------------------------------*/
16//Галерея
17window.plFWGallery = {
18	imgs: [],//Изображения
19	alts: [],//Названия
20	curimg: -1,//Текущее изображение
21	clear: function(){//Очистка массивов
22		this.imgs = [];
23		this.alts = [];
24	},
25	img: function(){//Получение текущего изображения
26		return this.imgs[this.curimg];
27	},
28	alt: function(){//Получение текущего названия
29		return this.alts[this.curimg];
30	},
31	add: function(elem){//Добавление элемента
32		this.imgs.push(jQuery(elem).attr('data-fullimage'));
33		this.alts.push(jQuery(elem).attr('alt'));
34	},
35	init: function(){//Инициализация всплывающего окна для галереи и картинок
36		jQuery('.plFW_image').each(function(){
37			if (!jQuery(this).hasClass('finished')) {//Картинки (отдельные)
38				jQuery(this).on('click', function() {
39					plFW.showImage(jQuery(this).attr('data-fullimage'), jQuery(this).attr('alt'));
40				});
41				jQuery(this).addClass('finished');
42			}
43		});
44		jQuery('.plFW_gallery').each(function(){//Картинки (галерея)
45			if (!jQuery(this).hasClass('finished')) {
46				jQuery(this).on('click', function() {
47					if (jQuery(this).closest('.plFW_gallery_group').length > 0)
48						plFW.showGallery(jQuery(this).closest('.plFW_gallery_group'), jQuery(this).attr('data-fullimage'))
49					else plFW.showGallery(jQuery(this).attr('data-fullimage'), jQuery('body'));
50				});
51				jQuery(this).addClass('finished');
52			}
53		});
54		jQuery(window).unbind('keydown');
55		jQuery(window).keydown(function(event){//События нажатия клавиш
56			if (jQuery('div').is('.plFW_window')){//Если есть всплывающее окно
57				if (event.keyCode === 27)//esc
58					plFW.close();
59			};
60			if (jQuery('div').is('.plFW_slidebutton')){//Если есть окно со слайдшоу
61				if (event.keyCode === 39)//Стрелка вправо
62					jQuery('.plFW_slideright').click();
63				if (event.keyCode === 37)//Стрелка влево
64					jQuery('.plFW_slideleft').click();
65			};
66		});
67	}
68};
69//--------------------------------------------------------------------
70//Всплывающее окно
71window.plFW = {
72	closeByBackground: true,//Возможность закрыть окно нажатием на фон
73	fixScrollBars: true,//Возможность исправить смещение выравненных по центру блоков
74	fixedElements: '',//Классы всех элементов, к которым нужно применить исправление при отключении прокрутки
75	maxImgWidth: 1024,
76	minImgWidth: 320,
77	maxImgHeight: 768,
78	minImgHeight: 240,
79	windowsCount: 0,
80	getImgInfo: function(url){//Получение информации об изображении по ссылке
81		return jQuery('<img/>',{
82			src  : url
83		});
84	},
85	onChangeImg: function(){},
86	resizeWnd: function(){//Изменение размеров окна
87		jQuery('.plFW_fullimage').css('background-image', 'none');
88		plFW.getImgInfo(plFWGallery.img()).on('load', function(){
89			vWidth = this.width;
90			vHeight = this.height;
91			vRatio = vWidth/vHeight;
92			let windowWidth = window.innerWidth;
93			if (vWidth > windowWidth) {
94				vWidth = windowWidth;
95				vHeight = vWidth/vRatio;
96			};
97			if (vWidth > plFW.maxImgWidth) {vWidth = plFW.maxImgWidth; vHeight = vWidth/vRatio;};
98			if (vHeight > plFW.maxImgHeight) {vHeight = plFW.maxImgHeight; vWidth = vHeight*vRatio;};
99			if (vWidth < plFW.minImgWidth) {vWidth = plFW.minImgWidth; vHeight = vWidth/vRatio;};
100			if (vHeight < plFW.minImgHeight) {Height = plFW.minImgHeight ;vWidth = vHeight*vRatio;};
101			jQuery('.plFW_window').stop().animate({'width': vWidth, 'height': vHeight}, 250, function(){
102				jQuery('.plFW_fullimage').css('background-image', 'url("' + plFWGallery.img() + '")');
103			});
104		});
105	},
106	disableScrollBar: function() {
107		jQuery('html').css('overflow-y', 'hidden'); 
108		if (plFW.fixScrollBars) jQuery('body' + plFW.fixedElements).css('padding-right', getSbWidth() + 'px');
109	},
110	enableScrollBar: function() {
111		if (plFW.windowsCount == 0) {
112			jQuery('html').css('overflow-y', 'auto'); 
113			if (plFW.fixScrollBars) jQuery('body' + plFW.fixedElements).css('padding-right', '0');
114		};
115	},
116	createWnd: function(filling) {//Создание окна
117		var vHtml = '<div class="plFW_background"><div class="plFW_window"><div class="plFW_header"><span class="plFW_caption"></span><div class="plFW_closebtn"></div></div>' + filling + '</div></div>';
118		jQuery('body').append(vHtml);
119		
120		var wnd = jQuery('.plFW_window').last();
121		var bg = jQuery('.plFW_background').last();
122		var cap = jQuery('.plFW_caption').last();
123		var cls = jQuery('.plFW_closebtn').last();
124		
125		var elem = {
126			background: bg,
127			window: wnd,
128			caption: cap,
129			closeButton: cls,

130			closeByBackground: true,
131			onLoad: false,
132			close: function() {
133				this.background.fadeOut(200, function() {
134					jQuery(this).remove();
135					plFW.windowsCount--;
136					plFW.enableScrollBar();
137				});
138			},
139			show: function() {
140				this.window.show();
141			},
142			init: function() {
143				this.background.css({
144					'width': '100%',
145					'height': '100%',
146					'position': 'fixed',
147					'top': '0px',
148					'left': '0px',
149					'display': 'none',
150					'overflow-y': 'scroll'
151				});
152				this.window.css({
153					'display': 'none'
154				});
155				this.background.show();
156				plFW.windowsCount++;
157				plFW.disableScrollBar();
158				this.background.scrollTop(0);
159				this.caption.addClass('noselect');
160				this.closeButton.css('cursor', 'pointer');
161				this.background.click(function() {
162					if (elem.closeByBackground == true) elem.close();
163				});
164				this.window.click(function(event) {
165					event.stopPropagation();
166				});
167				this.closeButton.click(function(event) {
168					elem.close();
169				});
170			}
171		}
172		
173		elem.init();
174
175		return elem;
176	},
177	makeImageBlock: function(){//Создать окно с областью для изображения
178		wnd = plFW.createWnd('<div class="plFW_fullimage"></div>');
179		wnd.window.find('.plFW_fullimage').css({
180			'background-position': 'center center',
181			'background-repeat': 'no-repeat',
182			'background-size': '100%, 100%'
183		});
184		return wnd;
185	},
186	showImage: function(url, caption){//Вывод окна с изображением
187		wnd = plFW.makeImageBlock();
188		wnd.window.find('.plFW_fullimage').css('background-image', "url('" + url + "')");
189		if (caption)
190			wnd.caption.text(caption)
191		else
192			wnd.caption.remove();
193		wnd.show();
194		wnd.window.addClass('plFW_picture');
195	},
196	showGallery: function(elem, url = ''){//Открыть окно с галереей
197		function setImg(){//Установка изображения, заголовка и номера
198			plFW.resizeWnd();
199			plFW.onChangeImg();
200			//Надписи
201			jQuery('.plFW_imgnum').text((plFWGallery.curimg + 1) + ' из ' + plFWGallery.imgs.length);
202			jQuery('.plFW_caption').text(plFWGallery.alt());
203		};
204		//Заполнение массива ссылок на изображения
205		plFWGallery.clear();
206		jQuery(elem).find('.plFW_gallery').each(function(i, elem){
207			plFWGallery.add(elem);
208		});
209		if (url == '') plFWGallery.curimg = 0
210		else plFWGallery.curimg = plFWGallery.imgs.indexOf(url);
211		let wnd = plFW.makeImageBlock();//Создание окна
212		if (plFWGallery.imgs.length > 1){
213			//Добавление кнопок навигации и номера
214			jQuery('.plFW_window').append('<div class="plFW_slidebutton plFW_slideleft"></div><div class="plFW_slideright plFW_slidebutton"></div>');
215			//Добавение в заголовок окна номера изображения
216			jQuery('.plFW_header').prepend('<span class="plFW_imgnum"></span>');
217			jQuery('.plFW_imgnum').addClass('noselect');
218			//Стили кнопок навигации в галерее
219			jQuery('.plFW_slidebutton').css({
220				'position': 'absolute',
221				'cursor': 'pointer'
222			});
223		};
224		setImg();
225		//plFW.show();
226		//События кнопок слайдшоу
227		jQuery('.plFW_slideleft').click(function(){
228			if (plFWGallery.curimg === 0) plFWGallery.curimg = plFWGallery.imgs.length - 1
229			else plFWGallery.curimg -= 1;
230			setImg();
231		});
232		jQuery('.plFW_slideright').click(function(){
233			if (plFWGallery.curimg === plFWGallery.imgs.length - 1) plFWGallery.curimg = 0
234			else plFWGallery.curimg += 1;
235			setImg();
236		});
237		jQuery('.plFW_window').addClass('plFW_slideshow');
238		wnd.show();
239		return wnd;
240	},
241	showHtml: function(html, className){//Открыть окно с произвольной разметкой
242		wnd = plFW.createWnd(html);
243		className ? className = ' ' + className : className = '';
244		wnd.window.addClass('plFW_html' + className);
245		wnd.show();
246		return wnd;
247	},
248	showUrl: function(url, className) {//Открыть окно с загруженной разметкой по адресу
249		wnd = plFW.createWnd('<div class="url_data"></div>');
250		wnd.window.find('.url_data').load(url, function() {
251			className ? className = ' ' + className : className = '';
252			wnd.window.addClass('plFW_url' + className);
253			wnd.show();
254			if (wnd.onLoad) wnd.onLoad();
255		});
256		return wnd;
257	},
258	showMessage: function(text, className){//Открыть окно с текстовым сообщением
259		wnd = plFW.createWnd("<div class='plFW_textwrapper'>

259" + text + "</div>");
260		className ? className = ' ' + className : className = '';
261		wnd.window.addClass('plFW_message' + className);
262		wnd.show();
263		return wnd;
264	}
265};
266//--------------------------------------------------------------------
267//ДОПОЛНИТЕЛЬНЫЕ ФУНКЦИИ
268//Определение ширины полосы прокрутки
269function getSbWidth(){
270	var block = jQuery('<div>').css({'height':'50px','width':'50px'}),
271	indicator = jQuery('<div>').css({'height':'200px'});
272	jQuery('body').append(block.append(indicator));
273	var w1 = jQuery('div', block).innerWidth();    
274	block.css('overflow-y', 'scroll');
275	var w2 = jQuery('div', block).innerWidth();
276	jQuery(block).remove();
277	return (w1 - w2);
278};