CSS for lightbox

hey Rob – can you try this please on your functions.php of your child-theme:

function custom_lightbox_sc(){
?>
<script>
(function($){
    $(".ihf-main-image img").each(function() {
    var a = $('<a/>').attr('href', this.src);
    $(this).addClass('image').wrap(a);
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_lightbox_sc');

on enfold img on text block ( with different class it works). but there i don’t know how to take the biggest image in the srcset.
https://webers-testseite.de/images-in-text-block-elements/
maybe a mod could give a hint –
but try this first – on your example there is no srcset

what is in your source code and f.e. not in an iframe is adressable
iframe influence would be not possible

can you try this:

function custom_lightbox_sc(){
?>
<script>
(function($){
    $('.ihf-main-image img').each(function() {
    var a = $('<a/>').attr('href', this.data-ihf-main-source);
    $(this).addClass('image').wrap(a);
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_lightbox_sc');

• This reply was modified 6 years, 6 months ago by Guenni007.

well the caroussel script of that is in the head section
maybe the cracks here on board do see more that can be done.:
i guess i’m out now. – sorry

(function() {
    var a = function() {
        jQuery(".ihf-image-carousel:not([data-ihf-carousel-bound])").each(function() {
            var g = jQuery(this);
            g.attr("data-ihf-carousel-bound", true);
            var e = g.find("img");
            var b = function() {
                var l = g.data("bs.carousel");
                var k = 0;
                if (l) {
                    k = l.getActiveIndex()
                }
                f(k);
                c(k);
                c(k + 1);
                c(k - 1)
            };
            var f = function(k) {
                var l = e.length;
                var m = (k + 1) + " of " + l;
                g.find(".carousel-caption .badge").text(m);
                h()
            };
            var c = function(m) {
                if (m === -1) {
                    m = e.length - 1
                }
                var n = e.eq(m);
                if (!n.attr("src")) {
                    var l = n.attr("data-ihf-main-source");
                    var k = n.attr("data-ihf-alternate-source");
                    n.on("error", function() {
                        n.attr("src", k)
                    });
                    n.attr("src", l)
                }
            };
            var j = function(k) {
                if (typeof idx !== "undefined" && typeof idx.events !== "undefined") {
                    idx.events.publish(k, {
                        $element: g,
                        element: g.get()
                    })
                }
            };
            var h = function() {
                var k = g.attr("data-ihf-view-count");
                if (!k) {
                    k = 0
                }
                k = parseInt(k);
                g.attr("data-ihf-view-count", k + 1)
            };
            var d = function() {
                j("listing-image-carousel-next");
                g.carousel("next")
            };
            var i = function() {
                j("listing-image-carousel-previous");
                g.carousel("prev")
            };
            g.swipe({
                swipeLeft: function() {
                    d()
                },
                swipeRight: function() {
                    i()
                },
                threshold: 10
            });
            g.find(".carousel-control.right").on("click touchend", function(k) {
                d()
            });
            g.find(".carousel-control.left").on("click touchend", function() {
                i()
            });
            g.on("slid.bs.carousel", function() {
                j("listing-image-carousel-advance");
                b()
            });
            b()
        })
    };
    a();
    jQuery(document).on("ready", function() {
        a()
    })
})();

did you switch of modal of enfold?
Try this one her maybe it is something different on firefox javascript environment

it seem that the script with src works on my end – but in your environment it does not work:

if you take this surrounded container is set each image – with correct link – but with no lightbox effect

function custom_lightbox_sc(){
?>
<script>
(function($){
  $(document).ready(function(){  
    $(".ihf-main-image img").each(function() {
    var a = $('<a/ class="avia_image lightbox-added">').attr('href', $(".ihf-main-image img").attr('data-ihf-main-source'));
    $(this).addClass('avia_image').wrap(a);
  });
 });   
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_lightbox_sc');

no that is normal link opening – not the lightbox.

can you please try to place on the bottom of that page an enfold avia Image with lightbox link. Just to see if the images of your caroussel will go to that container. The mfp-container was not generated

By the way if you are using new 4.3.1 and have performance load only used elements – than this will be one reason for it.
Set it for that moment to alway load all elements.