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

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小提琴:https://jsfiddle.net/sb4btox7/

Answer 1

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

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

解:

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

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

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

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

奖励解决方案:我需要在新窗口中打开我的灯箱图像,以便用户在手机上放大,所以我在第一次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在"图像类型"部分中

Answer 2

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

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

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