非常好用的 Highslide JS ，完全可以代替 lightbox

最新推荐文章于 2016-12-13 11:10:56 发布

dreamboycx

最新推荐文章于 2016-12-13 11:10:56 发布

阅读量3.1k

点赞数

分类专栏：前端设计

本文链接：https://blog.csdn.net/dreamboycx/article/details/10593895

版权

前端设计专栏收录该内容

121 篇文章 1 订阅

订阅专栏

主页：

http://highslide.com/

实例：

http://highslide.com/index.htm

自定义下载：

http://highslide.com/editor/

文档

http://highslide.com/ref/

图表

http://www.highcharts.com/demo/

附上一个小技巧：

     Js代码   
     
   
 <script type="text/javascript">  
     hs.graphicsDir = 'highslide/graphics/';  
     hs.showCredits = false;  
 </script>   

通过设置showCredits 的属性可以控制 gallery左上角是否出现 “powered by highslide js” 的超链接，当然，您也可以直接在highslide.js 文件中直接修改它的值。

注意：

1、配置文件属性graphicsDir：此配置文件夹不知道干啥用的但是必须填写，否则将不能显示大图，特别注意"/"不要漏掉，否则也无法生效

2、Highslide具有多个文件，有的是功能比较齐全，有的功能相对少一些，所以如果配置不能生效，查看引用的Highlide是否支持，最好的情况是

引用highslide-full.js但文件相对较大，比如要点击后的图片居中，加上

hs.align = 'center';

发现并没有居中，原来引用的是highslide.js文件，而不是highslide-with-gallery.js或者highslide-full.js文件，如果一个页面中有的居中，有的不居中，可使用此方式

οnclick="return hs.htmlExpand(this,{'align':'center'})"

3、highslide的源文件尽量不要修改，需要改的地方可以在当前页面配置，比如：悬浮鼠标显示的文字就可以在当前页面配置：

hs.lang.restoreTitle = "点击左键关闭，按住左键拖动，键盘方向键来显示上一张与下一张";

如果改的多或者这样

	hs.lang={
		loadingText : '加载中...',
		loadingTitle : '点击关闭',
		focusTitle : 'Click to bring to front',
		fullExpandTitle : 'Expand to actual size (f)',
		creditsText : 'Powered by <i>Highslide JS</i>',
		creditsTitle : '点击回到highslide主页',//当然，这个我们是不会让它出现的
		restoreTitle : '点击左键关闭，按住左键拖动，键盘方向键来显示上一张与下一张'
	}

4、hideslide插件不仅能使图片弹出效果，而且也可以使HTML一样有效果

5、给图片加文字

<div class="highslide-caption">文字文字</div>

6、最好要引入highslide自己的CSS，有很多class都在JS中使用了，如果自己定义，改起来非常麻烦，如果和自己的CSS有冲突了，先考虑改自己写的CSS文件

更多示例：点击下载

示例一：

     Html代码   
     
   
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
   
 <title>Highslide JS - Custom Example</title>  
   
 <script type="text/javascript" src="highslide/highslide.js"></script>  
 <link rel="stylesheet" type="text/css" href="highslide/highslide.css" />  
 <!--[if lt IE 7]>  
 <link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css" />  
 <![endif]-->  
   
 <script type="text/javascript">  
 hs.graphicsDir = 'highslide/graphics/';  
 hs.outlineType = 'custom';  
 hs.captionEval = 'this.a.title';  
 </script>  
   
 </head>  
 <body>  
 <h3>Single image</h3>  
 <div style="text-align: justify">  
   
     <a href="highslide/sample-images/full-image.jpg" class="highslide" onclick="return hs.expand(this)"  
               
             title="Caption from the anchor's title attribute" style="float:right; margin: 0 0 10px 15px">  
         <img src="highslide/sample-images/thumbnail.jpg"  alt=""  
             style="width: 107px;height:120px;" />  
     </a>  
   
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  
     Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu  
     fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa  
     qui officia deserunt mollit anim id est laborum.</p>  
 </div>  
   
 </body>  
 </html>  

示例二：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Highslide JS</title>

<!--
	1 ) Reference to the files containing the JavaScript and CSS.
	These files must be located on your server.
-->

<script type="text/javascript" src="../highslide/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />

<!--
	2) Optionally override the settings defined at the top
	of the highslide.js file. The parameter hs.graphicsDir is important!
-->

<script type="text/javascript">
hs.graphicsDir = '../highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'glossy-dark';
hs.wrapperClassName = 'dark';
hs.fadeInOut = true;
//hs.dimmingOpacity = 0.75;

// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
	//slideshowGroup: 'group1',
	interval: 5000,
	repeat: false,
	useControls: true,
	fixedControls: 'fit',
	overlayOptions: {
		opacity: .6,
		position: 'bottom center',
		hideOnMouseOut: true
	}
});

</script>


</head>

<body>

<!--
	3) Put the thumbnails inside a div for styling
-->
<div class="highslide-gallery">

<!--
	4) This is how you mark up the thumbnail image with an anchor tag around it.
	The anchor's href attribute defines the URL of the full-size image.
-->
<a href="../images/gallery1.jpg" class="highslide" οnclick="return hs.expand(this)">
	<img src="../images/gallery1.thumb.jpg" alt="Highslide JS"
		title="Click to enlarge" />
</a>

<!--
	5 (optional). This is how you mark up the caption. The correct class name is important.
-->

<div class="highslide-caption">
	Caption for the first image. This caption can be styled using CSS.
</div>


<!-- Repetionion of the above -->
<a href="../images/gallery2.jpg" class="highslide" οnclick="return hs.expand(this)">
	<img src="../images/gallery2.thumb.jpg" alt="Highslide JS"
		title="Click to enlarge" /></a>

<div class="highslide-caption">
	Caption for the second image.
</div>

<a href="../images/gallery3.jpg" class="highslide" οnclick="return hs.expand(this)">
	<img src="../images/gallery3.thumb.jpg" alt="Highslide JS"
		title="Click to enlarge" /></a>

<div class="highslide-caption">
	Caption for the third image.
</div>

</div>
</body>
</html>

示例三：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="highslide-full.js"></script>
<link rel="stylesheet" href="highslide.css" />
<script type="text/javascript">
	hs.graphicsDir = 'graphics/';
	hs.showCredits = false;
	hs.lang={
		loadingText : '加载中...',
		loadingTitle : '点击关闭',
		focusTitle : 'Click to bring to front',
		fullExpandTitle : 'Expand to actual size (f)',
		creditsText : 'Powered by <i>Highslide JS</i>',
		creditsTitle : 'Go to the Highslide JS homepage',
		restoreTitle : '点击左键关闭，按住左键拖动，键盘方向键来显示上一张与下一张'
	}
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header';
hs.fadeInOut = true;
//hs.dimmingOpacity = 0.75;

// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
	//slideshowGroup: 'group1',
	interval: 5000,
	repeat: false,
	useControls: true,
	fixedControls: 'fit',
	overlayOptions: {
		opacity: .6,
		position: 'bottom center',
		hideOnMouseOut: true
	}
});

</script>
</head>

<body>
	<!--{第一张图片}-->
	<a href="aa.jpg"  οnclick="return hs.expand(this)" ><img src="logo.png" alt=""/></a>
	<div class="highslide-caption">
		第一张图片
	</div>

	<!--{第二张图片}-->
	<a href="full-image.jpg" class="highslide" οnclick="return hs.expand(this)">
	<img src="thumbnail.jpg" alt="Highslide JS"
		title="Click to enlarge" height="120" width="107" /></a>		
	<div class="highslide-caption">
 		第二张图片
	</div>

<!--{第一个HTML模块}-->
<a href="index.htm" οnclick="return hs.htmlExpand(this)">
	Open HTML-content
</a>
<div class="highslide-maincontent">
	<h3>Lorem ipsum</h3>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dapibus leo quis nisl. In lectus. Vivamus consectetuer pede in nisl. Mauris cursus pretium mauris. Suspendisse condimentum mi ac tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. Donec mollis, mi at tincidunt vehicula, nisl mi luctus risus, quis scelerisque arcu nibh ac nisi. Sed risus. Curabitur urna. Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque nonummy pretium tellus.
</div>
<br>

<!--{第二个HTML模块}-->
<a href="#" οnclick="return hs.htmlExpand(this)">
	描述描述
</a>
<div class="highslide-maincontent">
	<h3>Lorem ipsum</h3>
	注意：
1、配置文件属性graphicsDir：此配置文件夹不知道干啥用的但是必须填写，否则将不能显示大图，特别注意"/"不要漏掉，否则也无法生效
2、Highslide具有多个文件，有的是功能比较齐全，有的功能相对少一些，所以如果配置不能生效，查看引用的Highlide是否支持，最好的情况是
引用highslide-full.js但文件相对较大，比如要点击后的图片居中，加上
</div>
</body>
</html>