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：// 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"

BONUS解决方案：我需要在新窗口中打开我的灯箱图片，让手机上的用户放大，所以我在第一个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');
       }
   }
});

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

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

2 个答案: