https://kare.co.jp/js/tygh/product_image_gallery.js?ver=1790352021

1
2(function(_, $) {
3
4    var ITEMS_COUNT_DEFAULT = 3;
5    var scroller_type;
6
7    var methods = {
8        init: function() {
9            var container = $(this);
10            var params = {
11                items_count: container.data('caItemsCount') ? container.data('caItemsCount') : ITEMS_COUNT_DEFAULT,
12                items_responsive: container.data('caItemsResponsive') ? true : false
13            };
14
15            if (container.hasClass('jcarousel-skin') || container.parent().hasClass('jcarousel-skin')) {
16                scroller_type = 'jcarousel';
17            } else {
18                scroller_type = 'owlcarousel';
19            }
20
21            if (methods.countElms(container) <= params.items_count) {
22                container.removeClass('owl-carousel');
23            }
24
25            if (methods.countElms(container) > params.items_count || (container.hasClass('jcarousel-skin') && methods.countElms(container) > params.items_count)) {
26                if (container.data('owl-carousel') || container.data('jcarousel')) {
27                    return true;
28                }
29
30                methods.check(container, params);
31            }
32
33            methods.bind(container);
34
35            return true;
36        },
37
38        load: function(container, params) {
39            if (scroller_type == 'owlcarousel') {
40                container.owlCarousel({
41                    direction: _.language_direction,
42                    items: params.items_count,
43                    singleItem: params.items_count == 1 ? true : false,
44                    responsive: params.items_responsive,
45                    pagination: false,
46                    navigation: true,
47                    lazyLoad: true,
48                    navigationText: params.items_count == 1 ? ['<i class="icon-left-circle ty-icon-left-circle"></i>', '<i class="icon-right-circle ty-icon-right-circle"></i>'] : ['<i class="icon-left-open-thin ty-icon-left-open-thin"></i>', '<i class="icon-right-open-thin ty-icon-right-open-thin"></i>'],
49                    theme: params.items_count == 1 ? 'owl-one-theme' : 'owl-more-theme',
50                    afterInit: function(item) {
51                        $(item).css({'visibility':'visible', 'position':'relative'});
52                    }
53                });
54            } else {
55                $('li', container).show();
56                container.jcarousel({
57                    scroll: 1,
58                    wrap: 'circular',
59                    animation: 'fast',
60                    initCallback: $.ceScrollerMethods.init_callback,
61                    itemFallbackDimension: params.i_width,
62                    item_width: params.i_width,
63                    item_height: params.i_height,
64                    clip_width: params.c_width,
65                    clip_height: params.i_height,
66                    buttonNextHTML: '<div><i class="icon-right-open-thin ty-icon-right-open-thin"></i></div>',
67                    buttonPrevHTML: '<div><i class="icon-left-open-thin ty-icon-left-open-thin"></i></div>',
68                    buttonNextEvent: 'click',
69                    buttonPrevEvent: 'click',
70                    size: methods.countElms(container)
71                });
72            }
73        },
74
75        check: function(container, params) {
76            if (container.data('owl-carousel') || container.data('jcarousel')) {
77                return true;
78            }
79
80            if (!params.i_width || !params.i_height) {
81                var t_elm = false;
82
83                if ($('.cm-gallery-item', container).length) {
84                    var load = false;
85
86                    // check images are loaded
87                    $('.cm-gallery-item', container).each(function() {
88                        var elm = $(this);
89                        var i_elm = $('img', elm);
90
91                        if (i_elm.length) {
92                            if (elm.outerWidth() >= i_elm.width()) {
93                                // find first loaded image
94                                t_elm = elm;
95                                return false;
96                            }
97                            load = true;
98                        }
99                    });
100                    if (!t_elm) {
101                        if (load) {
102                            var check_load = function() {
103                                methods.check(container, params);
104                            }
105                            // wait until image is loaded
106                            setTimeout(check_load, 500);
107                            return false;

108                        } else {
109                            t_elm = $('.cm-gallery-item:first', container);
110                        }
111                    }
112                } else {
113                    t_elm = $('img:first', container);
114                }
115
116                params.i_width = t_elm.outerWidth(true);
117                params.i_height = t_elm.outerHeight(true);
118                params.c_width = params.i_width * params.items_count;
119
120                if (scroller_type == 'owlcarousel') {
121                    container.closest('.cm-image-gallery-wrapper').width(params.c_width);
122                }
123
124                container.closest('.cm-image-gallery-wrapper').width(params.c_width);
125            }
126
127            return methods.load(container, params);
128        },
129
130        bind: function(container) {
131            container.click(function(e) {
132                var jelm = $(e.target);
133                var pjelm;
134                var in_elm;
135
136                // Check elm clicking
137                if (scroller_type == 'owlcarousel') {
138                    in_elm = jelm.parents('.cm-item-gallery') || jelm.parents('div.cm-thumbnails-mini') ? true : false;
139                } else {
140                    in_elm = jelm.parents('li') || jelm.parents('div.cm-thumbnails-mini') ? true : false;
141                }
142
143                if (in_elm && !jelm.is('img')) { // Check if the object is image or SWF embed object or parent is SWF-container
144                    return false;
145                }
146
147                if (jelm.hasClass('cm-thumbnails-mini') || (pjelm = jelm.parents('a:first.cm-thumbnails-mini'))) {
148                    jelm = (pjelm && pjelm.length) ? pjelm : jelm;
149
150                    var c_id = jelm.data('caGalleryLargeId'),
151                        image_box;
152
153                    if (scroller_type == 'owlcarousel') {
154                        image_box = $('#' + c_id).closest('.cm-preview-wrapper');
155
156                        if (!image_box.length) {
157                            image_box = $('.cm-preview-wrapper:first');
158                        }
159                    } else {
160                        var jc_box = $(this).parents('.jcarousel-skin:first');
161                        image_box = (jc_box.length) ? jc_box.parents(':first') : $(this).parents(':first');
162                    }
163
164                    $(image_box).trigger('owl.goTo', $(jelm).data('caImageOrder') || 0);
165                }
166            });
167        },
168
169        countElms: function(container) {
170            if (scroller_type == 'owlcarousel') {
171                return $('.cm-gallery-item', container).length;
172            } else {
173                return $('li', container).length;
174            }
175        }
176    };
177
178    $.fn.ceProductImageGallery = function(method) {
179
180        if($('.jcarousel-skin').length !== 0) {
181            if(!$().jcarousel) {
182                var gelms = $(this);
183                $.getScript('js/lib/jcarousel/jquery.jcarousel.js', function() {
184                    gelms.ceProductImageGallery();
185                });
186                return false;
187            }
188        } else {
189            if (!$().owlCarousel) {
190                var gelms = $(this);
191                $.getScript('js/lib/owlcarousel/owl.carousel.min.js', function() {
192                    gelms.ceProductImageGallery();
193                });
194                return false;
195            }
196        }
197
198        return $(this).each(function(i, elm) {
199
200            // These vars are local for each element
201            var errors = {};
202
203            if (methods[method]) {
204                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
205            } else if ( typeof method === 'object' || ! method ) {
206                return methods.init.apply(this, arguments);
207            } else {
208                $.error('ty.productimagegallery: method ' +  method + ' does not exist');
209            }
210        });
211    };
212})(Tygh, Tygh.$);
213
214
215(function(_, $) {
216    $.ceEvent('on', 'ce.commoninit', function (context) {
217        $('.cm-preview-wrapper', context).owlCarousel({
218            direction: _.language_direction,
219            pagination: false,
220            singleItem: true,
221            addClassActive: true,
222            afterInit: function (item) {
223                var thumbnails = $('.cm-thumbnails-mini', item.parents('[data-ca-previewer]')),
224                    previewers = $('.cm-image-previewer', item.parents('[data-ca-previewer]')),
225                    previousScreenX = 0,
226                    newScreenX = 0,
227                    swipeThreshold = 7;
228
229                previewers.each(function (index, elm) {
230                    $(elm).data('caImageOrder', index);
231                });
232
233                thumbnails.on('click', function () {
234                    item.trigger('owl.goTo', $(this).data('caImageOrder') ? $(this).data('caImageOrder') : 0);
235                });
236                
237                item.on('touchstart', function (e) {
238                    previousScreenX = e.changedTouches[0].screenX;
239                })
240                
241                item.on('touchmove', function (e) {
242                    newScreenX = e.changedTouches[0].screenX;
243
244                    if (Math.abs(newScreenX - previousScreenX) > swipeThreshold && e.cancelable) {
245                        e.preventDefault();
246                    }
247
248                    previousScreenX = newScreenX;
249                })
250
251                $('.cm-image-previewer.hidden', item).toggleClass('hidden', false);
252
253                $.ceEvent('trigger', 'ce.product_image_gallery.ready');
254            },
255            afterMove: function (item) {
256                var _parent = item.parent();
257
258                // inactive all thumbnails
259                $('.cm-thumbnails-mini', _parent)
260                    .toggleClass('active', false);
261
262                // active only current thumbnail
263                var elmOrderInGallery = $('.active', item).index(); // order of active image in carousel

264                $('[data-ca-image-order=' + elmOrderInGallery + ']', _parent)
265                    .toggleClass('active', true);
266
267                // move mini-thumbnail-gallery
268                $('.owl-carousel.cm-image-gallery', _parent)
269                    .trigger('owl.goTo', elmOrderInGallery);
270
271                $.ceEvent('trigger', 'ce.product_image_gallery.image_changed');
272            }
273        });
274    });
275})(Tygh, Tygh.$);