WordPress jquery setup for spritespin

Solution:


WordPress runs jQuery in “no-conflict” mode to prevent clashing with any plugin namespaces.

Try placing your script in a document.ready function, like so:

<script type='text/javascript'>
jQuery(document).ready(function($) {
   $("#mySpriteSpin").spritespin({
     source: [
     "<?php bloginfo('template_url')?>/sprite-images/rad_zoom_001.jpg",
     "<?php bloginfo('template_url')?>/sprite-images/rad_zoom_002.jpg",
     "<?php bloginfo('template_url')?>/sprite-images/rad_zoom_003.jpg",
   ],
     width   : 480,  // width in pixels of the window/frame
     height  : 327,  // height in pixels of the window/frame
  });

  $("#mySpriteSpin").spritespin({
   width : 480,
   height: 327,
   frames: frames.length,
   behavior: "drag", // "hold"
   module: "360",
   sense : -1,
   source: frames,
   animate : true,
   loop: true,
   frameWrap : true,
   frameStep : 1,
   frameTime : 60,
   enableCanvas : true
  });
});
</script>

You probably should reference the path to your images dynamically, in the event you migrate your site. Put the “sprite-images” folder inside your theme directory.