2010/03/26

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

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

範例HTML

Img Resize




照片1 圖片1:無連結,有超過,500x333。 照片2 圖片2:無連結,無超過,300x450。 照片3 圖片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

沒有留言: