option - modal does not seem to work

[uudruid74]

I have tried setting modal: true, and modal: false, and it does not seem to make any difference. In firefox, the gallery is always shown in the enclosing DIV. In Chrome, it always shows the size of the entire viewport, and with other elements of my site over it. It refuses to be contained! This makes it almost impossible to use since the full-screen button is hidden under elements.

Is there some sort of option, similar to "modal" that would allow me to force it to open full-screen? I know others have asked for an option to have the gallery to come up opened. I still want to open from an icon, but would want to open it full-screen once the user opens it. This would probably solve the issue with Chrome. Ideally, the defaults would be to open full-screen on Chrome and on all mobile browsers, but if I have to detect this myself and set the option, that would be fine. Any chance at an auto-full-screen option?

[uudruid74]

I thought I would add more information. I'm not sure where the issue is at, but it has to do with Chrome and Firefox not quite inheriting things the same way. I added the following in my openPhotoSwipe function, but doing this will also stop rotation from working correctly and stop full-screen. I would have to reset both of these. Should I start hacking the javascript source, or is the layout of the site incorrect (in spite of the fact that it works great in Firefox, exactly how it should).

if (/chrome/i.test( navigator.userAgent )) {
var copyElement = document.getElementById('main-top');
pswpElement.style.height = copyElement.offsetHeight+"px";
pswpElement.style.width = copyElement.offsetWidth+"px";
pswpElement.style.margin = copyElement.offsetTop + "px " + copyElement.offsetLeft + "px";
}

[dimsemenov]

There is an example in FAQ on how to use modal option http://photoswipe.com/documentation/faq.html#inline-gallery

[uudruid74]

Yes, read it, and firefox and chrome are displaying things completely different. I added the above hack to force chrome to display like Firefox does, but this stops full-screen from working. I've got full-screen disabled if the chrome browser is detected until I can find something better

[dimsemenov]

• Can you repeat the issue in this example http://codepen.io/dimsemenov/pen/JogxWM ?
• On what platform do you test, and what's the firefox version?

[uudruid74]

I will see what I can do to reproduce the issue, but all your examples work fine and do not trigger this issue. It has something to do with div nesting and how each is sized or positioned. I don't use any fixed sizes, and this is why the hack I posted works - its assigning a fixed size to the pswp container. I'll play with it and see if I can discover something more specific.

[uudruid74]

OK. I have found a fix to make Chrome work. If I go to.the container in which I want the gallery displayed and add position: relative; then this fixes the problem with Chrome, but modal still does not change the display. I am getting two errors in js both saying an empty string has been passed to getElementById. Should the container have a specific ID?

[uudruid74]

Wait. Chrome obeys modal in my site, firefox keeps it penned in. I was able to recreate some of this mess by removing the fixed sizes on the codfish page. Firefox and Chrome seem to behave differently when you don't specify a size.

[uudruid74]

Last comment. It seems height is the adding factor and a percent isn't enough. It has to be fixed.