发布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控制listbox中项的移动并排序
Nov 12 Javascript
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
vue-cli设置css不生效的解决方法
Feb 07 Javascript
JavaScript实现班级抽签小程序
May 19 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
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
js jquery数组介绍
2012/07/15 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
学习python (2)
2006/10/31 Python
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
python中reload(module)的用法示例详解
2017/09/15 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
python 实现汉诺塔游戏
2020/11/28 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
COSETTE官网:奢华,每天
2020/03/22 全球购物
计算机网络专业推荐信
2013/11/24 职场文书
中学生团员自我评价分享
2013/12/07 职场文书
2014年创卫实施方案
2014/02/18 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
演讲比赛通讯稿
2015/07/18 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
PyQt5实现多张图片显示并滚动
2021/06/11 Python
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
MySQL创建管理LIST分区
2022/04/13 MySQL