Как включить подпись на веб-странице для галереи с помощью всплывающего окна?

Question

Я пытаюсь включить заголовок на фактическую веб-страницу под изображением при использовании всплывающей галереи magnificence. Использование заголовка div и класса или заголовка карусели, я не могу сделать это, если изображения в галерее не вертикально расположены по вертикали. Как я могу это сделать?

<a href="img/base/ggg.PNG" title="HELLO" class="chicken"> 
    <img src="img/base/pop.PNG" alt="remember your alt tag" /> 
</a> 

$(document).ready(function() { 
     $('.chicken').magnificPopup({ 
     type: 'image', 
     gallery:{enabled:true} 
     // other options here 
     // end each line (except the last) with a comma 
     }); 
    }); 

JS скрипку: https://jsfiddle.net/sb4btox7

Answer 1

Хорошо, посмотрите на это, я настроил ваша функция немного:

$(document).ready(function() { 
    $('.chicken').magnificPopup({ 
     type: 'image', 
     gallery: { 
      enabled: true 
     } 
    }).each(function() { // Here I chain a loop to each .chicken element 
     // Now we append the title inside the .chicken element 
     $(this).append('<div class="title">' + $(this).attr('title') + '</div>'); 
    }); 
}); 

CSS-:

.chicken { 
    display: inline-block; 
    width: 20%; 
    margin: 10px; 
} 

.chicken img { 
    width: 100%; /* set it to 100% of it's parents width */ 
    vertical-align: bottom; 
} 

.chicken .title { 
    text-align: center; 
} 

и вот DEMO.

Теперь вы можете просто добавить название непосредственно в HTML, как это:

<a href="http://placehold.it/350x250" title="The Title A" class="chicken"> 
    <img src="http://placehold.it/350x250" /> 
    <div class="title">The Title A</div> 
</a>