CODEWITHSUNDEEP
javascriptjqueryhtmlcssfancybox
ramedlav
ramedlav

Reputation: 1

HTML - Fancybox - Adding text below image thumbnail

I am using an HTML code for simple image gallery on my website from this demo: http://fancyapps.com/fancybox/demo/ Is there an easy way to add text below each thumbnail which would be different from the image title (which is displaying after clicking on a thumbnail)?

Thank you very much.

EDIT: Thanks for your help, but it was't quite what I asked. Anyway, my friend has solved it. Both image link and description must be included next to each other in one parent element, like this:

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

Then the width of the div is set to the width of the image thumbnail, causing the description to "drop" down below the thumbnail.

Upvotes: 0

Views: 6379

Answers (2)

myh_stack
myh_stack

Reputation: 35

Have you try using inline option? As it is quite similar to what you want.

Link Button

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

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

Upvotes: 1

matewka
matewka

Reputation: 10148

You can wrap the text inside the <p> tag and add some CSS to fix the layout

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

Upvotes: 0

Related Questions