Slider gallery descriptions?

I am building a website for a company that offers a lot of different products, so I need to build half a dozen pages with photo galleries. I wrote all the code for a gallery already so all I need to do is copy the HTML on each new page, and change the sources of the images.

However, I also need small descriptions or titles to appear below each picture. Now I could do it like this

if (iter === 36) {
        $('.product-title p').html('<p>Photo 36 description</p>');

However, considering I have 7 pages with galleries, and about 30 images per gallery, writing it manually like this, one by one, would make my code fucking enormous.

I am wondering is there a simpler way to add titles/descriptions below the gallery that change when the image changes?

Thanks in advance.

Solution

You can store image description using html attribute e.g. data-image-description="Photo 36 description".

With this approach you move hardcoded value from JS to HTML. Only think you need to do in JS is read data attribute and set the value where you want.