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.