我正在使用高级jQuery插件。它被称为 cubeportfolio 。一切都很好。我使用了3个不同的项目,滑块团队,客户端滑块和非常棒的工作展示了ajax内容加载。
好吧,当我使用客户端滑块和令人敬畏的工作展示而不是一切正常时,Ajax内容正在加载不同的文件。
这是jQuery代码:
(function($, window, document, undefined) {
'use strict';
// init cubeportfolio
$('#js-grid-awesome-work').cubeportfolio({
filters: '#js-filters-awesome-work',
loadMore: '#js-loadMore-awesome-work',
loadMoreAction: 'click',
layoutMode: 'grid',
defaultFilter: '*',
animationType: 'scaleSides',
gapHorizontal: 30,
gapVertical: 30,
gridAdjustment: 'responsive',
mediaQueries: [{
width: 1500,
cols: 4
}, {
width: 1100,
cols: 3
}, {
width: 480,
cols: 2
}, {
width: 320,
cols: 1
}],
caption: 'zoom',
displayType: 'lazyLoading',
displayTypeSpeed: 400,
// singlePage popup
singlePageDelegate: '.cbp-singlePage',
singlePageDeeplinking: true,
singlePageStickyNavigation: true,
singlePageCounter: '<div class="cbp-popup-singlePage-counter">{{current}} of {{total}}</div>',
singlePageCallback: function(url, element) {
// to update singlePage content use the following method: this.updateSinglePage(yourContent)
var t = this;
$.ajax({
url: url,
type: 'GET',
dataType: 'html',
timeout: 10000
})
.done(function(result) {
t.updateSinglePage(result);
})
.fail(function() {
t.updateSinglePage('AJAX Error! Please refresh the page!');
});
},
});
})(jQuery, window, document);
(function($, window, document, undefined) {
'use strict';
// init cubeportfolio
$('#js-grid-clients').cubeportfolio({
layoutMode: 'slider',
drag: true,
auto: true,
autoTimeout: 3000,
autoPauseOnHover: true,
showNavigation: false,
showPagination: true,
rewindNav: true,
scrollByPage: false,
gridAdjustment: 'responsive',
mediaQueries: [{
width: 1500,
cols: 5
}, {
width: 1100,
cols: 4
}, {
width: 800,
cols: 3
}, {
width: 480,
cols: 2
}, {
width: 320,
cols: 1
}],
gapHorizontal: 0,
gapVertical: 5,
caption: 'opacity',
displayType: 'lazyLoading',
displayTypeSpeed: 100,
});
})(jQuery, window, document);
现在,当我使用滑块团队的第三个脚本时,Ajax内容未加载。 BTW 客户端滑块和滑块组脚本相同。我也没有发现任何控制台错误。这是第3个脚本
(function($, window, document, undefined) {
'use strict';
// init cubeportfolio
$('#js-grid-slider-team').cubeportfolio({
layoutMode: 'slider',
drag: true,
auto: false,
autoTimeout: 5000,
autoPauseOnHover: true,
showNavigation: false,
showPagination: true,
rewindNav: true,
scrollByPage: true,
gridAdjustment: 'responsive',
mediaQueries: [{
width: 1680,
cols: 5
}, {
width: 1350,
cols: 4
}, {
width: 800,
cols: 3
}, {
width: 480,
cols: 2
}, {
width: 320,
cols: 1
}],
gapHorizontal: 0,
gapVertical: 45,
caption: '',
displayType: 'lazyLoading',
displayTypeSpeed: 400,
});
})(jQuery, window, document);
如何解决此问题并加载ajax内容。我不是一个jquery专家。这是测试网站链接 - http://zakirinfo.com/test/