2

一部は体験用、一部はプロジェクト用に、JavaScriptで独自のフォトギャラリーを構築しています。現在、オブジェクトに関するいくつかの問題で立ち往生しています。

Imageオブジェクトが作成されると、Galleryオブジェクトの配列にプッシュされます。コメント（要点の55行目）の周りで、オブジェクトからプロパティとプロパティ// constrain to widthを取得しようとしています。変数をconsole.logにすると、オブジェクトのプロパティと機能を確認できます。しかし、私がそうすると、私は未定義になります。私は何が間違っているのですか？widthheightimgconsole.log(img.height);

ファイル全体は以下のとおりです。読みやすくするための要点もここにあります。

var Image = function(img, gallery){
    // init with an image in jquery form
    this.src = img.attr('src');

    this.setDimensions = function(){
        var temp_height, temp_width;
        $this = this;
        $this.image = $('<img />').attr('src', this.src).load(function(){
            $this.height = this.height;
            $this.width = this.width;
        });
    };

    // init functions
    this.setDimensions();
    gallery.images.push(this);


}; // Image

var Gallery = function(){
    this.width = $(window).width();
    this.height = $(window).height();
    this.images = [];

    this.createElements = function(){
        $('body').append('<div id="the_gallery"></div>');
        $('#the_gallery').css({width: this.width, height: this.height});
    };

    this.open = function(){
        this.createElements();

        var img = this.images[0];

        // see if the image is bigger than the window
        if( this.width >= img.width && this.height >= img.height) {
            console.log('image < window');
            // just show the image, centered
        }

        else {
            console.log('image > window');
            var temp_width, temp_height;
            // constrain to height
            if( img.width < img.height ) {
                console.log('image width < image height');
                temp_height = this.height;
                temp_width = (temp_height/img.height) * img.width;

                img.css({height:temp_height, width:temp_width});

            }

            // constrain to width
            else {
                console.log('image width > image height');
                temp_width = this.width;
                temp_height = (temp_width/img.width) * img.height;
                img.image.css({height:temp_height, width:temp_width});
            }

        }

        img.image.appendTo($('#the_gallery'));

    }; // open

    this.close = function(){
        $('#the_gallery').remove();
    }; // close
}; // Gallery

$(document).ready(function(){
    $('#gallery img').click(function(){
        launchGallery($(this));
    }); // click

    var gallery = new Gallery(),
        test = new Image($('#gallery img:first'), gallery);

    gallery.open();
}); // doc ready
4

2 に答える 2

2

私は閉会に投票しましたが、ここにいくつかの助けがあります：

を呼び出すときはnew Image、それをリロードして設定widthしheight、loadイベントが発生したときに設定します。つまり、残りのコードが実行された後です。そのポイントの55行目に到達したとき、画像はまだロードされていない可能性があります。

簡単な解決策は、幅/高さを直接取得しimg.width()、常にプラグインをで実行することwindow.onloadです。動的に読み込まれる画像をサポートする場合は、そのロジックをブラッシュアップし、すべてが読み込まれるまで待ってからギャラリーを構築する必要があります。

また、グローバルのリークを避けてください。（7行目）varに欠けています。$this = this

于 2012-05-22T03:24:09.560 に答える
-1

これについてはよくわかりませんが、試してみる価値はあります。「$（'＃the_gallery'）。css（{width：this.width、height：this.height}）;」の代わりに

多分これを試してみてください：

"$（'＃the_gallery'）。css（'width'、this.width +'px'）。css（'height'、this.height +'px'）;"

于 2012-05-22T03:12:33.640 に答える