jqueryで画像の幅を自動的にページ幅に合わせて縮小

画像がエントリ表示の幅をはみ出して表示されるのをjqueryで直してみた。

jQuery.noConflict();
(function($) { 
    $(function() {
        setEntryImgWidth();
    });
    function setEntryImgWidth(){
        $(".entry .body p").each(function(){
            var $p = $(this);
            if($p.find("img").length>0){
                $img = $($p.find("img"));
                var width = $p.width();
                if($img.width()>width){
                    $img.width(width);
                }
                $img.fadeTo("slow", 1);
            }
        });
    }
})(jQuery);

.entry p img {
    filter: alpha(opacity=0);
        -moz-opacity:0.0;
        opacity:0.0;
}

画面表示時にはみ出した状態を見せるのがいやなので、透明度を0にcssで設定しておいて、jqueryで横幅を設定できたら、フェードインするようにした。

フェードインするとき、$img.fadeIn()だと表示されなかったので、fadeTo()を使用。

縮小した画像が予想通り汚いんで、flashで画像読み込み用のViewerを作ってその中で縮小処理をかけたほうがいいかな。

Related Posts

• May 17, 2009 -- Javascript Error by using Interface elements for jQuery Slideshow in IE6
• April 13, 2009 -- wordpressのtheme内で、トップページかどうかの判別
• April 8, 2009 -- jQueryでIMGタグを含んでいるAタグのborderの非表示