https://www.tabaknee.nl/templates/skelet/js/cubeportfolio/main.js

1(function ($, window, document, undefined) {
2    'use strict';
3
4    var gridContainer = $('#grid-container'),
5        filtersContainer = $('#filters-container'),
6        wrap, filtersCallback;
7
8
9    /*********************************
10     init cubeportfolio
11     *********************************/
12    gridContainer.cubeportfolio({
13        defaultFilter: '*',
14        animationType: 'fadeOutTop',
15        gapHorizontal: 0,
16        gapVertical: 0,
17        gridAdjustment: 'responsive',
18        caption: 'zoom',
19        displayType: 'lazyLoading',
20        displayTypeSpeed: 100,
21
22        // lightbox
23        lightboxDelegate: '.cbp-lightbox',
24        lightboxGallery: true,
25        lightboxTitleSrc: 'data-title',
26        lightboxCounter: '<div class="cbp-popup-lightbox-counter">{{current}} of {{total}}</div>',
27
28        // singlePage popup
29        singlePageDelegate: '.cbp-singlePage',
30        singlePageDeeplinking: true,
31        singlePageStickyNavigation: true,
32        singlePageCounter: '<div class="cbp-popup-singlePage-counter">{{current}} of {{total}}</div>',
33        singlePageCallback: function (url, element) {
34            // to update singlePage content use the following method: this.updateSinglePage(yourContent)
35        },
36
37        // singlePageInline
38        singlePageInlineDelegate: '.cbp-singlePageInline',
39        singlePageInlinePosition: 'above',
40        singlePageInlineInFocus: true,
41        singlePageInlineCallback: function (url, element) {
42            // to update singlePageInline content use the following method: this.updateSinglePageInline(yourContent)
43        }
44    });
45
46
47    /*********************************
48     add listener for filters
49     *********************************/
50    if (filtersContainer.hasClass('cbp-l-filters-dropdown')) {
51
52        wrap = filtersContainer.find('.cbp-l-filters-dropdownWrap');
53
54        wrap.on({
55            'mouseover.cbp': function () {
56                wrap.addClass('cbp-l-filters-dropdownWrap-open');
57            },
58            'mouseleave.cbp': function () {
59                wrap.removeClass('cbp-l-filters-dropdownWrap-open');
60            }
61        });
62
63        filtersCallback = function (me) {
64            wrap.find('.cbp-filter-item').removeClass('cbp-filter-item-active');
65
66            wrap.find('.cbp-l-filters-dropdownHeader').text(me.text());
67
68            me.addClass('cbp-filter-item-active');
69
70            wrap.trigger('mouseleave.cbp');
71        };
72
73    } else {
74        filtersCallback = function (me) {
75            me.addClass('cbp-filter-item-active').siblings().removeClass('cbp-filter-item-active');
76        };
77    }
78
79    filtersContainer.on('click.cbp', '.cbp-filter-item', function () {
80
81        var me = $(this);
82
83        if (me.hasClass('cbp-filter-item-active')) {
84            return;
85        }
86        // get cubeportfolio data and check if is still animating (reposition) the items.
87        if (!$.data(gridContainer[0], 'cubeportfolio').isAnimating) {
88            filtersCallback.call(null, me);
89        }
90
91        // filter the items
92        gridContainer.cubeportfolio('filter', me.data('filter'), function () {
93        });
94
95    });
96
97
98    /*********************************
99     activate counter for filters
100     *********************************/
101    gridContainer.cubeportfolio('showCounter', filtersContainer.find('.cbp-filter-item'), function () {
102        // read from url and change filter active
103        var match = /#cbpf=(.*?)([#|?&]|$)/gi.exec(location.href),
104            item;
105        if (match !== null) {
106            item = filtersContainer.find('.cbp-filter-item').filter('[data-filter="' + match[1] + '"]');
107            if (item.length) {
108                filtersCallback.call(null, item);
109            }
110        }
111    });
112
113
114    /*********************************
115     add load more functionality
116     *********************************/
117    var loadMoreObject = {
118
119            init: function () {
120
121                var t = this;
122
123                // the job inactive
124                t.isActive = false;
125
126                t.numberOfClicks = 0;
127
128                // cache link selector
129                t.loadMore = $('.cbp-l-loadMore-text-link');
130
131                // cache window selector
132                t.window = $(window);
133
134                // add events for scroll
135                t.addEvents();
136
137                // trigger method on init
138                t.getNewItems();

139
140            },
141
142            addEvents: function () {
143
144                var t = this;
145
146                t.window.on("scroll.loadMoreObject", function () {
147                    // get new items on scroll
148                    t.getNewItems();
149                });
150            },
151
152            getNewItems: function () {
153
154                var t = this, topLoadMore, topWindow;
155
156                if (t.isActive || t.loadMore.hasClass('cbp-l-loadMore-text-stop')) {
157                    return;
158                }
159
160
161                topLoadMore = t.loadMore.offset().top;
162                topWindow = t.window.scrollTop() + t.window.height();
163
164                if (topLoadMore > topWindow) {
165                    return;
166                }
167
168                // this job is now busy
169                t.isActive = true;
170
171                // increment number of clicks
172                t.numberOfClicks++;
173
174                // perform ajax request
175                $.ajax({
176                    url: t.loadMore.attr('data-href'),
177                    type: 'GET',
178                    dataType: 'HTML',
179                    cache: true
180                })
181                    .done(function (result) {
182                        var items, itemsNext;
183
184                        // find current container
185                        items = $(result).filter(function () {
186                            return $(this).is('div' + '.cbp-loadMore-block' + t.numberOfClicks);
187                        });
188
189                        gridContainer.cubeportfolio('appendItems', items.html(),
190                            function () {
191
192                                // check if we have more works
193                                itemsNext = $(result).filter(function () {
194                                    return $(this).is('div' + '.cbp-loadMore-block' + (t.numberOfClicks + 1));
195                                });
196
197                                if (itemsNext.length === 0) {
198
199                                    t.loadMore.text('NO MORE ENTRIES');
200                                    t.loadMore.addClass('cbp-l-loadMore-text-stop');
201
202                                    t.window.off("scroll.loadMoreObject");
203
204                                } else {
205                                    // make the job inactive
206                                    t.isActive = false;
207
208                                    topLoadMore = t.loadMore.offset().top;
209                                    topWindow = t.window.scrollTop() + t.window.height();
210
211                                    if (topLoadMore <= topWindow) {
212                                        t.getNewItems();
213                                    }
214                                }
215
216                            });
217
218                    })
219                    .fail(function () {
220                        // make the job inactive
221                        t.isActive = false;
222                    });
223            }
224        },
225        loadMore = Object.create(loadMoreObject);
226
227    // Cube Portfolio is an event emitter. You can bind listeners to events with the on and off methods. The supported events are: 'initComplete', 'filterComplete'
228
229    // when the plugin is completed
230    gridContainer.on('initComplete', function () {

231        loadMore.init();
232    });
233
234    // when the height of grid is changed
235    gridContainer.on('filterComplete', function () {
236        loadMore.window.trigger('scroll.loadMoreObject');
237    });
238
239})(jQuery, window, document);