Easy FancyBox
easy fancybox overlay on ipad issue (6 posts)

  1. doug63
    Posted 4 years ago #

    hi - this plugin is awesome. but When I see the overlays on an ipad, the background screen only fills half the screen, and the overlay image is very small. will this be fixed or corrected in the next version?

    Many thanks!!



  2. RavanH
    Plugin Author

    Posted 4 years ago #

    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 :)

  3. boss1980in
    Posted 3 years ago #

    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.


  4. RavanH
    Plugin Author

    Posted 3 years ago #

    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...

  5. boss1980in
    Posted 3 years ago #

    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.

  6. parabolika
    Posted 3 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic