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

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.

Thanks!
Yogi

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>

<script>
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>’;
jQuery(“#inlinecontent”).html(newcss);

}
}

</script>

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

any better solution will appreciated.
Thanks!
Yogi

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:
https://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Hope it helps!