Using multiple jQuery versions with Shopify

Sometimes you install plugins, addons and tweaks to Shopify which use specific versions of jQuery. Sometimes this breaks every other script written in a theme. I’m writting this as a note to myself mostly but may help others.

A good example in my case is working on a theme which uses jquery 1.4.2 for most of the theme’s goodies.

If you try to install the latest, let’s say fancybox it may use a newer version. Instead of fixing every function in the existing theme which you should do but many people can’t afford, you can try this.
[code lang=”js”]
{{ ‘jquery-1.7.2.min.js’ | asset_url | script_tag }}

{{ ‘jquery.fancybox.css’ | asset_url | stylesheet_tag }}
{{ ‘jquery.fancybox.pack.js’ | asset_url | script_tag }}

{{ ‘jquery.fancybox-thumbs.css’ | asset_url | stylesheet_tag }}
{{ ‘jquery.fancybox-thumbs.js’ | asset_url | script_tag }}

<script type="text/javascript">

var jQuery_1_7_2 = $.noConflict(true); //open jquery 1.7.2 noconflict

(function($) { //wrap with a function

$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : ‘70%’,
height : ‘70%’,
autoSize : false,
closeClick : false,
openEffect : ‘none’,
closeEffect : ‘none’
});
});

})(jQuery_1_7_2); //close the jquery 1.7.2 wrapper function
</script>
[/code]

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest