Trigger Lazy Load function when modal opens

Question

I am using a lazy load function that works on all my images except those inside modals.

I need to trigger the unveiling when a Bootstrap modal with the class .modal_image_container is opened.

I am trying to incorporate the lazyload function into the show.bs.modal event. Currently it only unveils the image on the first modal clicked.

lazy load function (not my code)

(function($) {

  $.fn.unveil = function(threshold, callback) {

    var $w = $(window),
        th = threshold || 0,
        retina = window.devicePixelRatio > 1,
        attrib = retina? "data-src-retina" : "data-src",
        images = this,
        loaded;

    this.one("unveil", function() {
      var source = this.getAttribute(attrib);
      source = source || this.getAttribute("data-src");
      if (source) {
        this.setAttribute("src", source);
        if (typeof callback === "function") callback.call(this);
      }
    });

    function unveil() {
      var inview = images.filter(function() {
        var $e = $(this);
        if ($e.is(":hidden")) return;

        var wt = $w.scrollTop(),
            wb = wt + $w.height(),
            et = $e.offset().top,
            eb = et + $e.height();

        return eb >= wt - th && et <= wb + th;
      });

      loaded = inview.trigger("unveil");
      images = images.not(loaded);
    }

    $w.on("scroll.unveil resize.unveil lookup.unveil", unveil);

    unveil();

    return this;

  };

})(window.jQuery || window.Zepto);

calling the lazy load function

$(document).ready(function lazyload() {
    $("img.lazy").unveil(300, function() {
      $(this).load(function() {
        this.style.opacity = 1;
      });
    });

});

My attempt at adapting it to fire on modal open

$('[data-toggle="modal"]').on('show.bs.modal', function() {

        $("img.lazy").unveil(0,function() {

            console.log('test 1');

            $(this).load(function() {
                this.style.opacity = 1;
                });
            });
        });

One of three of the modals, same class names, diff id's (obviously).

<!-- MODAL Image Item 1 Pic 1 -->
<div id="140image" class="modal product_images_modal fade" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg modal_image_container">
        <div class="modal-content">

            <!-- Modal Header-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">Close</span></button>
            </div>

            <!-- Product Modal Body --> 
            <div class="modal-body" data-dismiss="modal">

                <h2 class="modal-title heading">Title</h2>

                <img class="product_image_modal center-block lazy" src="/assets/images/products/blank_625.gif" data-src="/assets/images/products/140_900.jpg" alt="Large image of 140 litre Polypropylene Soakwell">
            </div>

            <!-- Modal Footer-->
            <div class="modal-footer">
                <button type="button" class="btn btn-default close" aria-label="Close" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>

and finally the trigger that opens the modal on click

<!-- item image -->
            <img class="product_image lazy" data-toggle="modal" data-target="#140image" src="/assets/images/products/200.gif " alt="Geofabric" data-src="assets/images/products/600.jpg">

Can anyone assist in pointing me in the right direction? Thanks.

Answer 1

try this one

$('.modal_image_container').on('shown.bs.modal', function() {
  $(this).find("img.lazy").unveil(0, function() {
    console.log('test 1');
    $(this).load(function() {
      this.style.opacity = 1;
    });
  });
});