Home › Forums › WoodMart support forum › Add captions to product slider?

Add captions to product slider?

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • July 17, 2019 at 9:45 am #133112

    avenir
    Participant

    Hi I have set the image carousel on the product page to
    full width centred.

    I’m just wondering would it be possible to add captions to the images.
    I’m a developer so could use jquery or similar if you have any tips.

    Thanks

    July 17, 2019 at 10:19 am #133119

    avenir
    Participant

    Actually got it working myself

    jQuery:

    (function($){
    $(".woocommerce-product-gallery__image img").each(function() {
    var imageCaption = $(this).data('caption');
    if (imageCaption != '') {
        $("<span class='img-caption-mycaption'>" + imageCaption +
            "</span>").insertAfter(this);
    }
});
})(jQuery);

    CSS:

    .img-caption-mycaption {
    position: absolute;
    background: rgba(0,0,0,.5);
    bottom: 0;
    left: 2px;
    color: #fff;
    padding: 10px;
}
    July 17, 2019 at 2:00 pm #133167

    Elise Noromit
    Member

    Hello,

    Thank you very much for sharing the code I am sure it would be helpful as there is no option to show the capture on hover.

    Best Regards

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)