Slick Slider data-lazy missing first image, or all but first image.

[FriendDavid]

If you attach the slick-lightbox to a slick slider that has lazy loading enabled, you can't show either the first image, or you can show the first image but not any others. For example:

    <div class="slider">
        <div class="item"><img data-lazy="/path/to/image"></div>
    </div>
    <script>
        $(document).ready(function(){
            $('.slider').slick({lazyLoad: 'ondemand'})
            $('.slider').slickLightbox({
                src: 'data-lazy',
                itemSelector: '.item img'
            });
        });
    </script>

This will load all but the first image, as Slick has already changed the data-lazy attribute to a src attribute.

If I change slick-lightbox src option to 'src' it will only load the first image, as all the others have the url in the data-lazy attribute.

Is there a simple way to fix this?

[FriendDavid]

I figured out a blindingly obvious work around:

<div class="slider">
        <div class="item"><img data-lazy="/path/to/image" data-src="/path/to/image"></div>
    </div>
    <script>
        $(document).ready(function(){
            $('.slider').slick({lazyLoad: 'ondemand'})
            $('.slider').slickLightbox({
                src: 'data-src',
                itemSelector: '.item img'
            });
        });
    </script>

By adding and additional data-src attribute that is only for Slick-Lightbox, instead of piggybacking on the existing data-lazy, I sidestep the problem of data-lazy being change to src on the active image.