← Recent posts

RazerBlog_110425_Update

2011-04-25 · 14 comments

Added:

1:Sidebar RecentPost

2:Sidebar Blogroll

 

Fixed:

1:评论内图片宽度超过固定宽度

 

没什么复杂的东西,不过这个snippet或许发出来有人能用到。

 

Dependency:

1:jQuery

2:jQuery Lightbox

 

Function:

1:传入一个jQuery提取的图片对象 如 $('img') 后,对该图片数组进行分析,若图片宽度超过固定大小后则修改图片宽度到固定值,并将该节点包装入一个lightbox中,使得可浏览正常尺寸。

 

Demo:

参照评论#18 

 

Code:

CustomImage=function(jquery_pic_instance)
{
    this.fitWidth=450;
    this.toBeFixedPics=jquery_pic_instance;
    this.resizeCommentPic();
    this.fixed=false;
}
CustomImage.prototype={
testCommentPic : function()
{
    var picReady=true;   
    $.each(this.toBeFixedPics,function(i,pic)
    {

var flag=false;
        if (pic.width>0)
        {
            flag=true;
        }
        picReady= flag && picReady;
    });
     return picReady;
},
wrapWithLightbox : function(img_dom)
{
    var tempNode=$('<a rel="lightbox" title=""></a>');
    tempNode.append($(img_dom).clone());
    tempNode.attr('href',img_dom.src);
    $(img_dom).replaceWith(tempNode);
    tempNode.lightBox();
},
resizeCommentPic : function()
{
    if (! this.fixed)
    {
        var ci=this;
        flag=this.testCommentPic();
        if ( ! flag )
        {
            setTimeout(function(){
                this.resizeCommentPic();
            },100);
        }
        else
        {
            $.each(this.toBeFixedPics,function(i,pic)
            {
                var w=ci.fitWidth;
                var ratio= pic.height/pic.width;       
                var flag = ci.fitWidth < pic.width;     
                if ( flag )
                {
                    pic.width = ci.fitWidth ;
                    pic.height = ci.fitWidth * ratio ;
                    ci.wrapWithLightbox(pic);
                }
            });
            this.fixed=true;
        }
    }
}
}

How to use:

在jQuery加载函数中加入如下代码:

其中toBeFixed是要控制的图片对象,FixImage是新建的CustomImage对象。

 

$().ready(function(){
var toBeFixed=$('#comments').find('img').not('.smiley').not('.avatar');
        FixImage=new CustomImage(toBeFixed);
});

 

 

Sum up:

1:很简单的一段代码,不过有个地方调错浪费了我不少时间。就是setTimeout这个函数,最初传入的setTimeout(this.resizeCommentPic,100);却提示空指针,于是反映过来——setTimeout是一个全局函数,this指向的window,所以需要传入一个闭包匿名函数,将私有变量传入。也就是写成如下的形式:

 

setTimeout(function(){
            this.resizeCommentPic();
        },100);

 

就可以解决问题。

 

P.S.:明天8点半起来围观刑场,虽言胜败乃兵家常事,不过明天是输不起的一场比赛。Sometimes we must bite the bullet.

Comments (14)

2011-04-26 12:50 · ##1
昨天看到了“工事中”的字样_______

右边的边栏字体Size傲娇了呢~WWwwWWWwwww
2011-04-26 14:31 · ##3
好吧连接里面写上了你______

不满意要投诉哦~WWwwwwWWWwwww
2011-04-26 17:00 · ##5
前天還在看setTimeout和setInterval的說
2011-04-26 17:07 · ##6
代码看不懂,篮球也不懂,偶该吐嘈神马好捏[:otz]

话说今天好热啊,受不鸟鸟~30多度的~[:bye]
Mucid Mucid
2011-04-26 17:39 · ##7
我还在学PHP……
打开这里好慢……
Mucid Mucid
2011-04-26 17:40 · ##8
我还在学PHP……
打开这里好慢……
Mucid Mucid
2011-04-26 17:41 · ##9
suzi的widget终于出来了,赶紧加上咯^_^
2011-04-26 18:28 · ##10
第一次来贵博客,JQ不会玩呢,可否指点一二。
2011-04-26 21:03 · ##11
这些代码,一行都看不懂:)
kita kita
2011-04-26 22:34 · ##12
重裝了,懶得去折騰mld,糾結啊⋯⋯發現amule出了2.3.1rc1版本
2011-04-26 23:15 · ##13
@kita:

JS除了这2个方法外貌似没其他的线程类函数了,各种纠结。

@兰色忧郁:
偶这里前后一个月经历了从28度跌到8度,又回温到20度,跟坐过山车一样,特刺激...


@Mucid:@Mucid:
11区的server貌似对网通友好点,电信可能差点。

@自贡SEO:
有问题尽管提吧>_<,虽然我也是小白

@Maid:
其实这代码也只是为了包装下保证能重复利用,如果简单的写的话也就是8,9行的样子。

@kita:
mld我一直不喜欢用,电驴之前一直用的amule,现在基本都扔离线了.....
kita kita
2011-04-27 22:37 · ##14
kita準備也去弄隻離綫的說,懶得折騰了

Leave a comment