Support » Plugin: Easy FancyBox » [Plugin: Easy FancyBox] easy fancybox overlay on ipad issue

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author RavanH


    The issue seems related to your site and the fancybox stylesheet. It’s out of the scope of my plugin since I am not the developer of the fancybox script…

    However, the next release of this plugin will include fancyBox2, a complete new version or the script so that might just solve your issue 🙂

    Hi Ravan,

    I really appreciate if you point out the exact style/classes you think can create the probs so that we can do some r&d to make the video/overlay showes in center and overlay to full screen instead of sticking to left half of the screen.


    Plugin Author RavanH


    I really have no idea. I do not own an iPad to test with. You could try to start with a different position for #fancybox-overlay (currently absolute) or giving a (relative) positioning to the body…

    Hi Raven,

    Thanks for your reply.
    i have fixed the problem temporarly .. but i know its not proper solution.
    may be you can fine tune it if you like. below is the things i did and get 90% desired result.

    <———– put this code in the template ——–>

    <div id=”inlinecontent” style=”display: none”></div>

    function callit() {

    if(navigator.userAgent.indexOf(‘Mobile’) != -1)

    left = (screen.width )/3 ;
    newcss = ‘<style>#fancybox-wrap{left:230px!important;top:240px!important;}</style>’ + ‘<style> #fancybox-overlay {width:3000px;} </style>’;



    <———- Code End ————– >

    any better solution will appreciated.

    Hi there,
    I had the same problem, here is my solution:
    It seems that it is a viewport issue. HTML and BODY tags get the width of the viewport when the site opens in iphone/ipad. The fancybox overlay only extends to this size as width is set to 100%.
    When i set the viewport to the width of my website, the overlay spans over the whole layout.
    My viewport definition:
    <meta name="viewport" content="width=1040" />

    Watch out: This solution works fine for a non-responsive web design.

    Some infos about viewports:

    Hope it helps!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Plugin: Easy FancyBox] easy fancybox overlay on ipad issue’ is closed to new replies.