发布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 相关文章推荐
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
微信JS接口大全
Aug 25 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
angularjs结合html5实现拖拽功能
Jun 25 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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
聊天室php&amp;mysql(一)
2006/10/09 PHP
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
php文本转图片自动换行的方法
2013/03/13 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
php中动态调用函数的方法
2015/03/16 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
Javascript 模式实例 观察者模式
2009/10/24 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
Python中扩展包的安装方法详解
2017/06/14 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
办公室个人总结
2015/02/28 职场文书
学术研讨会主持词
2015/07/04 职场文书
Oracle表空间与权限的深入讲解
2021/11/17 Oracle