1

クリック機能で画像のサイズを変更したい。これが現在機能していない私のコードです。これを正しく行っているかどうかはわかりませんが、どんな助けも素晴らしいでしょう。

<script>
$(document).ready(function(){
 $("#viewLarge").click(
 function(){
  $("#newsletter").width("950px");
 });
});
</script>
<a id="viewLarge" class="prepend-7" href="#">View Larger(+)</a>
<img id='newsletter' width='630px' src='images/news/hello.jpg'>
4

4 に答える 4

1

HTML ソースでは、 を指定しないでくださいwidth="630"。jQuery.width() は CSS の幅を操作するため、代わりにインライン CSS を使用して幅を指定します。また、関数には単位 (% または px) のない数値を指定しjQuery.width()ます。

HTML

<a id="viewLarge" class="prepend-7" href="#">View Larger(+)</a>
<img id="newsletter" style="width: 630px" src='http://farm3.static.flickr.com/2475/4008724345_56506c8183_b.jpg'>

JavaScript

$(document).ready(function() {
    $("#viewLarge").click(function() {
        $("#newsletter").width(950);
    });
});

デモ

于 2011-05-14T06:57:19.253 に答える
1

リンクのデフォルト アクションを妨げていないため、ページがリロードされている可能性があります。return false;リンクを取られないように幅を設定してから追加してみてください。実際には幅属性ではなくスタイルを使用して書き直す必要がありますが、テストでは問題にはならなかったようです。次のコードを使用すると（ただし、画像を私の画像に置き換えます）、うまくいきました。

<script> 
$(document).ready(function(){ 
 $("#viewLarge").click( 
    function(){ 
       $("#newsletter").width("950px");
       return false; 
    }); 
}); 
</script> 
<a id="viewLarge" class="prepend-7" href="#">View Larger(+)</a> 
<img id='newsletter' src='images/news/hello.jpg' style="width: 630px;">
于 2010-05-31T19:26:34.000 に答える
0 
Try This : jQuery image resize code(working with all browser)

/*
Here is Start Image Resize Code
 */
function image_resize() {
    $("your-class-or-id img").each(function () {
            /* Max width for the image */
            var maxWidth = 230;
            /* Max hieght for the image */
            var maxHeight = 230;
            /*Used for aspect ratio*/
            var ratio = 0;
            /*Current image width*/
            var width = $(this).width();
            /*Current image height */
            var height = $(this).height();

            /*Check if the current width is larger than the max*/
            if (width > maxWidth) {
                /*get ratio for scaling image*/
                ratio = (maxWidth / width);
                /* Set New hieght and width of Image*/
                $(this).attr({
                        width : maxWidth,
                        height : (height * ratio),
                        alt : "your-alt-text-you-can-remove-this"
                    });
                /* Reset height to match scaled image */
                height = (height * ratio);
                /* Reset width to match scaled image */
                width = (width * ratio);
                /*Check if current height is larger than max*/
                if (height > maxHeight) {
                    /*get ratio for scaling image*/
                    ratio = (maxHeight / height);
                    /*Set new height and width*/
                    $(this).attr({
                            height : maxHeight,
                            width : (width * ratio),
                            alt : "your-alt-text-you-can-remove-this"
                        });

                }
            }
        });
}

/*
Here is End Image Resize Code
 */

/*
How can we call this Function
 */

/* Start $(document).ready function() */
$(document).ready(function () {
        /* Call Function For image Resize (Not for Webkit Browser) */
        image_resize();
    });
/* End $(document).ready function( */

/* Call Function (for Webkit Browser like safari and Chrome) */
$(window).load(function () {
        image_resize();
    });
于 2011-05-14T06:48:10.170 に答える
0

ねえ、アンダース。上記の人が話しているように、firebug コンソールを使用してみてください。最初に有効にする必要がありますが、エラーをキャッチします。また、Firefox や他のほとんどのブラウザーに組み込まれている Ctrl+Shift+J を使用してエラー コンソールを試すこともできます。

あなたのコードに関しては、これは私にとってはうまくいきます。

<a id="viewLarge" class="prepend-7" href="#">View Larger(+)</a>
<img id='newsletter' width='630' height='250' src='http://www.google.ca/intl/en_com/images/srpr/logo1w.png'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    $("#viewLarge").click(function(){
        $("#newsletter").css('width', '950px');
    });
});
</script>
于 2010-05-31T22:09:52.390 に答える