You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
151 lines
4.3 KiB
151 lines
4.3 KiB
(function ($, window, document, undefined) {
|
|
|
|
var gridContainer = $('#grid-container'),
|
|
filtersContainer = $('#filters-container');
|
|
|
|
// init cubeportfolio
|
|
gridContainer.cubeportfolio({
|
|
|
|
defaultFilter: '*',
|
|
|
|
animationType: 'fadeOut',
|
|
|
|
gapHorizontal: 20,
|
|
|
|
gapVertical: 20,
|
|
|
|
gridAdjustment: 'responsive',
|
|
|
|
caption: 'zoom',
|
|
|
|
displayType: 'sequentially',
|
|
|
|
displayTypeSpeed: 100,
|
|
|
|
// lightbox
|
|
lightboxDelegate: '.cbp-lightbox',
|
|
lightboxGallery: true,
|
|
lightboxTitleSrc: 'data-title',
|
|
lightboxShowCounter: true,
|
|
|
|
// singlePage popup
|
|
singlePageDelegate: '.cbp-singlePage',
|
|
singlePageDeeplinking: true,
|
|
singlePageStickyNavigation: true,
|
|
singlePageShowCounter: true,
|
|
singlePageCallback: function (url, element) {
|
|
// to update singlePage content use the following method: this.updateSinglePage(yourContent)
|
|
},
|
|
|
|
// singlePageInline
|
|
singlePageInlineDelegate: '.cbp-singlePageInline',
|
|
singlePageInlinePosition: 'below',
|
|
singlePageInlineShowCounter: true,
|
|
singlePageInlineInFocus: true,
|
|
singlePageInlineCallback: function(url, element) {
|
|
|
|
// to update singlePageInline content use the following method: this.updateSinglePageInline(yourContent)
|
|
var t = this;
|
|
|
|
$.ajax({
|
|
url: url,
|
|
type: 'GET',
|
|
dataType: 'html',
|
|
timeout: 5000
|
|
})
|
|
.done(function(result) {
|
|
|
|
t.updateSinglePageInline(result);
|
|
|
|
})
|
|
.fail(function() {
|
|
t.updateSinglePageInline("Error! Please refresh the page!");
|
|
});
|
|
|
|
}
|
|
});
|
|
|
|
// add listener for filters click
|
|
filtersContainer.on('click', '.cbp-filter-item', function (e) {
|
|
|
|
var me = $(this), wrap;
|
|
|
|
// get cubeportfolio data and check if is still animating (reposition) the items.
|
|
if ( !$.data(gridContainer[0], 'cubeportfolio').isAnimating ) {
|
|
|
|
if ( filtersContainer.hasClass('cbp-l-filters-dropdown') ) {
|
|
wrap = $('.cbp-l-filters-dropdownWrap');
|
|
|
|
wrap.find('.cbp-filter-item').removeClass('cbp-filter-item-active');
|
|
|
|
wrap.find('.cbp-l-filters-dropdownHeader').text(me.text());
|
|
|
|
me.addClass('cbp-filter-item-active');
|
|
} else {
|
|
me.addClass('cbp-filter-item-active').siblings().removeClass('cbp-filter-item-active');
|
|
}
|
|
|
|
}
|
|
|
|
// filter the items
|
|
gridContainer.cubeportfolio('filter', me.data('filter'), function () {});
|
|
|
|
});
|
|
|
|
// add listener for load more click
|
|
$('.button').on('click', function(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
var clicks, me = $(this), oMsg;
|
|
|
|
if (me.hasClass('cbp-l-loadMore-button-stop')) return;
|
|
|
|
// get the number of times the loadMore link has been clicked
|
|
clicks = $.data(this, 'numberOfClicks');
|
|
clicks = (clicks)? ++clicks : 1;
|
|
$.data(this, 'numberOfClicks', clicks);
|
|
|
|
// set loading status
|
|
oMsg = me.text();
|
|
me.text('LOADING...');
|
|
|
|
// perform ajax request
|
|
$.ajax({
|
|
url: me.attr('href'),
|
|
type: 'GET',
|
|
dataType: 'HTML'
|
|
})
|
|
.done( function (result) {
|
|
var items, itemsNext;
|
|
|
|
// find current container
|
|
items = $(result).filter( function () {
|
|
return $(this).is('div' + '.cbp-loadMore-block' + clicks);
|
|
});
|
|
|
|
gridContainer.cubeportfolio('appendItems', items.html(),
|
|
function () {
|
|
// put the original message back
|
|
me.text(oMsg);
|
|
|
|
// check if we have more works
|
|
itemsNext = $(result).filter( function () {
|
|
return $(this).is('div' + '.cbp-loadMore-block' + (clicks + 1));
|
|
});
|
|
|
|
if (itemsNext.length === 0) {
|
|
me.text('NO MORE WORKS');
|
|
me.addClass('cbp-l-loadMore-button-stop');
|
|
}
|
|
|
|
});
|
|
|
|
})
|
|
.fail(function() {
|
|
// error
|
|
});
|
|
|
|
});
|
|
|
|
})(jQuery, window, document);
|
|
|