APR

25

Mon

Author:EMINARCISSUS

被拍砖14次,接着砸!

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.

smiley