发布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的超简单上下翻
Apr 20 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
Jquery树插件zTree用法入门教程
Feb 17 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
js验证身份证号码记录的方法
Apr 26 Javascript
vue3中provide && inject的使用
Jul 01 Vue.js
用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
2020最新CPU的性能排名
2020/04/02 数码科技
php防止SQL注入详解及防范
2013/11/12 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
python sort、sorted高级排序技巧
2014/11/21 Python
基于Python os模块常用命令介绍
2017/11/03 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
详解python Todo清单实战
2018/11/01 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
大学生入党思想汇报
2014/01/14 职场文书
大学总结自我鉴定
2014/01/18 职场文书
给国外客户的邀请函
2014/01/30 职场文书
进步之星获奖感言
2014/02/22 职场文书
成绩单公证书
2014/04/10 职场文书
应急处置方案
2014/06/16 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书