发布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中使用.each()遍历元素学习笔记
Nov 08 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
快速处理vue渲染前的显示问题
Mar 05 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 Javascript
jquery实现简单每周轮换的日历
Sep 10 jQuery
用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
mysq GBKl乱码
2006/11/28 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
php中yii框架实例用法
2020/12/22 PHP
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
js Calender控件使用详解
2015/01/05 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
vue生命周期的探索
2019/04/03 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
python2.7安装图文教程
2018/03/13 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
Python 远程开关机的方法
2020/11/18 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
生物化工工艺专业应届生求职信
2013/10/08 职场文书
交通安全演讲稿
2014/01/07 职场文书
英语生日邀请函
2014/01/23 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis