HTML - Fancybox - Добавление текста под миниатюру изображения

Я использую код HTML для простой галереи изображений на своем веб-сайте из этой демонстрации: http://fancyapps.com/fancybox/demo/ Есть ли простой способ добавить текст под каждой миниатюрой, который будет отличаться от названия изображения (которое отображается после нажатия на миниатюру)?

Большое Вам спасибо.

РЕДАКТИРОВАТЬ: Спасибо за вашу помощь, но это было не совсем то, что я просил. Во всяком случае, мой друг решил это. И ссылка на изображение, и описание должны быть включены рядом друг с другом в один родительский элемент, например:

<div>
    <a ... ><img src="image link" alt="First picture" /></a>
    <p>Description</p>
</div>

Затем ширина div устанавливается равной ширине миниатюры изображения, в результате чего описание «опускается» ниже миниатюры.


javascript html jquery css fancybox
person ramedlav    schedule 08.11.2013    source источник
comment
Код для одиночного изображения выглядит следующим образом: ‹a class=fancybox href=1_b.jpg data-fancybox-group=gallery title=Lorem ipsum dolor sit amet›‹img src=1_s.jpg alt= /›‹/a› . После этого я пытался добавить теги ‹p› или ‹span› и расположить их ниже с помощью CSS, но это испортило структуру галереи — каждая миниатюра стала появляться на отдельной строке.   -  person ramedlav    schedule 08.11.2013

Ответы (2)


arrow_upward
1
arrow_downward

Вы пробовали использовать опцию inline? Так как это очень похоже на то, что вы хотите.

Кнопка ссылки

<a class="fancybox" href="#inline1" title="Lorem ipsum dolor sit amet">Inline</a>

Встроенный HTML-код

<div id="inline1" style="width:400px;display: none;">
  <p>Your Main image could be here</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque.</p>
</div>
person myh_stack    schedule 08.11.2013
comment
почти нормально - просто оставьте этот div #inline1 видимым и заверните его в скрытый div... теперь он работает - person webdev-dan; 24.04.2015

arrow_upward
0
arrow_downward

Вы можете обернуть текст внутри тега <p> и добавить немного CSS, чтобы исправить макет.

<a class="fancybox" href="1_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet">
    <img src="1_s.jpg" alt="">
    <p>some text</p>
</a>

CSS:

.fancybox {
    display: inline-block;
    vertical-align: top;
}
.fancybox img {
    display: block;
}
person matewka    schedule 08.11.2013
comment
Спасибо, но таким образом текст работает как ссылка на изображение. Я хочу, чтобы это было либо простое описание, либо ссылка где-то еще. - person ramedlav; 08.11.2013