https://namt-boxing.ru/js/siteset.gallery.js

1/**
2 * @name SiteSet Gallery JS
3 * @version 1.0.0 
4 * @author Alexey Glumov 
5 * @copyright Copyright (c) 2016 SoftArt Internet Company http://softart.ru
6 */
7
8var sitesetGalleryList;
9
10$(document).ready(function() {
11    sitesetGalleryList = new sitesetGallery();
12});
13
14function sitesetGallery()
15{
16    /**
17     * текущее положение курсора на галерее
18     * 
19     * @var - integer
20     */
21	
22	this.cursor = 0;
23    
24    /**
25     * скорость появления окон
26     * 
27     * @var - integer
28     */
29	
30	this.speed   = 300;
31    
32    /**
33     * прозрачность фона
34     * 
35     * @var - integer/float
36     */
37	
38    this.opacity = 0.8;
39    
40    /**
41     * список галерей
42     * 
43     * @var - array
44     */
45	
46	this.gList = [];
47	
48    /**
49     * метод собирает изображения
50     *
51     */
52	
53	this.init = function() {
54        // создаем верстку
55        $('body').append(''
56            + '<div class="siteset-gallery-loader"></div>'
57            + '<div class="siteset-gallery-modal-bg"></div>'
58            
59            + '<div class="siteset-gallery-modal">'
60                
61                + '<div class="siteset-gallery-desc"></div>'
62                + '<div class="siteset-gallery-close"></div>'
63                
64                + '<div class="siteset-gallery-switch siteset-gallery-switch-left">'
65                    + '<div class="siteset-gallery-switch-left-ico"></div>'
66                + '</div>'
67                + '<div class="siteset-gallery-switch siteset-gallery-switch-right">'
68                    + '<div class="siteset-gallery-switch-right-ico"></div>'
69                + '</div>'
70                
71                + '<div class="siteset-gallery-img"></div>'
72                + '<div class="siteset-gallery-count"></div>'
73            + '</div>'
74        );
75        
76        // событие на закрытие
77        $('.siteset-gallery-modal-bg, .siteset-gallery-close').bind('click', function () {
78            sitesetGalleryList.close();
79        });
80        
81        // событие на листание
82        $('.siteset-gallery-switch-left').bind('click', function () {
83            sitesetGalleryList.prev();
84        });
85        
86        $('.siteset-gallery-switch-right').bind('click', function () {
87            sitesetGalleryList.next();
88        });
89	};
90
91    /**
92     * метод открывает галерею
93     *
94     */
95	
96	this.open = function() {
97        var self = this;
98        
99        // загружаем изображение
100        this.load();
101        
102        // поднять фон
103        $('.siteset-gallery-modal-bg').fadeTo(self.speed, self.opacity, function () {
104            // поднять модальное окно
105            $('.siteset-gallery-modal').fadeTo(self.speed, 1, function () {
106                
107                // слушаем стрелки влево и вправо и esc
108                $(window).bind('keydown', function(e) {
109                    switch (e.keyCode) {
110                        case 27:
111                            sitesetGalleryList.close();
112                            break;
113                        
114                        case 37:
115                            sitesetGalleryList.prev();
116                            break;
117                            
118                        case 39:
119                            sitesetGalleryList.next();
120                            break;
121                    }
122                });
123                
124            });
125        });
126	};
127    
128    /**
129     * метод загружает фото
130     *
131     */
132	
133	this.load = function() {
134        // расчитываем скролл
135        var scrTop = 0;
136        
137        //определяем позицию скролла всех браузеров кроме гугла
138        scrTop = $("html,body").scrollTop();
139        
140        //определяем позицию скролла у гугл хрома
141        if(scrTop == 0)
142            scrTop = $("body").scrollTop();
143        
144        // определяем сдвиг, а это высота экрана - высота изображения / 2
145        scrTop += ( ($(window).height() - this.gList[this.cursor].getImg().height) / 2);
146        
147        $('.siteset-gallery-modal').css({
148            'top':         scrTop + 'px',
149            'width':       this.gList[this.cursor].getImg().width,
150            'height':      this.gList[this.cursor].getImg().height,
151            'left':        '50%',
152            'margin-left': '-' + (this.gList[this.cursor].getImg().width / 2) + 'px'
153        });
154        
155        // загружаем изображение
156        $('.siteset-gallery-img').html(''
157            + '<img'
158                +' src="' + this.gList[this.cursor].getImg().link  + '"'
159                +' alt="' + this.gList[this.cursor].getImg().title + '"'
160            + '>'
161        );
162        
163        // формируем заголовок
164        this.getTitle();
165        
166        // формируем кнопки влево вправо

167        this.getSwitch();
168    };
169    
170    /**
171     * метод формирует кнопки перехода
172     *
173     */
174    
175	this.getSwitch = function() {
176        var self = this;
177        
178        // если в галереи одно изображение
179        if (self.gList[self.cursor].qnt == 1) {
180            // прчем кнопки
181            $('.siteset-gallery-switch').css('display', 'none');
182            
183            // выходим
184            return;
185        }
186        
187        // показываем кнопки
188        $('.siteset-gallery-switch').css('display', '');
189	};
190    
191    /**
192     * метод формирует заголовок
193     *
194     */
195    
196	this.getTitle = function() {
197        $('.siteset-gallery-desc') .text(this.gList[this.cursor].getImg().title);
198        
199        // показываем кол-во
200        $('.siteset-gallery-count').css('display', '');
201        
202        // если в галереи более одного изображения
203        if (this.gList[this.cursor].qnt > 1)
204            // заполняем информер
205            $('.siteset-gallery-count').text(''
206                + 'фото '
207                + (this.gList[this.cursor].cursor + 1)
208                    + ' из '
209                + this.gList[this.cursor].qnt)
210            ;
211        
212        // в противном случае
213        else
214            // прячем счетчик
215            $('.siteset-gallery-count').css('display', 'none');
216	};
217    
218    /**
219     * метод закрывает галерею
220     *
221     */
222	
223	this.close = function() {
224        var self = this;
225        
226        // прячем все
227        $('.siteset-gallery-modal').fadeTo(self.speed, 0, function () {
228            $('.siteset-gallery-modal').css('display', '');
229            
230            $('.siteset-gallery-modal-bg').fadeTo(self.speed, 0, function () {
231                $('.siteset-gallery-modal-bg').css('display', '');
232                
233                // слушаем стрелки влево и вправо
234                $(window).unbind('keydown');
235            });
236        });
237	};
238    
239    /**
240     * метод получает след изображение
241     *
242     */
243	
244	this.next = function() {
245        var self = this;
246        
247        // если в галерее одно изображение
248        if (self.gList[self.cursor].qnt == 1)
249            // выходим, листать нечего
250            return;
251        
252        // если уже происходит переход
253        if ($('.siteset-gallery-modal').hasClass('siteset-gallery-busy'))
254            // выходим
255            return;
256            
257        // ставим флаг, позволяющий пресечь попытку
258        // запустить переход второй раз
259        $('.siteset-gallery-modal').addClass('siteset-gallery-busy');
260        
261        // спрятать модальное окно
262        $('.siteset-gallery-modal').fadeTo(self.speed, 0, function () {
263            // переключаем изображение
264            self.gList[self.cursor].next();
265            
266            // загружаем
267            self.load()
268            
269            // поднять модальное окно
270            $('.siteset-gallery-modal').fadeTo(self.speed, 1, function() {
271                // удаляем флаг
272                $('.siteset-gallery-modal').removeClass('siteset-gallery-busy');
273            });
274        });
275	};
276    
277    /**
278     * метод получает предыдущее изображение
279     *
280     */
281	
282	this.prev = function() {
283        var self = this;
284        
285        // если в галерее одно изображение
286        if (self.gList[self.cursor].qnt == 1)
287            // выходим, листать нечего
288            return;
289        
290        // если уже происходит переход
291        if ($('.siteset-gallery-modal').hasClass('siteset-gallery-busy'))
292            // выходим
293            return;
294            
295        // ставим флаг, позволяющий пресечь попытку
296        // запустить переход второй раз
297        $('.siteset-gallery-modal').addClass('siteset-gallery-busy');
298        
299        // спрятать модальное окно
300        $('.siteset-gallery-modal').fadeTo(self.speed, 0, function () {
301            // переключаем изображение
302            self.gList[self.cursor].prev();
303            
304            // загружаем
305            self.load()
306            
307            // поднять модальное окно
308            $('.siteset-gallery-modal').fadeTo(self.speed, 1, function() {
309                // удаляем флаг
310                $('.siteset-gallery-modal').removeClass('siteset-gallery-busy');
311            });
312        });
313	};
314    
315    /**
316     * метод собирает список изображений
317     *
318     */
319	
320	this.gatherGList = function() {
321        var self = this;
322        
323        $('.siteset-gallery').each(function() {
324            var obj = new sitesetGalleryImg({
325                    'box':   $(this),
326                    'index': self.gList.length
327                });
328            
329            if (!self.empty(obj.imgList)) {
330                obj.setStack();
331                self.gList.push(obj);
332            }
333        });
334	};
335    
336    /**
337     * метод выбирает галерею
338     * 
339     * @return this
340     *
341     * @param integer index - индекс галереи
342     */
343	
344	this.setIndex = function(index) {
345        this.cursor = index;
346        return this;
347    };
348    
349    /**
350     * метод устанавливает курсор на изображение
351     * 
352     * @return this
353     *
354     * @param integer cursor - индекс изображения
355     */
356	
357	this.setCursor = function(cursor) {

358        this.gList[this.cursor].cursor = cursor;
359        return this;
360    };
361    
362    /**
363     * метод проверят переменную на пустоту
364     *
365     * @return - boolean
366     *
367     * @param ??? variable - переменная для проверки
368     */
369    
370    this.empty = function (variable) {
371        
372        if (typeof(variable) == 'object') {
373            for (i in variable)
374                return false;
375        
376            return true;
377        }
378        
379        else if (typeof(variable) == 'number') {
380            return (variable == 0) ? true : false;
381        }
382        
383        else if (typeof(variable) == 'string') {
384            return (variable == '' || variable == undefined) ? true : false;
385        }
386        
387        return true;
388    };
389    
390    // формируем верстку галереи
391    this.init();
392    
393    // собираем галереи
394    this.gatherGList();
395}
396
397/**
398 * класс управления изображениями галереи
399 * 
400 */
401
402function sitesetGalleryImg(opt)
403{
404    /**
405     * объект галереи
406     * 
407     * @var - object
408     */
409	
410	this.obj = opt.box;
411    
412    /**
413     * ключ в глобальном массиве галереи
414     * 
415     * @var - intrger
416     */
417	
418	this.index = opt.index;
419    
420    /**
421     * кол-во изображений в галерее
422     * 
423     * @var - integer
424     */
425	
426	this.qnt = 0;
427    
428    /**
429     * текущее положение курсора на изображении
430     * 
431     * @var - integer
432     */
433	
434	this.cursor = 0;
435    
436    /**
437     * список изображений
438     * 
439     * @var - array
440     */
441	
442	this.imgList = [];
443    
444    /**
445     * метод собирает список изображений
446     *
447     */
448	
449	this.gatherImgList = function() {
450        var self = this;
451        var img  = {};
452        
453        // если прислан не блок с списком изображений
454        // а лишь одно изображение
455        if (self.obj[0].tagName == 'A') {
456            // если атрибут href не пуст
457            if (!self.empty(self.obj.attr('href'))) {
458                // создаем объект с изображением
459                cursor    = self.imgList.length;
460                    
461                img       = {};
462                img.link  = self.obj.attr('href');
463                img.title = self.obj.attr('title');
464                
465                self.obj.prop('href', 'javascript: void(0);');
466                self.obj.bind('click', function () {
467                    sitesetGalleryList.setIndex(self.index).setCursor(cursor).open();
468                });
469                
470                self.imgList.push(img);                
471            }
472        }
473        
474        // если прислан блок с изображениями
475        else
476            self.obj.find("a").each(function() {
477                if (self.empty($(this).attr('href')))
478                    return;
479                    
480                // создаем объект с изображением
481                var cursor = self.imgList.length;
482                    
483                img        = {};
484                img.link   = $(this).attr('href');
485                img.title  = $(this).attr('title');
486                
487                $(this).prop('href', 'javascript: void(0);');
488                $(this).bind('click', function () {
489                    sitesetGalleryList.setIndex(self.index).setCursor(cursor).open();
490                });
491                
492                self.imgList.push(img);
493            });
494        
495        self.qnt = self.imgList.length;
496	};
497    
498    /**
499     * метод получает изображение
500     *
501     */
502    
503    this.getImg = function () {
504        var self = this;
505        
506        var wW   = $(window).width()  - 100;
507        var hW   = $(window).height() - 100;
508        
509        var wI   = $('.siteset-gallery-g-' + self.index + '-' + self.cursor).width();
510        var hI   = $('.siteset-gallery-g-' + self.index + '-' + self.cursor).height();
511        
512        // уравниваем изображение по экрану
513        while (true) {
514            // если изображение не впределах окна
515            if (wW < wI || hW < hI) {
516                // определяем что вышло за экран
517                // если ширина картинки вышла за экран
518                if (wW < wI) {
519                    // определяем новую высоту
520                    hI = wW / (wI / hI);
521                    // заполняем ширину
522                    wI = wW;
523                }
524                
525                // значит за основу берем высоту
526                else {
527                    // расчитываем ширину
528                    wI = hW / (hI / wI);
529                    // заполняем высоту
530                    hI = hW;
531                }
532            }
533            else
534                break;
535        }
536        
537        return {
538            'width':    wI,
539            'height':   hI,
540            'link':     self.imgList[self.cursor].link,
541            'title':    self.imgList[self.cursor].title,
542            'position': self.cursor + 1
543        };
544    };
545    
546    /**
547     * метод выберает следующее изображение
548     *
549     */
550    
551    this.next = function () {
552        var self = this;
553        
554        if (!self.empty(self.imgList[(self.cursor + 1)]))
555            self.cursor = self.cursor + 1;
556        else
557            self.cursor = 0;
558    };
559    
560    /**
561     * метод выбирает предыдущее изображение
562     *
563     */
564    
565    this.prev = function () {
566        var self = this;
567        
568        if (!self.empty(self.imgList[(self.cursor - 1)]))
569            self.cursor = self.cursor - 1;
570        else
571            self.cursor = self.imgList.length - 1;
572    };
573    
574    /**
575     * метод заполняет стек изображений
576     *
577     */
578    
579    this.setStack = function () {
580        var self = this;
581        
582        // листаем изображения
583        for (i in self.imgList)
584            $('.siteset-gallery-loader').append(''
585                + '<img'
586                    + ' class="siteset-gallery-g-' + self.index + '-' + i + '"'
587                    + ' src="' + self.imgList[i].link  + '"'
588                    + ' alt="' + self.imgList[i].title + '"'
589                +'>'
590            );
591    };
592    
593    /**
594     * метод проверят переменную на пустоту
595     *
596     * @return - boolean
597     *
598     * @param ??? variable - переменная для проверки
599     */
600    
601    this.empty = function (variable) {
602        
603        if (typeof(variable) == 'object') {
604            for (i in variable)
605                return false;
606        
607            return true;
608        }
609        
610        else if (typeof(variable) == 'number') {
611            return (variable == 0) ? true : false;
612        }
613        
614        else if (typeof(variable) == 'string') {
615            return (variable == '' || variable == undefined) ? true : false;
616        }
617        
618        return true;
619    };
620    
621    // собираем изображения
622    this.gatherImgList();
623}