Enhancement request - Improve support for running inside an iFrame

[CCCullens]

Hi

Today when running inside an iFrame, lightGallery fills the iFrame window area with the gallery. This does not work well when the iFrame is "larger" than the parent window. For example:
window.innerHeight = 10000px <-- the iFrame
window.parent.innerHeight = 1200px <-- the browser window

Result - lightGallery will create a 10000px tall gallery area
Result - when I specify a gallery height of 1200px, a gallery is created down about 4000px that is 1200px.

Both lead to a poor user experience since the photo to display is not visible (until you scroll down).

Currently, I'm trying to work around it by setting the iFrame height to the window.parent height before opening the gallery. Then in onCloseAfter.lg restoring the iFrame height back to the original height. However, lightGallery is no longer responsive to the user changing the height of the browser window.

Any suggestions on how to make lightGallery work better in iFrames?

Thanks,
CCC

[sachinchoolur]

Do you have a demo where I can reproduce the issue?

You can set iframe width and height using iframeHeight and iframeWidth settings respectively https://www.lightgalleryjs.com/docs/settings/#iframeHeight

Also, to set the correct height and width when the lightGallery container is resized you can use the lgContainerResize event and modify values - https://www.lightgalleryjs.com/docs/events/#lgContainerResize

[CCCullens]

I'm trying to use LG inside of an iFrame. Not displaying an iFrame inside of LG. I've worked out 95% of the UX for now. Key was to get all resize events using window.parent.addEventListener('resize',. I use iframe-resizer when LG is not up. LG is doing what it should by filling the 'window', the problem is the 'window' is a very large iframe (in my test data 11,000px. Thus, I have to fool LG into thinking the 'window' size is the size of the parent window. I'm not sure there is anything generic that LG can do. Mark this as closed and as I get a better example I'll reach out to you. Now I'm wondering if I put what I'm doing in an LG plugin it might be reusable. I have 3 mini-apps (WordPress plugins) that I need this functionality in. On why I'm using an iFrame - I'm using Bootstrap and it is conflicting with the page native CSS and causing parent page formatting issues. I'd rather find a way to put Bootstrap CSS in a namespace than hide Bootstrap inside an iFrame, but I have not found a way to wrap a namespace around Bootstrap.