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

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

<a href="img/base/ggg.PNG" title="HELLO" class="chicken">
  <img src="img/base/pop.PNG" alt="remember your alt tag" />
</a>

$(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
        }
    });
});

该脚本然后自动将标题写入其标记为class =“mfp-title”的div

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

titleSrc: 'title',titleSrc: function(item) {
        return '<a href="' + item.el.attr('href') + '">' + item.el.attr('title') + '</a>';
        }

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