su27出品:flashbox 0.1

前几天工作任务比较轻松,抽空写了这个。flashbox是一个js+flash的小程序,它可以将页面中指向图片的链接改为在本窗口中用一个浮在前面的层进行展示,效果还是比较华丽的。

看看demo就明白了,很简单。点击图片上面的prev next可以翻页,图片超过窗口大小的时候可以拖动,右键菜单可以保存图片和复制地址。

图1
图2

demo page

用法:

1.下载解压这两个文件:flashbox.js, flashbox.swf,在js的第一行写上swf的地址(最好写绝对地址,如果写相对,要写相对于页面而不是js的地址)。

2.在页面添加
<script src="flashbox.js" type="text/javascript"></script>
3.在任何一个连接到图片的a标签中加上rel=”flashbox”,例如
<a href="thebigpicture.jpg" title="显示的图片" rel="flashbox">点此观看大图</a>

支持的图片类型有jpg,gif,png。

下载:

flashbox(google code)

flashbox和lightbox

这个程序是对lightbox的flash式实现,相对而言有一些优势:flash的效果有更好的选择;处理速度比js更快;预加载更强大,可以在后台依次加载所有图片;体积小得多(只需要几k的flash和js,而lightbox需要的文件仅prototype库就有90k,一共需要3个js和1个css)。当然flash也有它自身的缺点:只有装了flashplayer8才能播放,以及不支持动画gif。不过幸好,flashplayer8的安装率几乎是100%,而大到需要单独展示的动画gif是很少存在的。

更新log:

ver 0.1, 2007.8.3

move to http://code.google.com/p/flashbox/, 2008.7.16

修正了页面卷动后的问题,2009.2.24

This entry was posted in Labs and tagged . Bookmark the permalink.
  • 小明

    抢楼!

  • flying

    二楼

  • 你们这些人不厚道。。3楼预征备用。

  • 炒菜机

    炒菜

  • Vincent

    效果不错,希望能给出 Greasemonkey 的 js 脚本 🙂

  • 嗯 这个idea不错,等我回来了研究一下。

  • pp啊,很不错滴~~~

  • 懒人

    恩,可以

  • 感觉Next按钮的位置不稳定,这样不是很好
    为何不弄成固定的Next按钮呢?

  • 嗯 主要是因为可能需要拖动,所以不能在图片范围内做next,不过可以考虑固定在屏幕两边。

  • ccll

    太感谢了老大!

  • su27

    其实还有点小bug,一直懒得改,真不好意思

  • 效果还是相当不错的,不过有几个问题:
    1. 用 iE7 浏览会出现点击链接后一直卡在 0% 的位置上,不知原因何故
    2. 打开图片后,如果这时候调整窗口大小,背景层不会随之缩放

  • su27

    多谢Sparanoid,我有空解决一下这几个问题。

  • edie

    请尝试:在场景上第一帧加多一空白帧

    flash本身一个奇怪的bug. 在浏览器打开的flash, 有时候无法读取到stage的值.

  • su27

    edie你说的可能是读某些值的时候需要一个延迟,我以前遇到过这个bug。

    我已经放到Google code,有兴趣的同学可以一起来做。