Category Archives: HTML/CSS/JavaScript/jQuery

Fancybox on iPad/iPhone

Posted on by
11

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') > -1 || uagent.search('iphone') > -1 || uagent.search('ipod') > -1 || uagent.search('android') > -1) {
 
				var viewportwidth;
                var viewportheight;
 
                if (typeof window.innerWidth != 'undefined') {
                	viewportwidth = window.innerWidth;
                	viewportheight = window.innerHeight;
                } else if(typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && 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