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


Posted in Javascript onJuly 21, 2007

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

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

使用方法:  
1.下载 blueshow.js 文件,放到服务器上  你也可以直接使用这个: https://3water.com/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.在你要用此程序的网页中写上这句(在<body>和</body>之间):<br/> 
<span class=red><script language=javascript src='http://yoursite/blueshow.js'></script></span>  http://yoursite/blueshow.js 为你放置程序的地址<br/> 
3.程序可以使用参数 比如  blueshow.js?lock=1&autorun=1<br/> 
  //说明:<br/> 
  //取值范围为0和1<br/> 
  //lock:表示显示图片时是否锁定原网页<br/> 
  //autorun: 是否自动初始化(如果你的网页含有一些比较慢的统计代码强烈建议将此值设置为0)<br/> 
  //如果autorun=0那么请在网页的最后(统计代码之前)加上 <span class=red><script language=javascript>BlueShow();</script></span> 详情见本网页源代码<br/> 
4.符合条件的图片包括:<br/> 
  a.<span class=red><a href=xxxxx.jpg>链接</a></span>(指向图片的链接,包括gif,jpg,png,jpeg,bmp,等,具体见blueshow.js。 如果图片是动态生成的,比如 img.php?id=3 那么在后面加上 "&.gif" 即可)<br/> 
  b.<span class=red><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 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
textContent在Firefox下与innerText等效的属性
May 12 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
JavaScript也谈内存优化
Jun 06 Javascript
js网页右下角提示框实例
Oct 14 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
Oct 16 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
用javascript实现读取txt文档的脚本
Jul 20 #Javascript
符合W3C网页标准的iframe标签的使用方法
Jul 19 #Javascript
javascript实现unicode和字符的互相转换
Jul 18 #Javascript
js实现的网页颜色代码表全集
Jul 17 #Javascript
JTrackBar水平拖动效果
Jul 15 #Javascript
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 #Javascript
doctype后如何获得body.clientHeight的方法
Jul 11 #Javascript
You might like
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
python__new__内置静态方法使用解析
2020/01/07 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
Europcar比利时:租车
2019/08/26 全球购物
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
《小小竹排画中游》教学反思
2014/02/26 职场文书
经营管理策划方案
2014/05/22 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
授权收款委托书
2014/09/23 职场文书
婚前协议书标准版
2014/10/19 职场文书
工人先进事迹材料
2014/12/26 职场文书
违纪检讨书
2015/01/27 职场文书
python中pymysql包操作数据库方法
2022/04/19 Python