2

I was wondering if there is a way to lazy load an iFrame in featherlight.js at runtime instead of declaring the iFrame in html? That way, the url to be loaded in the page can simply specified via the data attribute or the href attribute instead of having it an iFrame declaration. For instance, instead of declaring iFrame in my html file like this:

<a class="btn btn-default" href="#" data-featherlight="#fl3">iFrame</a>
 ....
<iframe class="lightbox" src="www.google.com" id="fl3" style="border:none;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" height="281" width="500"></iframe>

I would like to do something like this:

<a href="#" data-featherlight="www.xyz.com"></a>

I do realize that if replace the URL above with something ending in .html it works fine. I was thinking of writing another content filter for 'external' sites/contant..something along the lines below:

external: { 
            regex: /[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/,
            process: function(url) {

                var self = this,

                var $container = $("<iframe id='featherlight-iframe'/>");
                $container.attr('src', url);
                    ........


            }

        },

Not sure if that is the right approach though. Any help would be appreciated.

Thank you in advance.

MojoJojo
  • 3,897
  • 4
  • 28
  • 54

1 Answers1

1

Adding a content filter is a great way to go.

It turns out to be a bit harder to do correctly then it should (at least, if one wants to avoid loading the content twice), so I added the feature in Featherlight v1.2.

Marc-André Lafortune
  • 78,216
  • 16
  • 166
  • 166