Highslide JS 是一个开源的Javascript 软件，它提供以Web 2.0 方式弹出窗口的效果。它简化了在网页上弹出缩略图和HTML 代码片断的做法，不存在被浏览器拦截的问题，也无需使用任何插件。弹出的内容在当前浏览器窗口中，用户还可以在保留当前弹出内容的情况下继续滚动网页而不需要关闭它。具有良好的兼容性和可访问性，当用户禁用了Javascript 或是在Javascrip 失效的情况下，浏览器会重定向到图片本身或事先指定的HTML页。

Highslide是一个非常美观的图片展示插件，和LightBox这种图片插件相比，highslide的体积更加小巧（你得手动把不用的css代码去掉，css文件里面有说明）。在wordpress中使用highslide，你可以通过选择各种现成的wordpress插件来方便的开启图片灯箱效果。在wordpress后台的“添加新插件”栏目，搜索关键词“highslide”即可。

在线演示：http://demo.jb51.net/js/2020/highslide/index.htm

但是和大多数灯箱效果一样，highslide只能为下面这种格式的图片加上效果

<a href="url_to_real_size_img" class="highslide"><img src="url_to_small_img" /></a>

首先，你需要把下载回来的highslide目录放到js文件夹下（可以从官方网站http://highslide.com/下载）。

然后新建一个php文件，我把这个文件放在了模板根目录下面的mods（自己新建的文件夹）中，命名为highslide.php。接着在模板根目录下的functions.php里引入刚刚创建的php脚本文件:

核心代码

/** * Name: Highslide JS * Version: 5.0.0 (2016-05-24) * Config: default * Author: Torstein Hønsi * Support: pat)) { var last = document.styleSheets[document.styleSheets.length - 1]; if (typeof(last.addRule) == "object") last.addRule(sel, dec); } else { style.appendChild(document.createTextNode(sel + " {" + dec + "}")); } } function fix(prop) { return 'expression( ( ( ignoreMe = document.documentElement.'+ prop + ' ? document.documentElement.'+ prop +' : document.body.'+ prop +' ) ) + \'px\' );'; } if (hs.expandCursor) addRule ('.highslide img', 'cursor: url('+ hs.graphicsDir + hs.expandCursor +'), pointer !important;'); }});hs.addEventListener(window, 'resize', function() { hs.getPageSize();});hs.addEventListener(document, 'mousemove', function(e) { hs.mouse = { x: e.clientX, y: e.clientY };});hs.addEventListener(document, 'mousedown', hs.mouseClickHandler);hs.addEventListener(document, 'mouseup', hs.mouseClickHandler);hs.addEventListener(document, 'ready', hs.getAnchors);hs.addEventListener(window, 'load', hs.preloadImages);}

调用方法 结合了jquery做了一些图片路径的判断

jQuery(document).ready(function($) { $(".post_content img").each(function(i) { _self = $(this); if (!this.parentNode.href) { imgsrc = ""; if (_self.attr("data-original")) { imgsrc = _self.attr("data-original"); } else { imgsrc = _self.attr("src"); } $(this).wrap("<a href='" + imgsrc + "' onclick='return hs.expand(this);'></a>"); } }); hs.graphicsDir = "/skin/highslide/"; 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 } });});

到此这篇关于Highslide.js是一款基于js实现的网页中图片展示插件的文章就介绍到这了,更多相关Highslide.js图片预览内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！