Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 22, 2018 at 9:55 am #1013016
    Guenni007

    there was a title fix for image galleries which works great – and i want now transform that to horizontal Gallery. – So that on having the lightbox image shown underneath is the alt Attribut shown instead of image title.

    So I varied the known code a little.

    

function horizontal_gallery_title_fix(){
?>
<script>
(function($){
    $(window).load(function() {
      $('img.av-horizontal-gallery-img').each(function(){
            var lin = $(this).attr('alt');
            $(this).attr('title',lin);
        });
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'horizontal_gallery_title_fix');

    i see that it works in source code – the code replaces the image title with the alt attribut. – But on Lightbox there will be shown original image title instead. Don’t know why?

    September 22, 2018 at 10:35 am #1013023
    Guenni007

    is there a way to style the horizontal gallery a bit nicer on small screens?

    edit : i did it by showing the horizontal gallery only on screens larger than 768px
    on screens smaler there will be a masonry instead.

    September 22, 2018 at 1:49 pm #1013056
    Dude

    Hey!

    i see that it works in source code – the code replaces the image title with the alt attribut. – But on Lightbox there will be shown original image title instead. Don’t know why?

    As far as I know the lightbox script pulls the title from the link (a href element) if a title attribute is set. The code can be found in enfold\js\avia-snippet-lightbox.js around line 43+

    
  var title = item.el.attr('title');
  if(!title) title = item.el.find('img').attr('title');

    Thus you can either remove the title attribute from the lightbox link or (probably the better solution) you simply add the image title/alt attribute as link title. You can use a code like

    
      $('img.av-horizontal-gallery-img').each(function(){
            var lin = $(this).attr('alt');
            $(this).attr('title',lin);
            $(this).next('.av-horizontal-gallery-link').attr('title',lin);
        });

    Best regards,
    Peter

    September 23, 2018 at 7:18 am #1013223
    Guenni007

    it works in so far all ok. But i wonder why the last line is neccessary:
    This works on gallery as i often use it :

    function gallery_title_fix(){
?>
<script>
(function($){
    $(window).load(function() {
      $('.lightbox-added img').each(function(){
            var lin = $(this).attr('alt');
            $(this).attr('title',lin);
        });
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'gallery_title_fix');

    why this line:
    $(this).next('.av-horizontal-gallery-link').attr('title',lin);

    did the trick and on gallery this is not needed?
    Anyway it runs now.

    September 23, 2018 at 7:37 am #1013225
    Guenni007

    ok – now i see : the image that goes to the lightbox is on that case the image on av-horizontal-gallery-link

    so it might only need to change the title on that :

    $('img.av-horizontal-gallery-img').each(function(){
            var lin = $(this).attr('alt');           
            $(this).next('.av-horizontal-gallery-link').attr('title',lin);
        });

    this line $(this).attr('title',lin); is obsolete – and only for hovering the highlighted horizontal gallery image needed
    thanks

    September 23, 2018 at 7:43 am #1013227
    Dude

    Hi!
    Glad you found the right code :)

    Regards,
    Peter

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