燈箱標題標題不起作用

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"

希望有幫助。