发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载

更新时间：2007年07月21日 00:00:00 作者：

好多天没有发过日志了~
最近写了一个图片浏览器，是为PHPCMS文件管理器设计的，但后来看到了Lightbox，所以就改了一下，可以给一般的网页使用。

演示及说明地址:  http://longbill.cn/down/sample/blueshow/index.htm

使用方法:
1.下载 blueshow.js 文件，放到服务器上  你也可以直接使用这个: https://www.jb51.net/downtools/blueshow.js

2.在你要用此程序的网页中写上这句(在和之间):
<script src='http://yoursite/blueshow.js'></script>
http://yoursite/blueshow.js 为你放置程序的地址
3.程序可以使用参数比如 blueshow.js?lock=1&autorun=1
  //说明:
  //取值范围为0和1
  //lock:表示显示图片时是否锁定原网页
  //autorun: 是否自动初始化(如果你的网页含有一些比较慢的统计代码强烈建议将此值设置为0)
  //如果autorun=0那么请在网页的最后(统计代码之前)加上
<script>BlueShow();</script>

4.符合条件的图片包括:
  a.
<a href='fdsfa.jpg'>链接</a>
(指向图片的链接，包括gif,jpg,png,jpeg,bmp,等，具体见blueshow.js。如果图片是动态生成的，比如 img.php?id=3 那么在后面加上 "&.gif" 即可)
  b.
<img class='blueshow' src='xxx.gif' />
(class名中含有 "blueshow" 字符的img,如果img本来有class属性,那么再原来的class名后加空格再加"blueshow"即可)

复制代码代码如下:

<html> 
<head> 
<title>Blue Show v1.0 使用说明 -- By Longbill</title> 

