如何获取灯箱以显示基于JSON类别的所需图像组?

时间:2019-04-09 15:26:27

标签: json lightbox mithril.js

我有一个画廊,显示每个类别的“特色”图像。单击一个时,会弹出一个灯箱模式,并显示当前的一组特色图像。但是,我需要灯箱显示与单击的图像类别相对应的图像组。每个类别有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);

预期结果是单击类别,所有具有该类别的图像将显示在灯箱模式中。

0 个答案:

没有答案