360ideas
316-269-6920
Get a Quote

Fixing fancybox2 fullscreen on ie8

Thursday, October 23 2014 4:10 PM
By Kalen Kubik
Fixing fancybox2 fullscreen on ie8

A website shouldn't suffer in functionality, simply because a client prefers a less-advanced browser. One of our clients needed fancybox2 to display fullscreen on newer browsers, but show the default style on ie8. ie8 couldn't handle the background:cover style needed for the fullscreen display and the image wouldn't display in the modal box.

To accomplish this ends, one of our wizard developers used conditional statements to class the HTML tag, should the conditional be triggered by IE9 or below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if lt IE 7 ]> <html class="ie6" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="" xmlns="http://www.w3.org/1999/xhtml"> <!--<![endif]-->
<head>

Then, they added code to the javascript initialization sequence to handle the triggered class.

<script>

$(function() {
var oldIE;
if ($('html').is('.ie6, .ie7, .ie8')) {
oldIE = true;
}

if(oldIE) {
$(".fancybox").fancybox();
} else {
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
padding : 0,
margin : 5,
nextEffect : 'fade',
prevEffect : 'none',
autoCenter : false,
afterLoad : function () {
$.extend(this, {
aspectRatio : false,
type : 'html',
width : '100%',
height : '100%',
content : '<div class="fancybox-image" style="background-image:url(' + this.href + '); background-size: cover; background-position:50% 50%;background-repeat:no-repeat;height:100%;width:100%;" /></div>'
});
}
});
}
});

$("#over").fancybox({
helpers : {
title : {
type : 'over'
}
}
});
</script>

Go out and Conquer

Share the love

Submit Your Comment