Last active
August 29, 2015 14:07
-
-
Save interactivellama/0dc154936df44e73846f to your computer and use it in GitHub Desktop.
Parts of JS execution path with Modernizer tests and poly-fills
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* This gist shows the guts of using Modernizr to test device/browser feature | |
support. It then loads in two poiy-fills, if needed and create functions that | |
trigger different user interfaces when matching certain media queries. These | |
trigger just like CSS class changes and not just on page load. | |
If on a small screen, load a carousel. If on a larger screen, load the | |
non-touch enabled jqzoom plugin to allow mouse zoom. These events fire | |
on orientation change and many other device changes. | |
Generally, this is for support of IE7, IE8, and possibily IE9, and is | |
non functioning as is. | |
*/ | |
// START HERE and test need for matchMedia polyfill | |
Modernizr.load([{ | |
test: window.matchMedia, | |
nope: '/assets/js/vendor/RespondMore-master/media.match.min.js', | |
complete: function() { | |
Main.testMediaQueries(); | |
} | |
}]); | |
// once you've added the media match polyfill or not (hopefully), | |
// see if you need the media query polyfill | |
testMediaQueries: function() { | |
// Test need for CSS media query polyfill | |
Modernizr.load([{ | |
test: Modernizr.mq('only all'), | |
nope: '/assets/js/vendor/RespondMore-master/js/respond.min.js', | |
complete: function() { | |
Main.loadEnquire(); | |
} | |
}]); | |
} | |
// now we know we have media match and media query support, load enquire.js | |
// then initialize the UI | |
loadEnquire: function() { | |
Modernizr.load({ | |
load: [ | |
'/assets/js/vendor/enquire.js-master/dist/enquire.js' | |
], | |
complete: function() { | |
// get the main show on the road! | |
initProductGalleryZoom(); | |
} | |
}); | |
} | |
initProductGalleryZoom: function(initIsTrue) { | |
"use strict"; | |
var $bxslider; | |
if (initIsTrue) { | |
// init desktop only UI | |
var zoomInstance = $('.mainimagelink').jqzoom({ | |
zoomType: 'innerzoom', | |
preloadImages: true, | |
zoomWidth: 768, | |
zoomHeight: 497, | |
showEffect: 'fadein', | |
hideEffect: 'fadeout' | |
}); | |
} else { | |
// we are on a small screen | |
// init mobile only UI | |
$('#thumblist').bxSlider({ | |
minSlides: 3, | |
maxSlides: 5, | |
slideWidth: 120, | |
infiniteLoop: false, | |
hideControlOnEnd: true, | |
pause: 2000, | |
speed: 1000, | |
autoHover: true, | |
auto: false, | |
mode: 'horizontal', | |
pager: false | |
}); | |
} | |
}, | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment