Как получить лайтбокс для отображения нужной группы изображений на основе категорий JSON? - PullRequest
Новая
       15

Как получить лайтбокс для отображения нужной группы изображений на основе категорий JSON?

0 голосов
/ 09 апреля 2019

У меня есть галерея, которая отображает «избранные» изображения для каждой категории. При нажатии на него появляется модальное окно лайтбокса и отображает текущую группу избранных изображений. Тем не менее, мне нужно, чтобы лайтбокс отображал группу изображений, которые соответствуют категории изображений, по которой щелкнули. Каждая категория имеет 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);

Ожидаемым результатом будет нажатие на категорию, и все изображения с этой категорией будут отображаться в модальном лайтбоксе.

...