我有一个画廊,显示每个类别的“特色”图像。单击一个时,会弹出一个灯箱模式,并显示当前的一组特色图像。但是,我需要灯箱显示与单击的图像类别相对应的图像组。每个类别有9张图片,并且有7个类别,包括“精选”。
我试图按照自己的方式来编写代码,但一直挂断电话。
var m = require('mithril');
require('jquery');
require('lightbox2');
var Gallery = {
oninit: function( vnode ) {
m.request({
url: 'https://bigtuna.com/gallery/portfolio-update.json',
method: 'GET'
}).then(function( result ) {
vnode.state.images = result.images;
vnode.state.categories = result.categories;
vnode.state.currentCategory = result.categories[ 0 ];
// Test Logs
console.log('vnode', vnode)
console.log('result', result)
console.log('state', vnode.state)
console.log('images', vnode.state.images)
});
},
filterByCategory: function( vnode ) {
var categoryImages = vnode.state.images.filter(function( image ) {
return image.categories.indexOf( vnode.state.currentCategory ) > -1;
});
if( vnode.state.currentCategory === 'Featured') {
categoryImages = Gallery.sortByPriority( categoryImages );
}
return categoryImages;
},
sortByPriority: function( featuredImages ) {
return featuredImages.filter(function( image ) {
return image.hasOwnProperty('priority');
}).sort(function(a,b) {
return a.priority - b.priority;
});
},
filterByFeatured: function ( vnode ) {
return vnode.state.images.filter(function( image ) {
return image.categories.indexOf('Featured').filter > -1;
})
},
selectCategory: function( vnode, category ) {
vnode.state.currentCategory = category;
},
view: function( vnode ) {
return m('.big-tuna-portfolio',
m('.container-fluid',
m('.row',
vnode.state.images
? Gallery.filterByCategory( vnode ).map(function( image, index, category ) {
return m('.col-12.col-sm-6.col-md-4.featured-padding',
m('.img-wrap', { class: vnode.state.currentCategory.indexOf('Featured') > -1 ? 'featured-image' : ''},
image.hasOwnProperty('logo')
? m('img.featured-logo', { src: image.logo } )
: '',
m('.img-overlay'),
m('a', {
href: image.url,
"data-lightbox": "portfolio",
"data-title": '<a href="' + image.siteUrl + '" target="_blank">View Full Site <span><i class="fa fa-chevron-right"></i></span></a>',
},
m('img.thumb', { src: image.thumb })
)
)
)
}) : ''
)
)
)
}
};
m.mount(document.getElementById('big-tuna-gallery'), Gallery);
预期结果是单击类别,所有具有该类别的图像将显示在灯箱模式中。