Display the data-caption or figcaption.

[limakid]

Hi. I am trying to implement the baguetteBox for a photo gallery. If I want to display the captions only when is displayed the big image, how can I do it?
I saw the baguetteBox.css file and there is one class for the figcaption

#baguetteBox-overlay .full-image figcaption {
display: block;
position: absolute;
----AND SO ON....
}

But how is this related to the html elements? I tried styling the figcaption but nothing. Even foir the IDs we have to guess that they are applied for naming conventions but in the HTML doesn't say that in "that DIV" was applied some "id".
In the available templates, I don't see any "div#baguetteBox..."

Or first of all we have to apply these IDs # to the html tags?
I used "title" and "data-caption" and I get the "caption" but in the middle of the picture. And I have loaded all styles and JS of baguetteBox, including the jQuery and Bootstrap. Everything is working fine, except this issue of the caption.

So, if there is a figcaption declared... am I using it wrong maybe? Below is my code:

Bootstrap 3 Gallery

Grid Layout With Zoom Effect

    <div class="row mb-3">
        <div class="col col-sm-6 col-md-4 col-lg-2">
            <figure>
                <a class="lightbox" href="images/galeria/peru/picture1.jpg" title="Description of this picture"><img src="images/galeria/peru/picture1.jpg" alt="Park"> </a>
                    </figure>

//AND SO ON.....
SECOND OPTION OF THE LINK:

Description of this picture ----------------------------------------------------- Instead of "title", I've been using "data-caption" and also I am referencing to the same file for the big display picture as well as for the small thumbnail. I focused on this: #baguetteBox-overlay .full-image figcaption { display: block; position: absolute; bottom: 0; width: 100%; text-align: center; line-height: 1.8; white-space: normal; color: #ccc; background-color: #000; background-color: rgba(0, 0, 0, 0.6); font-family: sans-serif; }

But doesn't work.
Any ideas, please.

[giorov]

Hi, I first implemented this with the help of a CS professor. Maybe you could see how I implemented it and get yours to work. I didn't have to do anything special to get the captions to show up properly except for a couple additions to get them to start on the edge of the screen and have some padding.
i.e.
#baguetteBox-overlay .full-image figcaption {
left: 0;
padding: 1rem .5rem 1.5rem .5rem;
}

An example of a page from my portfolio site with a gallery that is set up for baguette box:

baguette box supported gallery page and css.zip

You can view this in action here:
https://giovanniroverso.com/g_gal.php