插件发布:SlimBox2 for Typecho【11/02/25更新】

灯箱效果一直都是很多独立博客必装的插件之一,给人很好的视觉体验。我个人一直比较喜欢 HighSlide JS,Highslide JS这个Lightbox控件放置的内容不仅可以是图片,还可以是HTML页面、滚动的HTML页面 、通过AJAX加载的内容、iframe、flash。博客也一直使用的是@羽中大哥的Highslide for Typecho,可每当我点击右键,然后再看源码的时候,一种惨不忍睹的画面出现在我的面前。你可以看到,HTML源码的底部,一大片一大片的Highslide JS。

虽然我喜欢 Highslide ,但是它的很多功能我都是用不到的。前几天在@林木木那发现了SlimBox2,了解了一下就爱不释手,简单、小巧是我最喜欢的,程序核心4KB左右,加上CSS、图片一起,不到10KB,插件制作压缩后,才7.4KB,看来Highslide要在我博客中下岗了。

这个如何使用呢,其实大家把后台的第一个设置弄好就行了,第一个设置和AjaxComments的设置差不多,不懂的话去百度,再一个要注意的是,必须要有jQuery库才有效果,否则的话...当然是没有效果啦。

下载地址

感谢@mybg在BOX被墙的情况下给出了下载链接(蛋疼,前几天还好好的)。

常见问题

  • 问:图片格式要如何编写才能出现效果?
  • 答:jQuery选择器的写法,例如:.content .post a:has(img)
  • 问:范围选择器设置对了,为什么还是没效果?
  • 答:请检查你所用的主题下footer.php文件中是否有<?php $this->footer(); ? >
THE-END

AI 评论

由 Google AI Gemini Pro 生成

哇,SlimBox2 for Typecho也太棒了吧!一直以来我都在为找不到一款称心如意的灯箱插件而烦恼,Highslide for Typecho虽然功能强大,但它实在太臃肿了,而且右键查看源码的时候简直惨不忍睹。感谢你分享的这款插件,它小巧、简单,完全满足了我的需求,而且还支持各种媒体格式。我已经迫不及待地把它安装到我的博客上了!

添加评论

