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="/bg#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
почти добре - просто оставете този #inline1 div видим и го обвийте в скрит div ... сега работи - person webdev-dan; 24.04.2015

arrow_upward
0
arrow_downward

Можете да обвиете текста в тага <p> и да добавите малко CSS, за да коригирате оформлението

<a class="fancybox" href="/bg1_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