FancyBox - Magnificpopup

[alex4orly]

I am trying to use this version of the Fancybox to load into it a html page,
But it seems - the setup arguments are ignored.

I have width:800, height:800, scrolling: 'n'

Which kind of works Fancybox, but not in this case

I consulted the documentation, but it shows an implementation on its own, not related to WWB

Any suggestions?

Thanks

[Pablo]

Magnificpopup does not support you to specify the width and height via options
For Magnificpopup, the size is controlled by CSS.

[alex4orly]

OK, so - can I control this somehow?
Do I need to go into the page AFTER publishing it and change the CSS by myself?

Thanks

[Pablo]

There is no need to edit it after publishing,
You can add custom code via the Page HTML or an HTML object.

You will only need to overwrite the things you want to change.

[alex4orly]

Sounds good, but an example will help
Thank you

[Pablo]

This depends on how you are using it.

[alex4orly]

Actually, Thinking that it is a responsive object, I would like it to adopt to the device / screen width.
RZ gave me actually an idea, that maybe I don't need it at all.

Please look here : https://squadron-125.org.il/thefigures.html

He suggested that I create an actual iFrame on the page itself underneath the 6 pictures, point each button click to the relevant PDF document and specify the target to be that iFrame. Try clicking the 4th (from the left) image button

The problems with this idea are:

1) Those 6 figures are just the start, there will be many more coming once I conclude what works, so where will the iFram be?
2) On page startup, the 2nd Layout grid with the iFrame in it is EMPTY, not nice

Can I have it somehow hidden and only coming up once one of the buttons is clicked. I would like it to popup in the middle of the screen

Thanks again

[alex4orly]

OK, I figured it out:

1) On page load, I triggered the event and hide the iFrame
2) On clicking a button, I show the iFrame and then call the window.reload(true)
3) It loads the PDF defined in the Link of that button

BUT - the iFrame cames in the area below the images, and that are will gradually be pushed down the page as I add more items.
I really need this to poup in the middle of the screen, so I am going back to the magnific laight box idea
How do I change the width through the CSS?

Thanks

[alex4orly]

OK, no need for the fancy box
1) I added a modal dialog
2) Inserted an iFrame into it
3) On page load, I am triggering the event and hiding the dialog
4) The button click - 5th from the left is:
5) Trigerring the click event - show the dialog and window.reload(true);
6) Works in Windows and on an old iPad

The remaining problems:
1) On the iPad, the Dialog is too wide in landscape, too narrow in portrait - tried different break points, but it is ignored
2) in Android, it wants me to download the pdf, not directly showing it...

Will continue digging