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

Question

我正在尝试在图片下方的实际网页上添加标题，同时使用宏伟的弹出式画廊。使用 div 和 class 标题或 carousel-caption，如果画廊中的图像没有一张一张地垂直堆叠，我将无法这样做。我该怎么做？

<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 个部分。

您正确地将 link 放在锚标记中，而不是图片标签

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

$(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 标记为 class="mfp-title"

奖励解决方案：我需要我的灯箱图片在新的 window 中打开，以便用户在手机上放大，所以我在第一个 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 在 "Image Type" 部分

Answer 2

我尝试使用所选答案，但即使使用文档，这些示例也不适合我。我最终使用的是：

$('.elements').magnificPopup({
   type: 'image',
   gallery: {
       enabled: true
   },
   image: {
       titleSrc: function(item) {
          return item.el.find('img').attr('title');
       }
   }
});

这可能与我使用的版本有关，但不清楚文档是针对哪个版本的。希望这对某人有用。

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

How to include caption for gallery using magnific popup?

css

gallery

magnific-popup