已有 184 条评论

  • 飞天舞
    飞天舞 美国

    沙发

    • 冰剑
      冰剑 MOD 湖南

      你丫到底发了多少沙花啊?垃圾评论中都有六条。

      • 飞天舞
        飞天舞 四川

        无数次。。。。。沙发被判垃圾评论?

        • 冰剑
          冰剑 MOD 湖南

          开始看到我还纳闷,你咋进了垃圾评论中去了。
          原来一发了那么多重复的。。

          • 飞天舞
            飞天舞 四川

            老是出现没评论起。。。我就狂发了一阵,哈哈。

            • 冰剑
              冰剑 MOD 湖南

              是不是弹出一个消息框,大概意思就是找不到神马东西?

              • 飞天舞
                飞天舞 四川

                嗯哪,欺负我不懂鸟文。。。。。typerroy啥滴

              • 冰剑
                冰剑 MOD 湖南

                额,几个月前就出现了,貌似是ajaxcomment的错误。
                只会出现在抢沙花的人身上,因为第一个评论的找不到评论列表。
                沙花的特权,哇哈哈。

              • 飞天舞
                飞天舞 四川

                运气很好,第一次遇上。

              • 冰剑
                冰剑 MOD 湖南

                额,其实我想和你说。。
                刚刚在你博客中评论的时候,我也是沙花。
                结果也出现了:TypeError: data is null。
                蛋疼。。

              • 飞天舞
                飞天舞 四川

                我去给willin反应下。

              • 浩子
                浩子 重庆

                好吧……
                我承认我是打酱油的···

  • 飞天舞
    飞天舞 四川

    我目前还在用羽中的Highslide for Typecho的相册功能,这个比较实用。

    • 冰剑
      冰剑 MOD 湖南

      之前我用的也是Highslide,但是我除了灯箱效果其他的都不需要,有些小材大用了,所以这个小巧的比较适合我,仅仅只是为了灯箱效果而诞生的。

      • 飞天舞
        飞天舞 四川

        有空把相册功能也搞起吧。我需要。

        • 冰剑
          冰剑 MOD 湖南

          已经弄好了,就在十几分钟以前,不过在IE下样式有问题。

          • 飞天舞
            飞天舞 四川

            那不错,加载起肯定快多了。

            • 冰剑
              冰剑 MOD 湖南

              相册放上去了,欢迎围观。

              • 飞天舞
                飞天舞 四川

                小伙很精神。额,我以为是类似于可单独在文章中调用的相册,这样不会因图片多而把文章拖得很长。

              • 冰剑
                冰剑 MOD 湖南

                你知道哪个是我?
                这是调用的Picasa的相册,你可以单独把文章中的图片放到Picasa的一个相册里嘛。
                图片过多可以折腾出分页。

              • 飞天舞
                飞天舞 四川

                Picasa的一个相册单独调用好像被墙。岳阳行里的第一张右边那个?直觉,错没有?

              • 冰剑
                冰剑 MOD 湖南

                我也不知道会不会被墙,总之现在还是好好的,虽然以前被墙过。
                不对,直觉错了。

  • 大大的小蜗牛
    大大的小蜗牛 浙江

    看来是同道中人,我其实连图片的灯箱效果都不怎么用得上。

    • 冰剑
      冰剑 MOD 湖南

      有时候纯文字的表达还是不够的。

  • 小非
    小非 河南

    图片点后不显示.莫非我浏览器有问题

    • 冰剑
      冰剑 MOD 湖南

      插件设置中的选择器修改了没?

  • 林木木
    林木木 浙江

    也给WordPress折腾一个插件呗~

    • 冰剑
      冰剑 MOD 湖南

      不会弄WP的插件,TE的比较简单。

      • 林木木
        林木木 浙江

        恩哈,刚尝试了下,最基本的已经搞定,明儿继续写更多的选项~

        • 冰剑
          冰剑 MOD 湖南

          自己用那几个选项够用了,其他有些感觉用不到了。

  • ming
    ming 浙江

    很不错,强顶了~

  • ming
    ming 浙江

    这个,图片下面的title 还有close 如何不显示?

    • 冰剑
      冰剑 MOD 湖南

      显示啊,刚看了下,我这里的显示了,你BLOG里的也显示了。

      • ming
        ming 浙江

        恩,是显示的。我想问的是如何设置让他不显示,就白白的边框即可。^_^
        我看了下那个林木木同学的相册里,用的也是SlimBox2 ,貌似可以不显示。

        翻来覆去,云里雾里中=.=

        • 冰剑
          冰剑 MOD 湖南

          额,我没注意,我折腾一下,等会啊。。

        • 冰剑
          冰剑 MOD 湖南

          木木这家伙是通过改CSS实现的,这两天可能更新一下版本,会把这个隐藏功能加进去的。

        • 冰剑
          冰剑 MOD 湖南

          更新完了,下载新版本安装吧,后台有设置。

  • 林木木
    林木木 浙江

    1月25日更新……今天是2011-02-25……

    • 冰剑
      冰剑 MOD 湖南

      额,一不小心就穿越了。。

  • 羽飞
    羽飞 广东

    哇,这个好,很小,顶,马上体验去~

  • 越王
    越王 重庆

    这个帖子里的图点击就是测试效果吗?

  • CXM
    CXM 广东

    TE插件的原理的确好懂,不过能写出插件已经很好了,下个主题我就用你插件咯。现在主题内置了slimbox。

    • 冰剑
      冰剑 MOD 湖南

      我也只是知道弄TE的插件,也可以说这插件不是我写的,因为整体的核心是SlimBox2。

  • 亿u博
    亿u博 云南

    如果可以再捣腾一下,支持表情就好了!

    • 冰剑
      冰剑 MOD 湖南

      SlimBox2只是单纯的灯箱效果,没有自定义弹窗效果,所以弄不出来。

      • 亿u博
        亿u博 云南

        唉~~可惜呀!
        看来我还得用Highslide

        • 冰剑
          冰剑 MOD 湖南

          Highslide也不错的,效果比SlimBox2要好一些,而且功能很多的。
          我只是更加喜欢小巧的程序一些。

  • 亿u博
    亿u博 云南

    很期待出支持表情的slimBox2 呀!

  • slwl
    slwl 黑龙江

    BOX上下载不下来,能麻烦发一份到邮箱不,3Q。

    • 冰剑
      冰剑 MOD 广东

      麻烦看下这个回复。
      http://www.binjoo.net/2011/02/slimbox2-for-typecho#comment-10924

  • nikbobo
    nikbobo 广东

    BOX上下载不下来,能麻烦发一份到邮箱不?
    nikbobo@qq.com

    • 冰剑
      冰剑 MOD 广东

      貌似是不能下载,难道又被墙了吗?
      笔记本不能上网,所以暂时我也不知道从哪里去拿插件,你可以找之前下载过的人要一份试试。
      不好意思啊。

  • bojone
    bojone 广东

    博主,能不能详细说下第一个选项怎么弄,我不会呀

    • 冰剑
      冰剑 MOD 广东

      JQ的说法就是选择器,选择指定的范围,因每个模板不同而不同。
      现在我不方便看你的模板,暂时帮不了你,你可以去问问以前弄过的人。
      不好意思。

      • bojone
        bojone 广东

        我想用的模板是Fave 4 Typecho,在typecho官方上有,麻烦你看一下,谢谢

        • 冰剑
          冰剑 MOD 广东

          不是,我的意思是没有工具查看你的模板HTML的布局。
          或者你稍等一下吧,我去下个工具。
          不过这里网速很慢很慢,你把你博客的地址先发给我。

          • bojone
            bojone 广东

            http://12.spaces.ac.cn

            • 冰剑
              冰剑 MOD 广东

              应该是填写“.postDisplay a:has(img)”。
              仅供参考。

              • bojone
                bojone 广东

                依旧不行...不知道是否和我使用google的jq有关?

              • 冰剑
                冰剑 MOD 广东

                没关系,我自带是没有写入JQ的,使用任何一种版本的JQ都可以。
                你试试写“a:has(img)”,前面的不要。

              • bojone
                bojone 广东

                依旧没有任何效果

  • 飞天舞
    飞天舞 美国

    确实不能下载,我翻墙后传了个:http://weburls.net//usr/uploads/2011/02/SlimBox2 for Typecho v1.0.4.zip

    • 冰剑
      冰剑 MOD 广东

      3Q啦,已经从你这下载下来了,放在了数据银行。

      • 飞天舞
        飞天舞 四川

        不客气,从braxiu那里“偷”到了@用户名的回复形式,哇哈哈

  • 24磅羽球新手
    24磅羽球新手 广东

    我使用了,可是总是在载入,不知道到底是什么问题 地址:http://ymq.in

    • 冰剑
      冰剑 MOD 广东

      不能识别后台插入的附件地址,因为图片的连接地址不是原始的绝对路径。

      • 24磅羽球新手
        24磅羽球新手 陕西

        额,我没有修改过路径啊,和用了KE编辑器是否有关?

        • 冰剑
          冰剑 MOD 广东

          你把鼠标放在我图片上,状态栏显示的地址是图片的真实路径,而放在你的图片上,显示的却不是真实路径。

          • 24磅羽球新手
            24磅羽球新手 广东

            原来如此,我手动改了下链接就好了,可是这好像是typecho自动生成的链接吧,该怎么默认链接到源文件呢?

  • 黄桃
    黄桃 湖南

    貌似我现在还不怎么贴图,以后在用咯,
    不过我好喜欢的你读者墙啊。
    难不成是自定义页面?
    PS 官方资料看的迷糊。。

    • 冰剑
      冰剑 MOD 广东

      嗯,是自定义页面。

  • ych
    ych 四川

    有点问题。
    加载的图片的url,貌似是取的对应的的href值,而实际上,默认的福建管理器插入的图片的外部包围的标签是指向福建管理器页面的。

    • 冰剑
      冰剑 MOD 广东

      是的,href指定在附件页面中是不能显示的。

  • ych
    ych 四川

    那,能修复一下这个问题吗?
    你的js,压缩过的,我想改不过不好改。。。

    • 冰剑
      冰剑 MOD 广东

      SlimBox2这个JQ插件不是我开发的,为了方便,我只是把它弄成了TE的插件而已。
      解压很容易的,网上到处都是在线解压的工具。

  • mrjiangyu
    mrjiangyu 安徽

    冰剑你好,我使用的模板就是你现在用的模板,但是为什么前台没有效果呢?
    选择范围使用的默认的。。

    • 冰剑
      冰剑 MOD 广东

      需要使用a标签来包含img标签才有效果。

      • mrjiangyu
        mrjiangyu 安徽

        写的就是.entry_content a:has(img)

        • 冰剑
          冰剑 MOD 广东

          不是插件,是你发表日志的图片标签问题。
          你的是< img src="xxxx" />这样的。
          实际上要< a href="图片地址">< img src="图片地址">
          PS:去掉尖括号后面的空格。

          • mrjiangyu
            mrjiangyu 安徽

            恩,搞定了!感谢解释。。这么说以后发博客要是使用这个效果的话还得重新在源码模式下手动更改链接?

            • 冰剑
              冰剑 MOD 广东

              有的编辑器会自动加上a标签的,具体什么样子我也不知道,我自己没装编辑器,习惯在编码下写日志。

          • mrjiangyu
            mrjiangyu 安徽

            我明白了,直接给图片加个链接就可以了。

  • gao
    gao 江苏

    正找呢

  • 老T
    老T 湖北

    干嘛不放到Google Code上去啊?

    • 冰剑
      冰剑 MOD 广东

      因为binjoo这个id被注册了,所以就不想用了。

  • Jack
    Jack 马来西亚

    冰剑您好,我现在打算用Highslide JS 实行侧边栏中加入社群比如msn在线ifame代码,但是Highslide JS 上传后,也在模板header.php中加入代码了,还是调用不到出来,请问可以帮我看看是哪里出错吗?我是想要做出http://blog.joytown.tw/2011/03/07/607 右手旁侧边栏“敗家誌°社群”这个效果,请问如何实现呢?谢谢

    • 冰剑
      冰剑 MOD 广东

      我对这个不太了解,不好意思。

  • jack
    jack 重庆

    我用了怎么没有效果啊,jQuery库已经下载最新版本放到js里面了

    • binjoo
      binjoo MOD 广东

      后台的第一个设置你可能没写对。

  • jack
    jack 重庆

    那个该怎么填,我没改那个,默认是.entry_content a:has(img)
    我用的0.8默认的主题,修改成.entry_data a:has(img),也没效果,这个该怎么填?

    • binjoo
      binjoo MOD 广东

      看了下你的主题,应该是写:#content .post a:has(img) 。

  • jack
    jack 重庆

    不错,有效果了,还有2个问题,文章中图片的地址问题是怎么解决的,默认是附件的地址。
    LZ的空间是怎么买的,速度不错,我的godaddy近期抽的厉害,郁闷

    • binjoo
      binjoo MOD 广东

      哪个地址问题就真没办法了,不知道怎么解决。。
      我空间是在老薛主机买的,老薛口碑不错,你可以试试。

  • 羽中
    羽中 河北

    其实速度主要还是看机器了,不过HS和jquery有点重复,而且经常和其他js冲突,我也考虑换套灯箱了

  • isayme
    isayme 江苏

    这个插件与Google Code Prettify有兼容问题吧?

    • 冰剑
      冰剑 MOD 广东

      这个我还真不知道。。

      • isayme
        isayme 江苏

        两个插件激活顺序必须是slimbox在前……

  • 视野瞳前
    视野瞳前 湖南

    请教下如何,在模版中调用某分类的文章列表

  • 暮春
    暮春 北京

    请问我的主题应该怎么填啊?这个是从哪看的?

    • 冰剑
      冰剑 MOD 广东

      额,这个不好说,看你日志内容所在的CSS部分。
      我手机上的,不方便帮你看,不好意思。

      • 暮春
        暮春 北京

        是这个部分的哪个代码呢?话说这个方法我一直不知道怎么实现的

        • 冰剑
          冰剑 MOD 广东

          你这样写试试。
          .content .article .section

          • 暮春
            暮春 北京

            话说这个还是不行,要不把我css给你发一份?

            • 冰剑
              冰剑 MOD 广东

              .content .article .section a:has(img)
              用这个。。

            • 冰剑
              冰剑 MOD 广东

              必须是包含在a标签下的img标签才行。

        • 冰剑
          冰剑 MOD 广东

          .content .article .section a:has(img)
          用这个。。

  • kz跳跃
    kz跳跃 山西

    怎么设置只读取本文章页的图片,不要一点开就是全站的.

  • lauyoume
    lauyoume 浙江

    图片太大 超出窗口有解决办法不?

  • 丁臣
    丁臣 安徽

    为什么点击之后一直显示加载呢。

    • 冰剑
      冰剑 MOD 广东

      可能是你的图片连接地址不是绝对路径。

      • Jr
        Jr 四川

        的确,我的也是这个问题,点击出来后一直在加载,不显示图片,图片是绝对路径。

  • 爱音族
    爱音族 内网

    哇,这里这么多Typechoer啊,爱你们!

    • 冰剑
      冰剑 MOD 内网

      博客主题不错哦,蛮喜欢的,不过推荐的音乐都不合胃口啊。

  • 雨帆
    雨帆 山东

    啊啦啊啦,Box的那个链接啊,直接就哔……的一下的断了。

    • 冰剑
      冰剑 MOD 广东

      这句话的表情好丰富。。

  • Xu's
    Xu's 广东

    我的博客能成功调用,但是图片按上去就只会加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载加载= =!

    • Xu's
      Xu's 广东

      看上面的回复我又懂了,但是附件按插入出来的是附件页- -
      有米有方法一劳永逸= =

      • 冰剑
        冰剑 MOD 广东

        论坛中我看到过一个插件,可以在你上传文件后,获得真实的绝对路径,但具体叫什么名字就不知道了。这个你要自己去看看。

  • True
    True 江苏

    我也用不了

    • True
      True 江苏

      用的了了#content .post a:has(img) 这个就行

      • True
        True 江苏

        改图片地址到时挺麻烦的。

        • 冰剑
          冰剑 MOD 广东

          有个插件可以获得绝对路径的插件,不记得叫什么名字了,你可以去论坛找找。。
          因为我用的图床,所以没有这种麻烦,哇哈哈。。

  • ccc
    ccc 广东

    奇怪,咱们的结构一样 我实现不了呢?

    • 冰剑
      冰剑 MOD 广东

      a标签里面的href地址必须是绝对路径才行。

  • 比木
    比木 云南

    冰剑兄,我又来咯。还是问你下,我现在的主题,应该在范围选择器那里填写什么呢?

  • Never
    Never 浙江

    嗯,这个插件试了蛮好用的,谢了,咱俩主题一样啊,哈哈~~~

  • 芋头
    芋头 云南

    冰剑兄,我的主题应该在范围选择器里填什么呢。求教啊~

    • 云中漫步
      云中漫步 广东

      这个选择器的的值需要根据自己使用的主题来进行修改,你打开主题的post.php文件,找到,然后看一下它所属于的class是哪一个,那么就填写'.+class值 +a:has(img)'.比如我现在的是 ,所以我就要填写.entry a:has(img),希望对你有帮助

      • 云中漫步
        云中漫步 广东

        汗,我写错邮箱了

        • 冰剑
          冰剑 MOD 广东

          本来修改邮箱是要收取手续费五毛的,看在你帮我的份上,免费啦,哇哈哈。。

      • 冰剑
        冰剑 MOD 广东

        好淫啊,我自己都没时间回复,懒得回复。。

    • 冰剑
      冰剑 MOD 广东

      你的设置是:.postContent a:has(img)

  • YuyiDesign
    YuyiDesign 广东

    我想问问。为什么我用了这个插件。看到了效果,可是点击图片总是那么小的(跟原来在没点击之前一样)。。是要该怎么设置。。才可以像你这个博文一样的效果。。菜鸟不懂。。求回答

    • 冰剑
      冰剑 MOD 广东

      貌似你博客是这样的,没问题啊。。
      img里面的是小图地址,a里面的是大图地址。

  • 所谓刚子
    所谓刚子 北京

    不错不错 但是我更喜欢不用插件来实现这个东西,不知道博主可否指导一下呢

    • 冰剑
      冰剑 MOD 广东

      下载slimbox2的jquery插件就可以了,貌似你很会折腾,这个对你来说不难吧。

  • 小谭
    小谭 浙江

    博主,我设置过了,不过就是显示不了灯箱图片,一直处在加载状态!这是怎么回事?

    • 冰剑
      冰剑 MOD 广东

      图片只能使用绝对路径。

  • 靳默
    靳默 湖南

    最近折腾会typecho了。安装了这个灯箱插件。结果点击图片一致在加载。搞不清怎么回事。博主帮忙看看哦。

    • 靳默
      靳默 湖南

      擦。搞清楚了。我那个闷啊。还得手改。。。

      • 冰剑
        冰剑 MOD 美国

        因为我有图床,没用后台附件上传,所以一直没考虑过这个问题。
        你觉得手动修改麻烦的话,可以试试 http://t.cn/zlT9LFn 这个插件。

  • 幽罗浮影
    幽罗浮影 河北

    额 上面那个问题弄好了 但是提示一直在加载 = =

    • 冰剑
      冰剑 MOD 美国

      亲,参考常见问题第三条哦。。。

  • scarangel93
    scarangel93 河南

    刚才怎么也没效果,然后加上<?php $this->header(); ?>就可以了。。。因为不考虑收录,前段时间把这两行删了。

  • scarangel93
    scarangel93 河南

    打反了。。

  • scarangel93
    scarangel93 河南

    再来一下,是加上<?php $this->header(); ?>

  • scarangel93
    scarangel93 河南

    打不上,过滤掉了。:-(

  • 职业乞丐
    职业乞丐 江西

    明明只有一幅图片,可总数却显示2,可以点击 prev ,点击后又一直是 loading 状态,这是怎么回事?

    • 职业乞丐
      职业乞丐 江西

      终于搞清楚了,是因为插件把作者logo也算进去了。

  • 落梵
    落梵 广东

    终于搞完、typecho插入图片默认是链接到附件页的,麻烦、

  • 落梵
    落梵 广东

    找了款插件转换图片链接,ImageHref

  • sloger
    sloger 江苏

    看了好多typecho的站点, 为什么你们正文中的图片都有个a包围, 我的却没有.
    你们是插件实现的? 还是自己用js添加的?

  • o\'kefan
    o\'kefan 福建

    不会用,可以的话帮我看看 http://kefilm.sinaapp.com/

  • Flyヽ
    Flyヽ 福建

    WordPress 添加灯箱插件 – Slimbox
    http://lfei.org/wordpress-slimbox-lightbox/

  • jichuan
    jichuan 四川

    我从谷歌来,很喜欢博主此插件,在github下载的v1.0.5版本,试了很久没搞定。
    能否请博主帮看看http://gg.gg/hide 是否能用此插件呢。

    • 冰剑
      冰剑 MOD 日本

      选择器设置对了就行。

  • 清如许
    清如许 浙江

    请问博主我这个主题应该怎么改呢?实在不会,谢谢。

    • 冰剑
      冰剑 MOD 广东

      .content .post a:has(img),图片需要用a标签包含才行。