IS it possible to add text captions to the large images in my photo gallery

[P-James]

Hi, I was wondering if someone could give me a little help.

I am creating a website for a family member and am using a template (electrix) from w3layouts.com.
The issue I am having is that I am not sure if or how to have a text caption on the full size image.

Here is the HTML for a picture in the gallery

<div class="col-md-3 img-top ">
<a href="images/cat-1.png">
<img src="images/cat-1.png" class="img-responsive" alt="">
<div class="link-top">
</div>	
 </a>
</div>

So the “a href” image is the full size image and the image in the “img src” is the thumb size. I do know that I can place text in the div class="link-top" but it appears over the thumb image and not the large one.

I know I could use the alt tag but I want a constant view, not just on a mouse over, and also larger display.
One thing that has me confused is the large image is a (a href) link and the thumb image is a regular img src. I would think that it has to do with “jquery.flexslider.js” file and the way the gallery operates.

Currently the gallery only requires one size for the images and resizes it for the thumb page. I have made a second copy of each image and added a layer with the text caption on it, but I do have 100 + images and if they need to be changed or have a mistake… I have to go recreate the image in photoshop, so not the most user friendly way.

Also, the sight is not yet published as it is not complete. As soon as I sort out this issue, my wife will be switching it into French Canadian.

Any insight and help would be greatly appreciated.

[brandMatt]

I would throw a span with my caption in inside the anchor. Images of text are never a good idea for many reasons. The text cannot be manipulated with css, the text cannot be indexed by a search engine, the text cannot be translated as easily on the user's end (client side), the list goes on...

Does the gallery plugin you are using support captions?

[P-James]

Hi brandMatt,

I did try to put a span within the anchor, but no matter were I located the span, it only would appear on the thumb image and not the large one.

I guess that is what I need help to figure out.. the plugin used form this template is jQuery FlexSlider v2.1. I did go to the creators site and tried to find an answer there.. so far no luck.

[brandMatt]

If there is no documentation available from the author. You might want to look at finding a new plugin, or developing one yourself.

Ive ran into the same problem many times. I no longer use 3rd party plugins, I just build my own right out the gate. Things become obsolete much more quickly these days, we live in a disposable society.

[P-James]

Thanks brandMatt, Unfortunately I don't have the time nor the skill set to develop one myself as this is not what I do for a living.

Can anyone recommend a good free user friendly gallery plugin?