发布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 12 Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 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应用提速面面观
2006/10/09 PHP
php对gzip文件或者字符串解压实例参考
2008/07/25 PHP
php json转换成数组形式代码分享
2014/11/10 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
JavaScript Chart 插件整理
2010/06/18 Javascript
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
jQuery filter函数使用方法
2014/05/19 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
专业毕业生个性的自我评价
2013/10/03 职场文书
中文专业毕业生自荐信
2013/10/28 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
英语系毕业生求职信
2014/07/13 职场文书
合作协议书范文
2014/08/20 职场文书
大学生赌博检讨书
2014/09/22 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python