如何使用大胆的弹出窗口包含图库的标题？

我正在尝试在图像下的实际网页上添加一个标题,同时使用华丽的弹出库.使用div和类标题或轮播标题,如果没有图库中的图像逐个垂直堆叠,我将无法这样做.我怎样才能做到这一点？

  


$(document).ready(function() {
      $('.chicken').magnificPopup({ 
         type: 'image',
         gallery:{enabled:true}
         // other options here
         // end each line (except the last) with a comma
      });
   });

js小提琴:https://jsfiddle.net/sb4btox7/

由于我还没有足够的声誉来评论,我在这里评论,除了提供解决方案.

评论:JSFiddle没有使用您的http:// images因为JSFiddle正试图从https://提供它们

解:

你在那里.制作字幕有两个部分.

您正确地将链接放在锚标记中而不是图像标记中

您必须在初始化脚本中指定标题源,如下所示.

$(document).ready(function() {
    $('.chicken').magnificPopup({ 
        type: 'image',
        gallery:{enabled:true},
        type: 'image',
        image: {
            titleSrc: 'title' 
            // this tells the script which attribute has your caption
        }
    });
});

然后,脚本会自动将标题写入标记为div的div class="mfp-title"

奖励解决方案:我需要在新窗口中打开我的灯箱图像,以便用户在手机上放大,所以我在第一次titleSrc声明后添加了这个:

    titleSrc: 'title',
    titleSrc: function(item) {
        return '' + item.el.attr('title') + '';
        }

此信息位于文档中:http://dimsemenov.com/plugins/magnific-popup/documentation.html在"图像类型"部分中