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

我试图在使用“壮丽”弹出式图库时，在图片下方的实际网页上添加一个标题。使用div和class标题或carousel标题，如果没有画廊中的图像一个接一个地垂直堆叠，我就无法做到这一点。我该怎么做

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

$（文档）.ready（函数（）{
$（'.chicken'）。放大弹出（{
键入：“图像”，
库：{已启用：true}
//这里还有其他选择
//以逗号结束每一行（最后一行除外）
});
});

---

js fiddle:

因为我还没有足够的信誉点来评论，除了提供解决方案之外，我还在这里发表评论

注释：JSFiddle无法处理您的http://图像，因为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”

额外的解决方案：我需要在一个新窗口中打开我的lightbox图像，以便用户在手机上放大，因此我在第一个

标题rc

声明后添加了这个：

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

titleSrc:“title”，
标题RC：功能（项目）{
返回“”；
}

---

这些信息在文档中：在“图像类型”部分，我尝试使用选定的答案，但即使使用文档，示例对我也不起作用。我最终使用的是：

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

---

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

您必须发布到目前为止的代码、HTML、CSS以及相关的javascript。您还应该添加一个fiddle示例。仅仅因为StackOverflow有一个放大弹出的标签，并不意味着99%的javascript开发人员会知道它是什么，我（和几乎所有其他人）不会去下载它并阅读文档只是为了给你一个答案。如果可以的话，请提供您需要的屏幕或粗略模型。bumppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppthanks。我应该在某处插入一个带有类mfp标题的div吗？我目前没有使用它。mfp标题div仅用于标题，因此如果您没有使用标题，则不需要该div。否则，是的，您应该将该类的div放置在您希望标题的位置。为什么该代码在每个水平空间显示一个图像，以便它们都垂直堆叠？我不理解您的问题。