发布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 相关文章推荐
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
javascript针对DOM的应用分析(二)
Apr 15 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
JS简单随机数生成方法
Sep 05 Javascript
Bootstrap源码解读网格系统(3)
Dec 22 Javascript
vue2.0多条件搜索组件使用详解
Mar 26 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 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中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
php利用反射实现插件机制的方法
2015/03/14 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
Python笔记(叁)继续学习
2012/10/24 Python
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
python多线程抓取天涯帖子内容示例
2014/04/03 Python
Python中列表的一些基本操作知识汇总
2015/05/20 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
简单实现Python爬取网络图片
2018/04/01 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
python使用turtle绘制分形树
2018/06/22 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
python实现滑雪者小游戏
2020/02/22 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
python将unicode和str互相转化的实现
2020/05/11 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
python 实用工具状态机transitions
2020/11/21 Python
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
如何查找和删除数据库中的重复数据
2014/11/05 面试题
大专应届毕业生求职信
2014/07/15 职场文书
小组口号霸气押韵
2015/12/24 职场文书