englishextra / iframe-lightbox Goto Github PK

Add configuration (during initialization) allowing to scroll in iframed site.

closing 'x' sign is not visible in latest Firefox 64.

There is too much comments. With this tool can by minified 26% more.

Increase z-index to 999999 because #wpadminbar z-index is 99999.

Hi
First great work man. I love this plugin for its simplicity and small size.
I have a feature request.
Can you add support for adding properties to data-src like html5 video, audio, and even img tags?
For example, i use this to open an html5 video:

HTML5 Video

The video opens with iframe-lightbox in a video tag.
That's great but I wish we can set some properties on the video tag itself.
Instead of:

I wish to add some properties like

Can this be achieved? If not please kindly add this feature. Also, it should be applicable to audio, img tags as well.

thanks

Add functionality to close lightbox by ESCape keyaboard button.

You can ignore this, I was confused about which class to use in my HTML. I can't delete it

I was adding the class iframe-lightbox to my element - which was blowing up badly, because I now understand, this is the class that you've reserved to create within the js

Now, in href atribute is javascript:void(0);. Allow to use real link and initialize lightbox different way. Exchange it with data-src.

Set 'z-index' css property for .iframe-lightbox class to 999. 2 is not enough (bug can be see in latest WordPress theme).

PS: There is also z-index: 2; in .iframe-lightbox .content-holder I didn't investigate this.

Add 'x' sign closing lightbox - users like to click on this and they expect this (older people are used to this).

It would be awesome if there was a way of listening to events

• when the iframe lightbox opens, when it closes
• when the video starts playing etc

It may be overkill for what you originally intended as it's a great little plugin already. But if it's something you've considered, it'd be a great addition.

Hi,
more then issue, this is ask for an advice. On mobile device, proportions of iframe are kept. How may I increase height of iframe (on mobile)? See picture.

I have already fix width for mobiles:

@media (max-width: 767px) {
    .iframe-lightbox .content-holder {
        width: 95%;
    }
}

Thank you.

It is possible to fix background when iframe is active? Now it moves when miss-clicked, scrolled or miss-toutch on mobile. See this video*.

• video was recorded in FF without today .css commits.

See this page. Background page scroll fix does not work there.

I was wanting to use this to embed some virtual tour / 3d model type things from various providers.

However, they all stack up tons of extra properties on the iframes that aren't part of the link.

Some examples:

    <iframe frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" 
            allow="autoplay; fullscreen; xr-spatial-tracking" 
            xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share 
            src="https://sketchfab.com/models/{{asset_id|raw}}/embed?autospin=1&autostart=1&ui_infos=0"> </iframe>

    <iframe src="{{asset_id|raw}}" width="100%" frameborder="0" style="border:0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

    <iframe width="100%" src="https://www.youtube-nocookie.com/embed/{{asset_id|raw}}?rel=0" title="YouTube video player" 
            frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
            allowfullscreen></iframe>

(The {{asset_id|raw}} tags are just how the Elementor Unlimited Elements widget passes properties through in my code)

I'm going to try embedding them using this anyway but I'm concerned that I cannot test all the features such as the xr-spatial-tracking, and I'm going to introduce hidden issues.

It would be nice to have some framework to pass this through, such as maybe any attributes on the link that start with data-frame-{anything} are added on as attributes to the iframe tag?

It opens the link. No pop-up is shown. See example

Reconsider renaming to 'IFLI' IFrame LIghtbox. I personally like it more, but current name has god SEO (I googled it when I was looking for 'iframe lightbox').

In README.md you can add that the script is also:

• request light - inlined svg right in css (only 2 additional request: 1. css + 1. js file)
• retina (high DPI screens) ready - uses svg instead png

Hi,

i want to creat a link with my own link and with a button to close the lightwindow.

There is any way to do it?

thanks