发布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 相关文章推荐
封装好的省市地区联动控件附下载
Aug 13 Javascript
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
javascript 日期时间函数(经典+完善+实用)
May 27 Javascript
jQuery html()等方法介绍
Nov 18 Javascript
jQuery中extend函数详解
Jul 13 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 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常用Stream函数集介绍
2013/06/24 PHP
PHP图片水印类的封装
2017/07/06 PHP
Javascript高级技巧分享
2014/02/25 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
使用python开发vim插件及心得分享
2014/11/04 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
Python3+Appium安装使用教程
2019/07/05 Python
python实现在函数图像上添加文字和标注的方法
2019/07/08 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
什么是继承
2013/12/07 面试题
团日活动策划书
2014/02/01 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
2016党员党章学习心得体会
2016/01/14 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python