JQuery Lightbox - 在当前页面打开大图!

December 23rd, 2008 at 11:17 pm

注意,不想看背后故事的童鞋请直接看后面的下载和截图。

昨天在这个游戏的主页,点击了那几张缩略图,发现打开了大图,想看其他图片还必须后退,再重新点击。真麻烦,对于一个超级大懒虫来说。

灵感来鸟。咋不试试 GreaseMonkey,弄个 lightbox 效果?关于 lightbox 可能大家都见过。就是点击一个缩略图,在当前页面以 AJAX 的形式打开大图的特效。就像这个 lightbox2

在 UserScript 搜索了下,还真找到一个 Greased Lightbox,还不错,可以幻灯片播放。可惜上一张下一张按钮竟然在右上角,或者只能用键盘翻页。而且没有 lightbox2 那些酷酷的动画。

昨天傍晚在 Chrome 开发版打开了 mozilla 的扩展页面,发现竟然有 lightbox 特效。以为是我今天更新了开发版,是 Chrome 自带的。告诉了 dofy,结果 dofy 一句“你没用别的浏览器试试啊,晕,一惊一咋的”。还真是 mozilla 自家的,不是 chrome。

dofy: 不过........ 这倒是个不错的想法
sfufoet: ff 还真有这样的猴子脚本。只是还不够完美

然后我就蛊惑了 dofy 写脚本。结果,他用 lightbox2 注入任意网页,失败了,所以他自己写了个。太粗糙了。此时时间接近半夜十二点鸟。

今天我不服气,想研究下 Greased Lightbox。在开始研究之前,灵感又来鸟。先看看 mozilla 是怎么做的,结果发现是用了一个 JQuery(JQuery 是一个 javascript 库,超赞) 扩展 JQuery Lightbox plugin。哦也,一看到它的语法:

$(function() {
    $('#gallery a').lightBox();
});

哇靠,简洁明了,帅呆了。然后就有了我写的第一版。由于我的 JQuery 菜鸟,后面我只提建议,Dofy 负责写代码。。。Dofy 还修理了 JQuery Lightbox plugin 增加了处理 404 的图片。

经过今晚的奋斗最后就有了这个神奇的 GreaseMonkey 脚本:JQuery Lightbox.user.js。

下载,下面两个任选:

JQuery Lightbox.user.js 所有外链的脚本文件都放在 Dropbox 的版本

JQuery Lightbox.user.js 所有外链的脚本文件都放在 Google Code 的版本(Google Code 竟然挂了。。没得选了。。)放个链接吧:gm-jquery-lightbox

效果截图:

没有安装脚本之前:

JQuery Lightbox - 在当前页面打开大图!|sfufoet's blog

安装后,看到那个 NEXT 按钮了吧?帅呆了~

JQuery Lightbox - 在当前页面打开大图!|sfufoet's blog

如果图片不存在就会:

JQuery Lightbox - 在当前页面打开大图!|sfufoet's blog

最后看看 GR 里的效果,目前滚动条 Dofy 还在折腾中,而且上一张下一张只针对当前正在看的文章,哦也!!

JQuery Lightbox - 在当前页面打开大图!|sfufoet's blog

反正只要一个链接是直接链接到一个图片地址的情况,Lightbox 就会起作用。哦也!也就是说,不管是缩略图链接到大图,还是“猛击这里看大图”。点击后,都可以在当前页面查看。
update: 而且会预加载下一张图哦!

这个 GreaseMonkey 脚本不用升级,所有的关键 js 都在 dropbox 里,那些关键 js 我们一旦更新就会上传。

21 Responses

  1. SF 我来了, 太曲折了, 眼泪哗哗的....

    Dofy - December 23rd, 2008 at 11:53 pm Notify
  2. 没沙发了。。。不过我是来测试图片的

    scavin - December 23rd, 2008 at 11:54 pm Notify
  3. 飘过

    maoz - December 23rd, 2008 at 11:56 pm Notify
  4. 火星人派发的沙发没领到...

    fisio - December 23rd, 2008 at 11:57 pm Notify
  5. 咦。。。好东西

    vern - December 24th, 2008 at 12:18 am Notify
  6. 滚动条问题和被搜索遮挡的问题已经解决(明天..额..今天白天传给sfufoet更新吧). google code 的css貌似用不了, 提示类型是 text/plain, 但不知为啥只 GR 里有这问题, 可能跟 html 定义有关系.
    总之: 睡觉去了.....

    Dofy - December 24th, 2008 at 1:35 am Notify
  7. 圣诞快乐...
    有米有非猴子版的...

    Enson - December 24th, 2008 at 8:05 am Notify
  8. @Enson: BS 不用猴子的!!@Dofy: 辛苦鸟。

    sfufoet - December 24th, 2008 at 8:12 am Notify
  9. 谢谢楼主 
    这正是我需要的

    寂寞的星空下 - December 24th, 2008 at 8:45 am Notify
  10. 脚本的资源还是本地比较好...
    安全些,可靠些

    fisio - December 24th, 2008 at 12:15 pm Notify
  11. @fisio: 已经怂恿 dofy 弄成 扩展了。

    sfufoet - December 24th, 2008 at 12:30 pm Notify
  12. 和这个扩展Grab and Drag冲突
    楼主改一下吧
    安完这个脚本后这个扩展就不好使了

    寂寞的星空下 - December 24th, 2008 at 5:11 pm Notify
  13. 还有个问题 如果图片过大超过屏幕的话 能不能自动缩小成合适大小

    寂寞的星空下 - December 24th, 2008 at 5:18 pm Notify
  14. [...] 在 plurk 和 google doc 里禁用了脚本 关于 Enson 说要我们弄成一个单独的扩展,要等 dofy 忙完。 关于寂寞的星空下说:“这个扩展 Grab and Drag 冲突。”还是要等 dofy 弄成一个单独的扩展比较保险点。话说,滚轮不是比这个拖拽滚屏插件更方便? 效果及截图看昨天的文章:JQuery Lightbox - 在当前页面打开大图! [...]

  15. 哇,超赞啊,太酷了

    tudou - December 25th, 2008 at 7:27 am Notify
  16. 我说sfufoet,用了NoScript你这个玩意就用不了,有没有解决办法啊?

    呃 - January 20th, 2009 at 9:22 am Notify
  17. @: NoScript 太麻烦了。我不用。你自己想办法吧。建议卸载 NoScript。

    sfufoet - January 20th, 2009 at 9:40 am Notify
  18. 贵脚本还和yetanothersmoothscrolling 冲突,表现为有的页面无法用鼠标滚轮滚动,郁闷了好久,发现是这个脚本的问题。
    测试页面(如果你要调试的话):http://www.bluemars.org/clipx/

    呃 - February 11th, 2009 at 2:27 pm Notify
  19. 不太好用了,lz放js的那个站点好像挂了哦

    不太好用了 - March 26th, 2009 at 10:53 am Notify
  20. @不太好用了: 是挂了。的确不是很好用。我也禁用了它。。。

    sfufoet - March 26th, 2009 at 11:43 am Notify
  21. 偶是把http://code.google.com/p/gm-jquery-lightbox/updates/list下面的jquery-1.2.6.pack.js等4个copy到本地的web服务器上使用的,hoho。。。

    -_- - April 8th, 2009 at 10:58 am Notify