https://www.amt-buechen.de/fileadmin/Resources/Public/js/components/hs.cubeportfolio.js?1631604936

1/**
2 * Filter wrapper.
3 *
4 * @author Htmlstream
5 * @version 1.0
6 * @requires
7 *
8 */
9
10;(function ($) {
11  'use strict';
12
13  $.HSCore.components.HSCubeportfolio = {
14    /**
15     *
16     *
17     * @var Object _baseConfig
18     */
19    _baseConfig: {},
20
21    /**
22     *
23     *
24     * @var jQuery pageCollection
25     */
26    pageCollection: $(),
27
28    /**
29     * Initialization of Filter wrapper.
30     *
31     * @param String selector (optional)
32     * @param Object config (optional)
33     *
34     * @return jQuery pageCollection - collection of initialized items.
35     */
36
37    init: function (selector, config) {
38
39      this.collection = selector && $(selector).length ? $(selector) : $();
40      if (!$(selector).length) return;
41
42      this.config = config && $.isPlainObject(config) ?
43        $.extend({}, this._baseConfig, config) : this._baseConfig;
44
45      this.config.itemSelector = selector;
46
47      this.initCubeportfolio();
48
49      return this.pageCollection;
50
51    },
52
53    initCubeportfolio: function () {
54      //Variables
55      var $self = this,
56        config = $self.config,
57        collection = $self.pageCollection;
58
59      //Actions
60      this.collection.each(function (i, el) {
61        //Variables
62        var $this = $(el),
63          setControls = $this.data('controls'),
64          setLayout = $this.data('layout'),
65          setXGap = $this.data('x-gap'),
66          setYGap = $this.data('y-gap'),
67          setAnimation = $this.data('animation'),
68          setCaptionAnimation = $this.data('caption-animation'),
69          setLoadMoreSelector = $(this).data('load-more-selector'),
70          setLoadMoreAction = $(this).data('load-more-action'),
71          setLoadItemsAmount = $(this).data('load-items-amount'),
72          setDefaultMediaQueries = setLayout === 'slider' ? [{
73            width: 0,
74            cols: 1,
75          }] : [{
76            width: 1500,
77            cols: 3
78          }, {
79            width: 1100,
80            cols: 3
81          }, {
82            width: 800,
83            cols: 3
84          }, {
85            width: 480,
86            cols: 2,
87            options: {
88              caption: '',
89              gapHorizontal: 10,
90              gapVertical: 10
91            }
92          }],
93          setMeidaQueries = JSON.parse(el.getAttribute('data-media-queries')),
94          setIsAuto = Boolean($this.data('is-auto')),
95          setAutoTimeout = $this.data('auto-timeout'),
96          setIsAutoPauseOnHover = Boolean($this.data('is-auto-pause-on-hover')),
97          setIsShowNavigation = Boolean($this.data('is-show-navigation')),
98          setIsShowPagination = Boolean($this.data('is-show-pagination')),
99          setIsRewindNav = Boolean($this.data('is-rewind-nav')),
100          setIsScrollByPage = Boolean($this.data('is-scroll-by-page'));
101
102        $this.cubeportfolio({
103          filters: setControls,
104          layoutMode: setLayout,
105
106          drag: setLayout === 'slider',
107          auto: setIsAuto ? setIsAuto : false,
108          autoTimeout: setAutoTimeout ? setAutoTimeout : false,
109          autoPauseOnHover: setIsAutoPauseOnHover ? setIsAutoPauseOnHover : false,
110          showNavigation: setIsShowNavigation ? setIsShowNavigation : false,
111          showPagination: setIsShowPagination ? setIsShowPagination : false,
112          rewindNav: setIsRewindNav ? setIsRewindNav : false,
113          scrollByPage: setIsScrollByPage ? setIsScrollByPage : false,
114
115          defaultFilter: '*',
116          sortToPreventGaps: true,
117          gapHorizontal: setXGap,
118          gapVertical: setYGap,
119          animationType: setAnimation,
120          gridAdjustment: 'responsive',
121          mediaQueries: setMeidaQueries ? setMeidaQueries : setDefaultMediaQueries,
122          caption: setCaptionAnimation ? setCaptionAnimation : 'overlayBottomAlong',
123          displayType: 'sequentially',
124          displayTypeSpeed: 100,
125
126          // lightbox
127          lightboxDelegate: '.cbp-lightbox',
128          lightboxGallery: true,
129          lightboxTitleSrc: 'data-title',
130          lightboxCounter: '<div class="cbp-popup-lightbox-counter">{{current}} of {{total}}</div>',
131
132          appendItems: '<div class="logo cbp-item">

132my awesome content to append to plugin</div> <div class="logo cbp-item">my second awesome content to append to plugin</div>',
133
134          // singlePageInline
135          singlePageInlineDelegate: '.cbp-singlePageInline',
136          singlePageInlinePosition: 'below',
137          singlePageInlineInFocus: true,
138          singlePageInlineCallback: function (url, element) {
139            // to update singlePageInline content use the following method: this.updateSinglePageInline(yourContent)
140            var t = this;
141
142            $.ajax({
143              url: url,
144              type: 'GET',
145              dataType: 'html',
146              timeout: 30000
147            })
148              .done(function (result) {
149
150                t.updateSinglePageInline(result);
151
152              })
153              .fail(function () {
154                t.updateSinglePageInline('AJAX Error! Please refresh the page!');
155              });
156          },
157
158          // singlePage popup
159          singlePageDelegate: '.cbp-singlePage',
160          singlePageDeeplinking: true,
161          singlePageStickyNavigation: true,
162          singlePageCounter: '<div class="cbp-popup-singlePage-counter">{{current}} of {{total}}</div>',
163          singlePageCallback: function (url, element) {
164            // to update singlePage content use the following method: this.updateSinglePage(yourContent)
165            var t = this;
166
167            $.ajax({
168              url: url,
169              type: 'GET',
170              dataType: 'html',
171              timeout: 10000
172            })
173              .done(function (result) {
174                t.updateSinglePage(result);
175              })
176              .fail(function () {
177                t.updateSinglePage('AJAX Error! Please refresh the page!');
178              });
179          },
180
181          plugins: {
182            loadMore: {
183              selector: setLoadMoreSelector,
184              action: setLoadMoreAction,
185              loadItems: setLoadItemsAmount
186            }
187          }
188        });
189
190        //Actions
191        collection = collection.add($this);
192      });
193    }
194  };
195
196})(jQuery);