Javascript 灯箱&x2B；图像覆盖下的文本

放大后，如何在每个图像下添加自定义文本？现在它是基于

alt

文本的，但是我想用图像等来定制它

完美的解决方案是将文本显示在

div

中

这是代码笔：

//创建一个灯箱
（功能（）{
var$lightbox=$（“”）；
变量$img=$（“
正文{
背景：线性渐变（右下角，#b81d1d，#5F554C，#E4DFD8）；
字体系列：“开放式Sans”，无衬线；
}
.集装箱{
最大宽度：800px；
利润率：5%自动；
填充：20px；
背景色：#fff；
溢出：隐藏；
框大小：边框框；
盒影：0 15px 20px-15px rgba（0,0,0,0.3），0 35px 50px-25px rgba（0,0,0,0.3），0 85px 60px-25px rgba（0,0,0,0.1）；
}
.文本中心{
文本对齐：居中；
边缘底部：1米；
}
.灯箱画廊{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：中心；
}
.灯箱图库分区>img{
最大宽度：100%；
显示：块；
}
·灯箱廊分区{
利润率：10px；
弹性基准：180像素；
}
@仅介质屏幕和（最大宽度：480px）{
.灯箱画廊{
弯曲方向：立柱；
对齐项目：居中；
}
.lightbox>div{
边缘底部：10px；
}
}
/*Lighbox CSS*/
.灯箱{
显示：无；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,7）；
位置：固定；
排名：0；
左：0；
z指数：20；
填充顶部：30px；
框大小：边框框；
}
.灯箱img{
显示：块；
保证金：自动；
}
.灯箱.说明{
利润率：15px自动；
宽度：50%；
文本对齐：居中；
字号：1em；
线高：1.5；
字号：700；
颜色：#eee；
}

灯箱画廊
您可以添加一个隐藏的
div
并使用jQuery获取文本

 <div class="js-text text">Test</div>
 var txt = $(this).parent().find('.js-text').text()

测试
var txt=$（this.parent（）.find（'.js text'）.text（）

我认为您可以使用数据属性：

<div><img id="myImg" src="http://placehold.it/300/f1b702/fff&text=image1" alt="my alt" data-caption="my Caption or whatever you want"></div>

关于
这太棒了！当我在测试之间添加一个
img
时，它不会显示在覆盖图中。它应该是一个小的个人资料图像，显示谁拍了这张照片。有解决方案吗？我更新了演示。试着点击第一张图像。太棒了！非常感谢。
var myCaption = $('#myImg').data('caption');
// use this as you please