使用代码给WordPress添加图片弹窗灯箱效果,多种效果,多种方法
前言
前几天在一个网站制作图片弹窗特效的时候,本来是使用的fancybox
的,结果确实失效的,好吧,然后换个方法,用Auto-highslide接管了,好吧,这个插件貌似好点,但是略肥,好了,下面直接开说。
文件部署
下载文章底部的文件,解压出来得到highslide
文件夹,把文件夹放到主题的根目录,里面只有一个css文件和javascript文件和几个图片文件,很小的说。
代码部署
将以下代码添加到主题函数文件functions.php
文件
//Auto-highslide图片灯箱 function addhighslideclass_replace ($content) { global $post; $pattern = "/<a(.*?)href=('|")([^>]*).(bmp|gif|jpeg|jpg|png)('|")(.*?)>(.*?)</a>/i"; $replacement = '<a$1href=$2$3.$4$5 class="highslide-image" onclick="return hs.expand(this);"$6>$7</a>'; $content = preg_replace($pattern, $replacement, $content); return $content; } add_filter('the_content', 'addhighslideclass_replace');
然后将以下代码添加到主题footer.php
文件
<script type="text/javascript"> jQuery(document).ready(function($) { hs.graphicsDir = "<?php bloginfo('template_url'); ?>/highslide/graphics/"; hs.outlineType = "rounded-white"; hs.dimmingOpacity = 0.8; hs.outlineWhileAnimating = true; hs.showCredits = false; hs.captionEval = "this.thumb.alt"; hs.numberPosition = "caption"; hs.align = "center"; hs.transitions = ["expand", "crossfade"]; hs.addSlideshow({ interval: 5000, repeat: true, useControls: true, fixedControls: "fit", overlayOptions: { opacity: 0.75, position: "bottom center", hideOnMouseOut: true } }); }); </script>
还没结束,我还需要调用样式和脚本文件,在footer.php
文件里面添加这段代码
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/highslide/highslide.js"></script>
然后再主题header.php
文件中head
之前添加这段代码
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/highslide/highslide.css" type="text/css">
后语
好了,目前fancybox代码版,插件有了,Auto-highslide插件有了,Auto-highslide代码也有了 😆 😆 😆
文件下载
-- 完 --
😳 测试下
看来我有必要强迫症一下,看看兼容性,如果好就把图片站的暗箱换掉
@幻杀博客 我正常的是使用fancybox,如果这个不行再用文章说的autohighslide
其实JS冲突很好解决,fancybox单独加载了一份jquery,不让他加载就行了