史上最迷你的LightBox插件

12

刚码完,各种BUG,仅供研究

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<style>
#lightbox{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999!important;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background: rgba(35,35,35,.7);
    *background:rgb(35,35,35);
    *filter: alpha(opacity=95);
}
/*ie6 fix*/
* html { background:url(*) fixed; }
* html body { margin:0; height:100%; }
* html #lightbox { position: absolute; left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); }
#lightbox p{
    background: url("img/loader.gif") no-repeat center center;
    height: 100%;
    width: 100%;
    line-height: 1px;
    text-align: center;
    display: inline-block;
}
#lightbox img{
    display: inline-block;
    max-width: 100%;
    margin: 0;
    margin-top: 3%;
    padding: 0;
    width: auto;
    height: auto;
    vertical-align: middle;
    border: 15px solid #fff;
}
</style>
<script>
(function($) {
$.fn.lightBox = function() {
    $(this).bind("click",function () {
        var url = $(this).attr("href");
        if ($("#lightbox").length == 0) {
            $("body").append('<div id="lightbox"><p><img src="'+url+'" /></p></div>');
            $("#lightbox").click(function (event) {
                $(this).fadeOut().remove();
                event.stopPropagation();
            })
        }
        return false;
    });
};
})(jQuery);
 
$(document).ready(function() {
    $('a[href$="jpg"],a[href$="png"],a[href$="gif"]').lightBox();
});
</script>

共 12 条评论

  1. 回复

    楼主,我对技术不懂,能不能告诉我这个怎么在wordpress中使用啊?谢谢。我只是把这部分代码前面css这段代码加进了主题的style.css,后面一部分js代码加进了主题的js中,但是不起作用。请问还需要修改什么呢?

    • 回复

      是否在这段JS之前引入了jQuery,如果是的话就应该没问题的。

      • 回复

        我把js代码放进了jQuery里面,也不起作用。郁闷。

  2. 回复

    打包拿走了,多谢分享。
    PS:多图时,如果图片弹出有前后图片链接的效果就更完美了

    • 回复

      本着尽可能精简代码的原则,你说的东西也不是不可以考虑,呵呵. 有空了码一下.

  3. 回复

    这些代码能够使用吗?还是只是交流用的。

    • 回复

      可以使用.只不过还没完善

  4. 回复

    你的博客是不是加了缓存呀?等了很久回复还没杀出来

    • 回复

      是的,页面缓存+侧边栏缓存,追求秒开的副作用…

  5. 回复

    没有效果展示吗…

    • 回复

      现在博客用着.

  6. 回复

    期待下一篇好文章!

回复 朽木 X

您的邮箱不会公开,当您的评论有新的回复时,会通过您填写的邮箱向您发送评论内容。 必填字段 *

为何看不到我发布的评论?

正在提交, 请稍候...