灯箱标题标题不起作用

Question

我是一个真正的新手，并试图使用网页模板来设计我自己的网站。

我有一个基本的灯箱画廊，它一切正常，但无论我已经尝试过，我不能得到一个标题显示在画廊图像（而不是缩略图）。

这是HTML代码中有一个画廊项目摘要：

<div class="gallery-item"> 
    <div class="image"> 
    <div class="overlay"> 
    <a href="img/gallery/gallery-item1.jpg" data-rel="lightbox" data-title="explanation of image goes in here"></a> 
    </div> 
    <img src="img/gallery/gallery-item1.jpg" alt="image 4"> 
    </div> 

我用标题试图=“标题”，而不是数据标题=“标题”，但没有喜悦。这里是灯箱的CSS：

#lightbox { 
cursor: pointer; 
position: fixed; 
width: 100%; 
height: 100%; 
top: 0; 
left: 0; 
background: black; 
/* IE Fallback (Solid Colour) */ 
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAIElEQVQ4T2NkYGDYDMRkA8ZRAxhGw4BhNAyA+WAYpAMAIFgLQfO9BoEAAAAASUVORK5CYII=); 
background: rgba(0, 0, 0, 0.7); 
-webkit-filter: none !important; 
} 

#lightbox img { 
display: block; 
position: absolute; 
border: 5px solid #fff; 
box-shadow: 0 0 20px #000; 
border-radius: 1px; 
} 

body.blurred > * { 
-webkit-filter: blur(2px); 
-webkit-transform: translate3d(0, 0, 0); 
} 

.lightbox-loading { 
background: url(../img/loading.gif) center center no-repeat; 
width: 31px; 
height: 31px; 
margin: -16px 0 0 -16px; 
position: absolute; 
top: 48%; 
left: 50%; 
} 

.lightbox-caption { 
display: none; 
position: absolute; 
left: 0; 
bottom: 0; 
width: 100%; 
text-align: center; 
z-index: 1000; 
background: #000; 
background: rgba(0, 0, 0, 0.7); 
} 

.lightbox-caption p { 
margin: 0 auto; 
max-width: 70%; 
display: inline-block; 
*display: inline; 
*zoom: 1; 
padding: 10px; 
color: #fff; 
font-size: 12px; 
line-height: 18px; 
} 

.lightbox-button { 
position: absolute; 
z-index: 9999; 
background: no-repeat center center; 
width: 32px; 
height: 32px; 
opacity: 0.4; 
-webkit-transition: all 0.3s; 
-moz-transition: all 0.3s; 
-ms-transition: all 0.3s; 
transition: all 0.3s; 
} 

.lightbox-button:hover, 
.lightbox-button:focus { 
opacity: 1; 
-webkit-transform: scale(1.4); 
-moz-transform: scale(1.4); 
-ms-transform: scale(1.4); 
transform: scale(1.4); 
} 

.lightbox-close { 
right: 30px; 
top: 30px; 
background-image: url("../img/close.png"); 
} 

.lightbox-next { 
right: 30px; 
top: 48%; 
background-image: url("../img/next.png"); 
} 

.lightbox-previous { 
left: 30px; 
top: 48%; 
background-image: url("../img/previous.png"); 
} 

欢迎任何提示/帮助。感谢

Answer 1

需要更多的代码来检查我会说，但你确实有

.lightbox-caption { 
display: none; 
} 

这通常会隐藏这个类。也许尝试并删除显示：无或更改为阻止或内联等？

Answer 2

标题正在由您的定位标记中的'data-caption'属性加载。

你的锚标签目前是这样的：

<a href="img/gallery/gallery-item1.jpg" data-rel="lightbox" class="fa fa-expand"></a> 

你需要插入这样的标题：

<a href="images/gallery/gallery-item1.jpg" data-caption="caption here" data-rel="lightbox" class="fa fa-expand"></a> 

为了你自己的利益，如果您在源文件中看到的JavaScript你会看到这些行：

setCaption: function() { 
       var caption = $(plugin.current).data('caption'); 
       if(!!caption && caption.length > 0) { 
        plugin.caption.fadeIn(); 
        $('p', plugin.caption).text(caption); 
       }else{ 
        plugin.caption.hide(); 
       } 
      }, 

第二行说：

var caption = $(plugin.current).data('caption'); 

这是将标题设置为data-caption字段中的任何文字。如果它说.data('title')，那么你会使用data-title = "my caption"

希望有帮助。