Lazy Loading modal windows, image in modal doesn't display

Question

I am trying to lazy load images that display when clicking on a css based modal window. I am using blazy library and the image in the modal window isn't displaying.

Troubleshooting:

1. I confirmed the images load regularly

2. I switched out img src for data-src as required from http://dinbror.dk/blog/blazy/?ref=demo-page

3. Added the b-lazy class to the image I want loaded on modal window open.

 <div id="modalwindow1" class="modalbox">

 <div>
 <a class="closewindow" href="#close">X - Close Window</a>
 <h2>Business Name - Zebra paint job car</h2>
 <div class="container">

<data-src="images/zebra-car.jpg" width="1080" height="607" alt="Zebra paint job car"  class="b-lazy">

 </div>

 </div>
 </div>
<script src="blazy.js"></script>
<script>
var bLazy = new Blazy({ 

        //container: '#container' // Default is window
    });
</script>

I have a live demo of the above at

http://lidia.kaptlid.com/template1.php

Answer 1

Your markup is missing the element name, img.

You have: <data-src="images/zebra-car.jpg" width="1080" height="607" alt="Zebra paint job car" class="b-lazy">

But you want: <img data-src="images/zebra-car.jpg" width="1080" height="607" alt="Zebra paint job car" class="b-lazy">

Answer 2

You can add the option "loadInvisible" when you call Blazy to force load invisible images: http://dinbror.dk/blog/blazy/#Options

Use it like this:

var bLazy = new Blazy({loadInvisible:true});

If that doesn't work, you may have to call Blazy when you open up the modal.

Good luck!