Tagged: , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 4, 2018 at 11:20 am #951536
    rikkeshansen

    Hi

    We have by many ways, tried to get the caption text to show on the image, beneath the image, or just somewhere, when an image is showed as lightbox/modal.

    We are using the accordion slider – where the text shows fine on the image, but when an image is clicked, the lightbox shows with the image, but no text.

    Are there a fix for this, or will it be patched? It’s a requirement, that the text you can add to a image, should also be visible when you view the image on the website, or atleast an option to show the text

    Thanks in advance,

    Kind Regards

    May 5, 2018 at 7:45 am #952044
    Rikard

    Hey rikkeshansen,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    May 5, 2018 at 9:41 am #952074
    Guenni007

    The lightbox shows the title tag of the image or what else is source of the lightbox link
    the function looks for a child that has that specific class and takes the pure text of it and set it as title.
    you can style it via : div .mfp-title
    try this in functions.php of your child-theme:

    function accordion_title_fix(){
?>
<script>
(function($){
    $(window).load(function() {
      $('a.aviaccordion-slide-link.lightbox-added').each(function(){
            var lin = $(this).find('.aviaccordion-title').text();
            $(this).attr('title',lin);
        });
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'accordion_title_fix');

    see here: https://webers-testseite.de/accordion/

    May 5, 2018 at 10:08 am #952076
    Guenni007

    by the way – wasn’t the caption text in former versions hided under the non overlayed part of the image ?

    May 7, 2018 at 12:40 pm #952662
    rikkeshansen

    Thanks for the provided, it works. But we need to show the text centered in the image, as the accordion does, is this doable?

    Regards

    May 7, 2018 at 5:46 pm #952783
    Guenni007

    … to show on the image, beneath the image, or just somewhere, when an image is showed as lightbox/modal.

    ?

    May 7, 2018 at 8:06 pm #952842
    rikkeshansen

    On the image, as I wrote above :-) Yes, we need to show the text centered, on the image, when the lightbox/modal is showed.

    Regards

    May 7, 2018 at 9:13 pm #952878
    Guenni007

    well the position is bad in that mfp-bottom-bar container.
    so if we do not want to have an edited magnific-popup-script

    we can shift the container with the title:

    add_action('wp_footer', 'move_title_script');
function move_title_script(){
?>
<script type="text/javascript">
(function($) {
    function a() {
      $('body').on('click', '.lightbox-added', function() {
        if($('.mfp-bg').length >= 1) {
          $("div.mfp-title").insertAfter("img.mfp-img");
        } 
      });
    }
  a(); 
})(jQuery);
</script>
<?php
}

    after that you had to style the title f.e.:

    div .mfp-title {
    font-size: 3vw !important;
    line-height: 4vw !important;
    position: absolute;
    top: 50%;
    left: 50%;
    width: inherit;
    text-shadow: 3px 3px 5px #000;
    transform: translate(-50% , -50%);
    padding: 20px !important;
    text-align: center;
}

    see link: https://webers-testseite.de/accordion/

    May 7, 2018 at 9:54 pm #952913
    Basilis

    Hi,

    Thank u for the input @Guenni007

    Best regards,
    Basilis

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