我想知道是否有一个方法可以添加文本到poptrox弹出窗口。我知道我可以使用caption属性添加标题文本,但这不是我想要的。我想添加一个div或文本元素到弹出窗口本身,这样当用户点击图像时,弹出窗口就会显示出来描述图像。有什么原因要这样做吗?我正在使用poptrox github表单,我尝试使用Iframes和它允许的其他源,但没有一个是我想要的工作方式
ygya80vv1#
在库项的HTML标记中,在链接到全尺寸图像的锚元素内添加一个带有“caption”类的div。
<a href="image1.jpg"> <img src="thumb1.jpg"> <div class="caption">Caption for Image 1</div> </a>
在初始化Poptrox插件的jQuery代码中,将caption类添加到创建lightbox时应该克隆的类列表中。
$('.gallery').poptrox({ caption: function($a) { return $a.next('.caption').text(); }, overlayColor: '#2c2c2c', overlayOpacity: 0.85, popupCloserText: '', popupLoaderText: '', selector: '.thumb > a', usePopupCaption: true, usePopupDefaultStyling: false, usePopupNav: true });
然后,您可以添加CSS来根据需要设置标题的样式。
.caption { background-color: rgba(0,0,0,0.7); bottom: 0; color: #fff; padding: 10px; position: absolute; width: 100%; }
1条答案
按热度按时间ygya80vv1#
在库项的HTML标记中,在链接到全尺寸图像的锚元素内添加一个带有“caption”类的div。
在初始化Poptrox插件的jQuery代码中,将caption类添加到创建lightbox时应该克隆的类列表中。
然后,您可以添加CSS来根据需要设置标题的样式。