La légende du titre de la visionneuse ne fonctionne pas

Question

Je suis une vraie novice et j'essaie d'utiliser un modèle Web pour concevoir mon propre site Web. J'ai une galerie lightbox de base et tout fonctionne bien, mais peu importe ce que j'ai essayé, je ne peux pas obtenir une légende à afficher sur l'image de la galerie (pas la vignette).

C'est un extrait du code html avec un seul élément de la galerie:

<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> 

J'ai essayé d'utiliser title = « caption » au lieu de données title = « légende », mais pas de joie. Voici le css pour la lightbox:

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

des conseils/aide est la bienvenue. grâce

Answer 1

Besoin d'un code pour vérifier que je dirais, mais vous avez

.lightbox-caption { 
display: none; 
} 

Ce serait généralement cacher cette classe. Peut-être essayer et supprimer l'affichage: aucun ou changer pour bloquer ou en ligne etc?

Answer 2

La légende est en cours de chargement par l'attribut 'data-caption' dans votre balise d'ancrage.

Vos mots-clés d'ancrage regardent actuellement comme ceci:

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

Vous devez insérer la légende comme ceci:

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

Pour votre propre intérêt, si vous regardez le javascript dans les fichiers source vous verrez ces lignes:

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

La deuxième ligne dit:

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

Ceci définit la légende pour tout texte que vous avez dans le champ data-caption. Si elle a dit .data('title'), alors vous utiliseriez data-title = "my caption"

Espérons que cela aide.