Fancybox on iPad/iPhone

Using the Fancybox script on the iPhone and iPad caused the overlay to not entirely fill the screen, which is an ugly problem!

Look for this line of code in the fancybox/jquery.fancybox-VER.js (not the packed file):

if (currentOpts.overlayShow) {
	overlay.css({
			'background-color' : currentOpts.overlayColor,
			'opacity' : currentOpts.overlayOpacity,
			'cursor' : currentOpts.hideOnOverlayClick ? 'pointer' : 'auto',
			'height' : $(document).height()
	});
}

Add a width property:

if (currentOpts.overlayShow) {
	overlay.css({
			'background-color' : currentOpts.overlayColor,
			'opacity' : currentOpts.overlayOpacity,
			'cursor' : currentOpts.hideOnOverlayClick ? 'pointer' : 'auto',
			'height' : $(document).height(),
			'width' : $(document).width()
	});
}

Also replace the viewport code to center the lightbox (the original code is commented):

_get_viewport = function() {
			/*return [
				$(window).width() - (currentOpts.margin * 2),
				$(window).height() - (currentOpts.margin * 2),
				$(document).scrollLeft() + currentOpts.margin,
				$(document).scrollTop() + currentOpts.margin
			];*/
			var uagent = navigator.userAgent.toLowerCase();
			if(uagent.search('ipad') &gt; -1 || uagent.search('iphone') &gt; -1 || uagent.search('ipod') &gt; -1 || uagent.search('android') &gt; -1) {
 
				var viewportwidth;
                var viewportheight;
 
                if (typeof window.innerWidth != 'undefined') {
                	viewportwidth = window.innerWidth;
                	viewportheight = window.innerHeight;
                } else if(typeof document.documentElement != 'undefined' &amp;&amp; typeof document.documentElement.clientWidth != 'undefined' &amp;&amp; document.documentElement.clientWidth != 0) {
                	viewportwidth = document.documentElement.clientWidth;
                	viewportheight = document.documentElement.clientHeight;
                } else {
                	viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
                	viewportheight = document.getElementsByTagName('body')[0].clientHeight;
                }
                return [
                	viewportwidth,
                	viewportheight,
                	$(document).scrollLeft(),
                	$(document).scrollTop()
                ];
            } else {
                return [
                	$(window).width() - (currentOpts.margin * 2),
					$(window).height() - (currentOpts.margin * 2),
					$(document).scrollLeft() + currentOpts.margin,
					$(document).scrollTop() + currentOpts.margin
                ];
            }
		},

Source

11 thoughts on “Fancybox on iPad/iPhone”

Thanks for that mate, you should send it to fancybox people to include it in next release.

Reply ↓

When I change the _get_viewport function, fancy box doesn’t load on either the PC or iPhone. Not sure what is going wrong, any ideas?

Reply ↓

Yea, I’m having the same problem too as Mark. The overlay works awesome, but I can’t seem to centre it.

Reply ↓

zarbrook on February 2, 2012 at 9:05 pm said:

To fix the IE issue you are having, remove the comment code and contents inside.

Make this:

_get_viewport = function() {
/*return [
$(window).width() - (currentOpts.margin * 2),
$(window).height() - (currentOpts.margin * 2),
$(document).scrollLeft() + currentOpts.margin,
$(document).scrollTop() + currentOpts.margin
];*/
var uagent = navigator.userAgent.toLowerCase();
…
this:

_get_viewport = function() {
var uagent = navigator.userAgent.toLowerCase();
…

Reply ↓

Hello,
You must change the HTML caracters :
“>” to >
and
“&&” to &&

Reply ↓

jenni on November 12, 2011 at 10:00 am said:

Unfortunately WordPress won’t let me fix that so all you copying the script will have to do that yourselves :)

Reply ↓

Awesome! Thank you so much!!!

Reply ↓

In addition to replacing the HTML special entities (> becomes > and & becomes &) You should also add in the margin options in the _get_viewport function:

return [
viewportwidth - (currentOpts.margin * 2),
viewportheight - (currentOpts.margin * 2),
$(document).scrollLeft() + currentOpts.margin,
$(document).scrollTop() + currentOpts.margin
];

Reply ↓