Inside My Mind: 3月 2010

2010/03/26

文章內容圖片大小控制功能

很多人PO圖時會忘記resize，導致某些Blog或者新聞發布後圖片撐開了該內容的範圍
所以我寫了一隻jQuery來防堵這件事情。

範例HTML


Img Resize





圖片1：無連結，有超過，500x333。


圖片2：無連結，無超過，300x450。


圖片3：有連結，有超過，500x333。

jQuery code

/**
* 指定區域圖片縮圖功能
* 建立日期：2010/03/26
* 作者：David
* Email chan15tw@gmail.com
*/
(function() {
    // $w - 限制寬度
    $.fn.dramaImgResize = function($w) {
        return this.each(function() {
            // 找出指定區域所有為圖片的dom
            $(this)
                .find('img')
                .each(function() {
                    // 若超過規定寬度，則將原始寬度以及縮圖寬度紀錄於data中
                    if ($(this).width() > $w) {
                        // 新高度
                        $newH = Math.ceil($(this).height() / $(this).width() * $w);
                        
                        // 賦予資訊：$oW = 原始寬度，$oH = 原始高度，$nW = 新寬度，$nH = 新高度，$click = 是否點擊
                        $(this)
                            .data('imgInfo', {$oW: $(this).width(), $oH: $(this).height(), $nW: $w, $nH: $newH})
                            .data('click', false)
                            .width($w)
                            .height($newH);                       
                        
                        // 若原本就有超連結，則不加上圖片改變大小功能
                        if ($(this).parent()[0].tagName.toLowerCase() != 'a') {
                            $(this)
                                .css('cursor', 'pointer')
                                .click(function() {
                                    if (!$(this).data('click')) {
                                        $(this).animate({width: $(this).data('imgInfo').$oW, height: $(this).data('imgInfo').$oH}, 'fast', function() {
                                            $(this).data('click', true);
                                        });
                                    } else {
                                        $(this).animate({width: $(this).data('imgInfo').$nW, height: $(this).data('imgInfo').$nH}, 'fast', function() {
                                            $(this).data('click', false);
                                        });
                                    }
                                    return false;
                                });
                        }
                    }
                });
        });
    }
})(jQuery);

範例網址：http://www.drama.com.tw/jquery/imgResize.html
JS下載：http://www.drama.com.tw/jquery/js/jquery.dramaImgResize.js