是否可以在初始化图库时为每个图像设置标题？

Question

使用magnific popup，是否可以在通过javascript初始化图库时为每张图片设置标题？每个图像都没有 DOM 元素，因此无法使用 title 属性（或任何其他属性）作为指向标题的指针。

$('#my-gallery').magnificPopup({
    items: [
        {
            src: 'image.jpg',
            title: 'Some Title'
        },
        {
            src: 'image2.jpg',
            title: 'Some Other Title'
        }
    ],
    gallery: {
        enabled: true
    },
    type: 'image'
});

Answer 1

您可以根据 magnific popup 文档 (http://dimsemenov.com/plugins/magnific-popup/documentation.html#image-type) 传递以下参数为图像添加标题：

$('#my-gallery').magnificPopup({
    items: [
        {
            src: 'image.jpg',
            title: 'Some Title'
        },
        {
            src: 'image2.jpg',
            title: 'Some Other Title'
        }
    ],
    gallery: {
        enabled: true
    },
    type: 'image',
    image: {
       markup: '<div class="mfp-figure">'+
            '<div class="mfp-close"></div>'+
            '<div class="mfp-img"></div>'+
            '<div class="mfp-bottom-bar">'+
              '<div class="mfp-title"></div>'+
              '<div class="mfp-counter"></div>'+
            '</div>'+
          '</div>', // Popup HTML markup. `.mfp-img` div will be replaced with img tag, `.mfp-close` by close button

         tError: '<a href="%url%">The image</a> could not be loaded.' // Error message
   }
});

这是一个有效的 jsfiddle： https://jsfiddle.net/wmboxLfr/3/

注意这里的关键是图像标记有 'mfp-title'，并且项目将标题作为参数传递。干杯！

是否可以在初始化图库时为每个图像设置标题？

Is it possible to set captions for each image when initializing a gallery?

javascript

jquery

magnific-popup