一般这类效果都已经有插件实现了,但毕竟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文件。
代码如下:
- <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js-global/FancyZoom.js"></script>
- <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();"> 即可实现最终效果。
点击下面的图片试试效果:
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/277.html