<style> 
a { text-decoration:none; color:#ff3333; } 
.red { color:#ff3333} 
body {text-align:center;background-image:url(http://longbill.cn/down/sample/blueshow/images/gezi.gif)} 
div  {text-align:left;padding:8px;border:1px solid #4499ee;margin:5px;width:700px; 
font-size:12px;background-color:#d6e9fc;color:#333333;} 
img {margin:5px;} 
h1{color:#ff8c05;font-size:16px;display:block;margin:2px;padding:0px;} 
</style> 
</head> 
<body> 
<div style="font-size:24px;color:#3333ee;font-weight:bold;text-align:center;">Blue Show v1.0 <a style='font-size:12px;color:#ff8c05;font-weight:normal;text-decoration:none;' href='http://www.longbill.cn' target=_blank>By Longbill</a></div> 
<div> 
<h1>使用方法:  </h1> 
1.下载 blueshow.js 文件，放到服务器上 (<a href='http://longbill.cn/down/blog/blueshow.js' target=_blank>点击这里下载</a>) 你也可以直接使用这个: <span class=red>http://longbill.cn/down/blog/blueshow.js</span><br/> 
2.在你要用此程序的网页中写上这句(在&lt;body>和&lt;/body>之间):<br/> 
<span class=red>&lt;script language=javascript src='http://yoursite/blueshow.js'>&lt;/script></span>  http://yoursite/blueshow.js 为你放置程序的地址<br/> 
3.程序可以使用参数 比如  blueshow.js?lock=1&autorun=1<br/> 
&nbsp;&nbsp;//说明:<br/> 
&nbsp;&nbsp;//取值范围为0和1<br/> 
&nbsp;&nbsp;//lock:表示显示图片时是否锁定原网页<br/> 
&nbsp;&nbsp;//autorun: 是否自动初始化(如果你的网页含有一些比较慢的统计代码强烈建议将此值设置为0)<br/> 
&nbsp;&nbsp;//如果autorun=0那么请在网页的最后(统计代码之前)加上 <span class=red>&lt;script language=javascript>BlueShow();&lt;/script></span> 详情见本网页源代码<br/> 
4.符合条件的图片包括:<br/> 
&nbsp;&nbsp;a.<span class=red>&lt;a href=xxxxx.jpg>链接&lt;/a></span>(指向图片的链接，包括gif,jpg,png,jpeg,bmp,等，具体见blueshow.js。 如果图片是动态生成的，比如 img.php?id=3 那么在后面加上 "&.gif" 即可)<br/> 
&nbsp;&nbsp;b.<span class=red>&lt;img class="blueshow" src=图片地址 /></span> (class名中含有 "blueshow" 字符的img,如果img本来有class属性,那么再原来的class名后加空格再加"blueshow"即可)<br/> 
<br/> 
<a style='font-size:16px;color:#ff8c05' href='http://longbill.cn/blog/index.php?id=54' target=_blank>到这里讨论</a> 
</div> 
<div> 
链接样例:<br/> 
<a href='http://longbill.cn/down/sample/blueshow/images/boa01.jpg'>宝儿</a> 
<a href='http://longbill.cn/down/sample/blueshow/images/boa06.jpg' title='Boa!!!'>宝儿</a> 
<a href='http://longbill.cn/down/sample/blueshow/images/demo01.jpg'>PLMM</a> 
<a href='http://longbill.cn/down/sample/blueshow/images/meinv.jpg'>美女</a> 
<a href='http://longbill.cn/down/sample/blueshow/images/demo02.gif'>会动的人</a> 
</div> 

<div> 
图片样例:<br/> 
<img class="blueshow" src='http://www.google.com/logos/earthday05.gif' border=0 style='width:200px;' alt='Google' /> 
<img class="blueshow" src='http://www.google.com/logos/da_vinci.gif' border=0 style='width:200px;' alt='Google!!!!' /> 
<img class="blueshow" src='http://www.google.com/logos/van_gogh.gif' border=0 style='width:200px;' alt='Gooooooogle!!!!!' /> 
</div> 
<script src='http://longbill.cn/down/blog/blueshow.js?lock=1&autorun=0'></script> 
<script> 
document.write = function () { return false;} //不让统计代码显示东西 
BlueShow(); 
</script>

您可能感兴趣的文章:

JavaScript自定义超时API代码实例
这篇文章主要介绍了JavaScript自定义超时API代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-04-04
微信小程序使用uni-app开发小程序及部分功能实现详解
uni-app是一个使用Vue.js 开发所有前端应用的框架,下面这篇文章主要给大家介绍了关于微信小程序使用uni-app开发小程序及部分功能实现的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
JavaScript捕捉事件和阻止冒泡事件实例分析
这篇文章主要介绍了JavaScript捕捉事件和阻止冒泡事件,结合实例形式分析了冒泡的原理及javascript阻止冒泡的相关操作技巧,需要的朋友可以参考下
2018-08-08
JS小游戏之极速快跑源码详解
这篇文章主要介绍了JS小游戏之极速快跑源码详解,对游戏的主要流程及原理进行了较为详细的讲解,并附有完整实例源码,需要的朋友可以参考下
2014-09-09
妙用Bootstrap的 popover插件实现校验表单提示功能
最近使用bootstrap开发项目比较多，在表单校验功能中用popover插件实现出错提示功能很方面，下面小编给大家带来了一篇关于Bootstrap的 popover插件实现校验表单提示功能的实现代码，非常不错，感兴趣的朋友一起看看吧
2016-08-08
javascript中数组的concat()方法使用介绍
数组的concat()方法想必大家比不陌生吧，在本文为大家介绍下javascript中数组的concat()方法的具体使用，感兴趣的朋友可以参考下
2013-12-12
微信小程序动态修改页面数据及参数传递过程详解
这篇文章主要介绍了微信小程序动态修改页面数据及参数传递过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
three.js 利用uv和ThreeBSP制作一个快递柜功能
这篇文章主要介绍了three.js 利用uv和ThreeBSP制作一个快递柜,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-08-08
javascript面向对象之对象的深入理解
这篇文章主要介绍了javascript面向对象之对象的深入理解,将javascript面向对象程序设计中一切都视为对象,并以实例形式进一步分析了面向对象的特性,需要的朋友可以参考下
2015-01-01
layui type2 通过url给iframe子页面传值的例子
今天小编就为大家分享一篇layui type2 通过url给iframe子页面传值的例子，具有的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09