-1

I am upgrading from Fancybox-2 to Fancybox-3. My site uses fancybox to display blocks of HTML as an overlay on page. For instance, if you click on my Terms and Conditions, fancybox uses a file fb/tandc.php that has all the HTML of the box to be displayed.

Some of the boxes use data from my database and use php programming to generate the HTML - for instance I have a list of participants retrieved from the database.

When planning the upgrade, I added a switch on my site that allows me to decide if I want to run version 2 or 3 of fancybox. In testing, many of the boxes display the same whether I use version 2 or 3 - in other words I have not changed the source code, only the way I call fancybox.

My problem is that for some reason, some boxes do not display the full content. When I have checked the page source, everything is there but I have noticed that some elements have style="display:none" defined. This is not coming from my code, so I assume fancybox is adding it.

My question, therefore, is how can I stop this?

I have tried to find answers but not successful. I did find a post that disabling AdBlocker in Chrome may help but this had no impact.

I get the same behaviour in Chrome and FF

I have included screenshots that show how the elements contain the style; the code used to call fancybox; the options I am using.

page debug elements

call to fancybox

options used

Just added this screenshot of code to be displayed. I tried adding a style that I hoped would override what fancybox is doing, but did not work either.

code to be displayed in fancybox

This is how the content looks in v2 fancybox

content in version 2

and if I have exactly the same content, but use v3 fancybox:

exactly same content in version 3

Izzysteve
  • 1
  • 1
  • That is just how it works and there is nothing wrong about that, because you use tools like this to display something when needed and then hide after closing the modal. Also, v2 and v3 are completely different. – Janis Jul 16 '19 at 11:53
  • Not sure I understand "nothing wrong about that" - it's adding a style that hides the element from displaying and I seem to have no control over that? Fancybox is opening and not displaying the content I want it to. – Izzysteve Jul 16 '19 at 12:54
  • But I still do not understand what is the issue. You use this tool to display hidden content and then hide after closing. And it does that perfectly. So,.. if you want to have it visible all the time, then why do you use fancybox? – Janis Jul 16 '19 at 16:56
  • Hi Janis, have you looked at my screenshots - 'content in version 2' and 'exactly same content in version 3'. The php file being called in each case is exactly the same. The difference is that fancybox 3 is adding style="display:none" to lots of the elements, and that is making most of the content hidden. Why is fancybox 3 adding the style attribute, because I don't want it to. If you visit https://illuceo.com and click T&C at bottom of page, you will see a live view of how things are currently with fb2. – Izzysteve Jul 16 '19 at 20:01
  • The overall design is this - I have a page that shows a list of surveys. Next to each survey is a button that allows the user to show the participants in the survey. When the button is clicked, a php file is launched that retrieves the participants from the database, builds the HTML and then displays it in fancybox. When they close fancybox, the list of surveys is still there on the original page. Does that help to understand? – Izzysteve Jul 16 '19 at 20:21

1 Answers1

0

Using ajax to load fancybox with content from a file seems to create elements where it inserts style="display:none" - I have no idea why. However, I figured a work around where instead I created inline content on the page that is hidden and then simply used data-src="#hiddenContent" as in the docs.

It's made my page huge though when I have a lot of surveys, with a lot of participants on each!

Izzysteve
  • 1
  • 1