一般这类效果都已经有插件实现了,但毕竟wp 能不用插件就尽量不用。

这里需要从一个实现该效果的插件中提取其功能 然后用代码实现。这个插件就是 WP FancyZoom ,可以从本地share wp_plugins

中找到下载,也可以点击这里直接下载。

下载下来后,进入js-global 文件夹内,打开FancyZoom.js 这个脚本文件,

找到“/images-global/zoom/”这个地址,修改为“/wp-content/themes/XXX/images-global/zoom/'”

其中XXX是你的当下使用主题的文件夹名称。

然后,将该插件的 js-global 和 images-global 两个文件夹 上传到你服务器当前所使用的主题文件夹下。

上传好之后,接下来就是使用代码来引用里面的js文件。

代码如下:

  1. <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js-global/FancyZoom.js"></script>
  2. <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js-global/FancyZoomHTML.js"></script>

特别注意:复制以上代码 粘贴时注意 双引号和单引号有没有变成中文样式,如果有要改回来。

这段代码 放在主题文件的 header.php 和 foot.php 的 <body> 和 </body> 之间,实际上就是 </body>之前了。

最后一步,还要稍微改动一下 header.php 里面的 <body> ,将它改成 <body onLoad="setupZoom();"> 即可实现最终效果。

点击下面的图片试试效果:

2014-01-13_205824