Description/title below unopened fancybox images

Question

I have a fancybox gallery, I want to add a name below each image as description before it is opened. For some reason I can't figure this out. My code:

 <a class="fancybox" href="images/fb1.jpg" data-fancybox-group="gallery"               title="Automated Batching System"><img src="images/fb1_t.jpg" alt="Automated Batching System" class="imgrnd"  /></a>

If I try to add a paragraph or something below each image it forces the next image to a new line.

Your help would be welcome, thanks

Code is above. I have a gallery of 15 images, I want to add a description below each image that the visitor sees before he clicks on the image. — Deon Stander, Feb 13 '15 at 09:13

score -1 · Accepted Answer · edited May 23 '17 at 12:23

-1

Please elaborate with relevant code sample and, if possible, a jsfiddle to show what exactly it is that you want.

Edit: Please see this link as it gives a simple solution How to write a caption under an image?

In your case, just try to enclose each image inside a div, and set the 'float' css property to 'left'

<div>
<a class="fancybox" href="images/fb1.jpg" data-fancybox-group="gallery" title="Automated Batching System">
<figure>
<img src="images/fb1_t.jpg" alt="Automated Batching System" class="imgrnd"/>   
<figcaption>Some title</figcaption>
</figure>
</a>
</div>

<div>
<a class="fancybox" href="images/fb1.jpg" data-fancybox-group="gallery" title="Automated Batching System">

<figure>
<img src="images/fb1_t.jpg" alt="Automated Batching System" class="imgrnd"  />
<figcaption>some Title</figcaption>
</figure></a>
</div>

And your CSS property:

div
{
float:left;
}

Hope this helps

edited May 23 '17 at 12:23

Community

1
1

answered Feb 13 '15 at 09:09

user3655614

56
1
6

The answer is supposed to be an answer, What you gave is a comment, so please try to post them in comments. – void Feb 13 '15 at 09:11
My bad, I was trying to post a comment, but by mistake posted it as answer. – user3655614 Feb 13 '15 at 09:13
This works perfectly, thanks, but suddenly big spaces between images, css stayed the same. – Deon Stander Feb 13 '15 at 10:19
You can try to modify the padding and margin for the various tags involved, especially the figure tag, such as: figure { margin:5px; padding:5px; } – user3655614 Feb 13 '15 at 10:22
You're welcome :) Please mark this as answer if this satisfies your query. – user3655614 Feb 13 '15 at 10:50

Description/title below unopened fancybox images

1 Answers1