Tagged: 

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • January 16, 2019 at 4:08 pm #1054580
    lssu

    Hello!

    I am trying to add captions to the Horizontal Gallery to the center of each image, but I am not having very much success. I found a chunk of code from another forum post (https://kriesi.at/support/topic/adding-caption-to-each-slide-in-horizontal-gallery/), but I haven’t been able to get it to show the caption rather than the title. I need to add a few CSS features as well (such as a semi-transparent background to the text) but I can work through those issues on my own. I just need some help on getting the text to display properly. :)

    Thanks for any help you can provide!

    January 16, 2019 at 6:32 pm #1054637
    lssu

    Ah-ha! I think I’ve got it:

    function horizontal_gallery_subline(){
?>
<script>
(function($){
    $(window).load(function() { 
        $('.av-horizontal-gallery-link').css('bottom', '30px');        
        $('.av-horizontal-gallery-link').each(function(){
            var imgTitle = $(this).attr('title'); 
            $(this).after('<div style="width:580px;"><p class="text-under-image">' + imgTitle + '</p></div>');
            $(this).css({
                'padding-bottom' : '20px',
                'background-color' : 'transparent',				
            });
            $('.text-under-image').css({
                "text-align": "center",
                "margin": "-200px 0",
                "color": "#FFF",	
				"background" : "#003F87",
            });
        });
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'horizontal_gallery_subline');

    I had to adjust the margin (which moved the text), but then the text was all in one long line (which is why I added the div style). The final step was removing some whitespace that was causing the line of text problem:

    .av-horizontal-gallery-inner {
white-space: normal !important; 
}

    I think we are good to go now!

    January 17, 2019 at 10:38 pm #1055221
    Victoria

    Hi lssu,

    Great work!

    Glad you got it working for you and thank you for sharing your solution! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.