I have a site that runs perfectly happily in v12 and which has my installation of Nivo Slider and Fancybox. The site was taken into v14 by the client and upgraded fine, the slider and fancybox worked in offline page preview but when uploaded to the server neither the slider nor fancybox would work. Firebug console showed
After the usual tearing of hair and rending of gaments and a very nice but unhelpful chat with support the problem was solved using javascript no-conflict.
This is how to do it:
Things like fancybox and nivo slider have initiating code like this:
Change it with the expression: "jQuery.noConflict();" like this: the 'j' replaces all the '$'.
This is great as it makes everything work but what is going on in v14 to cause conflict with such everyday javascript scripts such as these?
Thanks
TypeError: $(...).fancybox is not a function
TypeError: $(...).nivoSlider is not a function
This is how to do it:
Things like fancybox and nivo slider have initiating code like this:
Code:
<script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); //Default settings $.fn.nivoSlider.defaults = { effect: '<actinic:variable name="Transition" />', slices: <actinic:variable name="Slices" />, boxCols: <actinic:variable name="boxCols" />, boxRows: <actinic:variable name="boxRows" />, animSpeed: <actinic:variable name="animSpeed" />, pauseTime: <actinic:variable name="pauseTime" />, startSlide: <actinic:variable name="startSlide" />, directionNav: <actinic:variable name="directionNav" />, controlNav: <actinic:variable name="controlNav" />, controlNavThumbs: <actinic:variable name="controlNavThumbs" />, pauseOnHover: <actinic:variable name="pauseOnHover" />, manualAdvance: <actinic:variable name="manualAdvance" />, prevText: '<actinic:variable name="prevText" />', nextText: '<actinic:variable name="nextText" />', randomStart: <actinic:variable name="randomStart" />, beforeChange: function(){}, afterChange: function(){}, slideshowEnd: function(){}, lastSlide: function(){}, afterLoad: function(){} }; </script>
Code:
<script type="text/javascript"> var j = jQuery.noConflict(); j(window).load(function() { j('#slider').nivoSlider(); }); //Default settings j.fn.nivoSlider.defaults = { effect: '<actinic:variable name="Transition" />', slices: <actinic:variable name="Slices" />, boxCols: <actinic:variable name="boxCols" />, boxRows: <actinic:variable name="boxRows" />, animSpeed: <actinic:variable name="animSpeed" />, pauseTime: <actinic:variable name="pauseTime" />, startSlide: <actinic:variable name="startSlide" />, directionNav: <actinic:variable name="directionNav" />, controlNav: <actinic:variable name="controlNav" />, controlNavThumbs: <actinic:variable name="controlNavThumbs" />, pauseOnHover: <actinic:variable name="pauseOnHover" />, manualAdvance: <actinic:variable name="manualAdvance" />, prevText: '<actinic:variable name="prevText" />', nextText: '<actinic:variable name="nextText" />', randomStart: <actinic:variable name="randomStart" />, beforeChange: function(){}, afterChange: function(){}, slideshowEnd: function(){}, lastSlide: function(){}, afterLoad: function(){} }; </script>
Thanks
Comment