css - 如何使用 magnific 弹出窗口为画廊添加标题？

Question

我正在尝试在图片下方的实际网页上添加标题，同时使用宏伟的弹出式画廊。使用 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 fiddle :https://jsfiddle.net/sb4btox7/

Answer 1

由于我还没有足够的声誉点来发表评论，所以我在这里评论，除了提供解决方案。

评论:JSFiddle 无法处理您的 http://图片，因为 JSFiddle 正试图从 https://提供它们

解决方法:

你已经完成了一半。使字幕正常工作分为 2 个部分。

1. 您正确地将链接放在了 anchor 标记中，而不是图片标签

2. 您必须在您的像这样的初始化脚本。

   $(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在“图像类型”部分