I'm trying to load a jQuery plugin, tinyCarousel, for use on the page. The jQuery library is included as follows in the layout.xml file:
<layout>
...
<default>
<reference name="head">
<action method="addJs" ifconfig="jquery/general/jqueryEnabled">
<script>jquery-1.10.1.min.js</script>
</action>
</reference>
</default>
...
</layout>
I've checked in the browser and the library is definitely present. Next, tinyCarousel.js is loaded from another layout.xml file:
<layout>
...
<default>
<reference name="head">
<action method="addJs">
<script>jquery.tinyCarousel.min.js</script>
</action>
</reference>
</default>
...
</layout>
Again, that script is present on the page and in the correct order (after the jQuery library). On the page, I am trying to call tinyCarousel as follows:
<script type="text/javascript">
//<![CDATA[
if (jQuery === 'undefined') {
jQuery.noConflict();
}
var container = <?php echo "'#" . $containerClass . "'"; ?>;
jQuery(document).ready(function(){
jQuery(container).tinycarousel({ interval: true, duration: 300, display: 1 });
});
//]]>
</script>
The error returned is:
Uncaught TypeError: Object [object Object] has no method 'tinycarousel'
Thanks for taking a look.
