Using multiple jQuery versions with Shopify

Using multiple jQuery versions with Shopify
June 19, 2012 Steph

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]

0 Comments

Leave a reply

Sign up for Shopify and receive 10% off my services

Get Started!