2

英語は私の母国語ではないので、我慢してください。

ユーザーが私のサイトの画像をクリックすると、ギャラリーのようなdivが表示され、画像が最大サイズで表示されるようにしようとしています。

私が今やった方法は次のとおりです。

    var image = $("body > image");


image.on('click', function(){
    var imageURL = $(this).attr('src');
    backgroundCurtain.css({"display": "block"});
    imageResized.attr("src", imageURL);
    var imageWidth = imageResized.width();
    pictureInner.css({"width" : imageWidth});
});

これは機能していません。正直なところ、機能するとは思っていませんでした。ボディ内のすべての画像要素がそうなるように、どのように呼びますか。体内のすべての画像を「呼び出す」にはどうすればよいですか？

4

3 に答える 3

4

jqueryを使用してすべての画像を参照するには、次のようにします。

var images = $("img");

ただし、通常、これをすべての画像に適用する必要はありません（たとえば、imageResizedをこのセットに含めるべきではありません）。class="zoomable"良い解決策は、ズーム可能にしたい要素にcssクラス（たとえば）を追加し、このセレクターを使用することです。

var images = $("img.zoomable");

このリファレンスをご覧ください。

ほとんどの場合、サムネイル用に大きな画像が読み込まれることを意味するため、大きな画像に同じURLを使用しないことに注意してください。私の練習では、「someFile.jpg」や「someFile-big.jpg」のような命名パターンを使用して、このようなことを行います。

$("img.zoomable").on('click', function(){
    var imageURL = $(this).attr('src');
    backgroundCurtain.css({"display": "block"});
    imageResized.onload = function(){
        var imageWidth = imageResized.width();
        pictureInner.css({"width" : imageWidth});
    };
    imageResized.attr("src", imageURL.split('.')[0]+'-big.jpg');
});
于 2012-08-29T16:41:40.967 に答える
1 
var image = $("img");

image.on('click', function(){
    var imageURL = this.src;
    backgroundCurtain.css("display", "block");
    imageResized.attr("src", imageURL);
    var imageWidth = imageResized.width();
    pictureInner.css("width", imageWidth);
}); ​
于 2012-08-29T16:42:50.050 に答える
1

問題はセレクターにあります。'>'セレクターは、直接の子を指定します<body><img /></body>。@dstroyが提案しているセレクターは、ページ全体の画像を取得するだけです。ただし、これはあなたが達成しようとしていることではないかもしれません。

興味のあるすべての画像を含むフォーム要素（IDが「gallery」のDIVを想定）があると想定しています。次に、次を使用できます。

var images = $("#gallery img");

このように、アイコンと「クロム」画像は背景に表示されません。

于 2012-08-29T16:46:06.203 に答える