https://www.ishenim.kg/W_ishenimNew/js/fancybox/jquery.fancybox-thumbs.js

1/*!
2 * Thumbnail helper for fancyBox
3 * version: 1.0.1
4 * @requires fancyBox v2.0 or later
5 *
6 * Usage: 
7 *     $(".fancybox").fancybox({
8 *         thumbs: {
9 *             width	: 50,
10 *             height	: 50
11 *         }
12 *     });
13 * 
14 * Options:
15 *     width - thumbnail width
16 *     height - thumbnail height
17 *     source - function to obtain the URL of the thumbnail image
18 * 
19 */
20(function ($) {
21    //Shortcut for fancyBox object
22    var F = $.fancybox;
23
24    //Add helper object
25    F.helpers.thumbs = {
26        wrap: null,
27        list: null,
28        width: 0,
29
30        //Default function to obtain the URL of the thumbnail image
31        source: function (el) {
32            var img = $(el).find('img');
33
34            return img.length ? img.attr('src') : el.href;
35        },
36
37        init: function (opts) {
38            var that = this,
39                list,
40                thumbWidth = opts.width || 50,
41                thumbHeight = opts.height || 50,
42                thumbSource = opts.source || this.source;
43
44            //Build list structure
45            list = '';
46
47            for (var n = 0; n < F.group.length; n++) {
48                list += '<li><a style="width:' + thumbWidth + 'px;height:' + thumbHeight + 'px;" href="javascript:$.fancybox.jumpto(' + n + ');"></a></li>';
49            }
50
51            this.wrap = $('<div id="fancybox-thumbs"></div>').appendTo('body');
52            this.list = $('<ul>' + list + '</ul>').appendTo(this.wrap);
53
54            //Load each thumbnail
55            $.each(F.group, function (i) {
56                $("<img />").load(function () {
57                    var width = this.width,
58                        height = this.height,
59                        widthRatio, heightRatio, parent;
60
61                    if (!that.list || !width || !height) {
62                        return;
63                    }
64
65                    //Calculate thumbnail width/height and center it
66                    widthRatio = width / thumbWidth;
67                    heightRatio = height / thumbHeight;
68                    parent = that.list.children().eq(i).find('a');
69
70                    if (widthRatio >= 1 && heightRatio >= 1) {
71                        if (widthRatio > heightRatio) {
72                            width = Math.floor(width / heightRatio);
73                            height = thumbHeight;
74
75                        } else {
76                            width = thumbWidth;
77                            height = Math.floor(height / widthRatio);
78                        }
79                    }
80
81                    $(this).css({
82                        width: width,
83                        height: height,
84                        top: Math.floor(thumbHeight / 2 - height / 2),
85                        left: Math.floor(thumbWidth / 2 - width / 2)
86                    });
87
88                    parent.width(thumbWidth).height(thumbHeight);
89
90                    $(this).hide().appendTo(parent).fadeIn(300);
91
92                }).attr('src', thumbSource(this));
93            });
94
95            //Set initial width
96            this.width = this.list.children().eq(0).outerWidth();
97
98            this.list.width(this.width * (F.group.length + 1)).css('left', Math.floor($(window).width() * 0.5 - (F.current.index * this.width + this.width * 0.5)));
99        },
100
101        //Center list
102        update: function (opts) {
103            if (this.list) {
104                this.list.stop(true).animate({
105                    'left': Math.floor($(window).width() * 0.5 - (F.current.index * this.width + this.width * 0.5))
106                }, 150);
107            }
108        },
109
110        beforeLoad: function (opts) {
111            //Remove self if gallery do not have at least two items
112            if (F.group.length < 2) {
113                F.coming.helpers.thumbs = false;
114
115                return;
116            }
117
118            //Increase bottom margin to give space for thumbs
119            F.coming.margin[2] = opts.height + 30;
120        },
121
122        afterShow: function (opts) {
123            //Check if exists and create or update list
124            if (this.list) {
125                this.update(opts);
126
127            } else {
128                this.init(opts);
129            }
130
131            //Set active element
132            this.list.children().removeClass('active').eq(F.current.index).addClass('active');
133        },
134
135        onUpdate: function () {
136            this.update();
137        },
138
139        beforeClose: function () {
140            if (this.wrap) {
141                this.wrap.remove();
142            }
143
144            this.wrap = null;
145            this.list = null;
146            this.width = 0;
147        }
148    }
149
150}(jQuery));