Question

我想添加其他数据以与图库中的每个附加项一起使用，在这种情况下，除了标题之外还有项目名称。我在Codepen（也在下面）上有一个工作版本，使用markupParse回调并将项目名称信息存储在一个单独的数组中，但似乎有一种更有效的方法可以使用Magnific Popup API 。有没有办法用item对象存储这些信息，甚至可能缓存渲染的html？

在示例代码中，我在<div class="my-project"></div>变量中创建了一个名为markup的额外div，并使用galleryProject回调放置markupParse数组中的项目名称数据

$('#gallery').magnificPopup({

    type: 'image',

    items: [
      {
        src: 'img1.jpg',
        title: 'Caption 1'
      },
      {
        src: 'img2.jpg',
        title: 'Caption 2'
      },
      {
        src: 'img3.jpg',
        title: 'Caption 3'
      }
    ],

    gallery: {
      enabled: true
    },

    image: {
      markup: '<div class="mfp-figure">'+
                '<div class="mfp-close"></div>'+
                '<div class="mfp-img"></div>'+
                '<div class="mfp-bottom-bar">'+
              '<div class="my-project"></div>'+
                  '<div class="mfp-title"></div>'+
                  '<div class="mfp-counter"></div>'+
                '</div>'+
              '</div>'
    },

    callbacks: {
      markupParse: function(template, values, item) {
        var index = this.currItem.index;
        template.find('.my-project').html( galleryProject[index] );
      }
    }


});

var galleryProject = ['Project 1','Project 2','Project 3'];

Answer 1

你是对的，这是更简单的方式：

$('#gallery').magnificPopup({

    type: 'image',

    items: [
      {
        src: 'img1.jpg',
        title: 'Caption 1',
        project: 'Project 1'
      },
      {
        src: 'img2.jpg',
        title: 'Caption 2',
        project: 'Project 2'
      },
      {
        src: 'img3.jpg',
        title: 'Caption 3',
        project: 'Project 3'
      }
    ],

    gallery: {
      enabled: true
    },

    image: {
      markup: '<div class="mfp-figure">'+
                '<div class="mfp-close"></div>'+
                '<div class="mfp-img"></div>'+
                '<div class="mfp-bottom-bar">'+
                  '<div class="mfp-project"></div>'+
                  '<div class="mfp-title"></div>'+
                  '<div class="mfp-counter"></div>'+
                '</div>'+
              '</div>'
    }


});

将数据添加到Magnific Popup中的项目

1 个答案: