Question

在尝试为spritespin viewer插件实现一些jquery时，似乎正在碰壁。以下是我尝试过的步骤：

在我的functions.php文件的顶部添加wp_enqueue_script：

add_action('wp_enqueue_scripts', 'add_my_script'); function add_my_script() { wp_enqueue_script( 'spritespin.js', get_template_directory_uri(). '/js/spritespin.js', array('jquery') ); }

在我的页面中，我添加了一个div id和以下脚本：

<div id='mySpriteSpin'/> <script type='text/javascript'> $("#mySpriteSpin").spritespin({ source: [ "/wordpress/sprite-images/rad_zoom_001.jpg", "/wordpress/sprite-images/rad_zoom_002.jpg", "/wordpress/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>

以下是包含插件信息的官方网站：

http://spritespin.ginie.eu/howto.html

由于

Answer 1

Wordpress运行jQuery in＆＃34; no-conflict＆＃34;模式，以防止与任何插件名称空间冲突。

尝试将脚本放在document.ready函数中，如下所示：

<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>

如果您迁移网站，您可能应该动态地引用图片的路径。放上＆＃34;精灵图像＆＃34;主题目录中的文件夹。

spritespin的WordPress jquery设置

1 个答案: