发布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 相关文章推荐
js类的静态属性和实例属性的理解
Oct 01 Javascript
Javascript 面向对象 命名空间
May 13 Javascript
jQuery技巧总结
Jan 01 Javascript
100个不能错过的实用JS自定义函数
Mar 05 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 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
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
php pki加密技术(openssl)详解
2013/07/01 PHP
PHP字符串的连接的简单实例
2013/12/30 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
python实现外卖信息管理系统
2018/01/11 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
北大青鸟学生求职信
2013/09/24 职场文书
小学毕业家长寄语
2014/01/19 职场文书
房屋买卖协议书范本
2014/09/27 职场文书