0

Javascript で自分でフォト ギャラリーを作成しようとしました。コードは次のとおりです。

var images =    [   
                "BAN46",
                "BASTIONE"
                ];

var legendes =  [   
                "exemple \"avec des\" guillemets",
                "legende2"
                ];


var path = '/galerie/';
var nbr = images.length;
var galerie = document.getElementById('sous_galerie');
var bloc_image = document.getElementById('bloc_image');
var nouvelle_image;

for(var i = 0; i < nbr; i++) {
    nouvelle_image = document.createElement('img');
    nouvelle_image.src = path + 'vignettes/' + images[i] + '-vignette.jpg';
    nouvelle_image.alt = images[i];
    nouvelle_image.setAttribute('onclick', 'zoom(' + i + ')');
    galerie.appendChild(nouvelle_image);
}

function zoom(i) {
    var image = document.createElement('img');  
    image.src = path + images[i] + '.jpg';
    image.alt = images[i];
    image.id = images[i];
    image.setAttribute('onclick', 'dispose(' + i + ')');

    var paragraphe = document.createElement('p');
    paragraphe.innerHTML = legendes[i];
    paragraphe.id = legendes[i];

    var ratio = image.height / image.width; 
    if(image.height >= 750) {
        image.height = '750';
        image.width = image.height / ratio;
    }

    image.style.marginTop = 0 - image.height / 2 + 'px';
    image.style.marginLeft = 0 - image.width / 2 + 'px';

    paragraphe.style.width = image.width + 'px';
    paragraphe.style.marginTop = (image.height + 20) / 2 + 'px';
    paragraphe.style.marginLeft = 0 - image.width / 2 + 'px';

    bloc_image.style.width = '100%';
    bloc_image.style.height = '100%';

    bloc_image.appendChild(image);
    bloc_image.appendChild(paragraphe);
}

function dispose(i) {
    bloc_image.removeChild(document.getElementById(images[i]));
    bloc_image.removeChild(document.getElementById(legendes[i]));
    bloc_image.style.width = '0';
    bloc_image.style.height = '0';
}

(コードはフランス語で申し訳ありません。コードに関するコメントや精度が必要な場合は、遠慮なく私に質問してください =) )

私の問題は、ビネットをクリックすると正しい画像が表示されますが、幅と高さが0pxであると見なされるため、画像は正しく表示されますが、南東に移動します.

image.style.marginTop = 0 - image.height / 2 + 'px';
image.style.marginLeft = 0 - image.width / 2 + 'px';

また、キャプションも写真の上に移動します。しかし、ページを更新して再試行すると、幅と高さの値が正しいため、今回は画像が正しく表示され、真ん中に表示されます。

ブラウザはプロパティをロードする前に画像とキャプションを表示しているようで、この「バグ」を修正する方法がわかりません。

4

1 に答える 1

1

寸法にアクセスするには、画像の読み込みが完了するまで待つ必要があります。

function zoom(i) {
    var image = document.createElement('img');  
    image.src = path + images[i] + '.jpg';
    image.alt = images[i];
    image.id = images[i];
    image.setAttribute('onclick', 'dispose(' + i + ')');
    image.onload = function() {
        var paragraphe = document.createElement('p');
        paragraphe.innerHTML = legendes[i];
        paragraphe.id = legendes[i];

        var ratio = image.height / image.width; 
        if(image.height >= 750) {
            image.height = '750';
            image.width = image.height / ratio;
        }

        image.style.marginTop = 0 - image.height / 2 + 'px';
        image.style.marginLeft = 0 - image.width / 2 + 'px';

        paragraphe.style.width = image.width + 'px';
        paragraphe.style.marginTop = (image.height + 20) / 2 + 'px';
        paragraphe.style.marginLeft = 0 - image.width / 2 + 'px';

        bloc_image.style.width = '100%';
        bloc_image.style.height = '100%';

        bloc_image.appendChild(image);
        bloc_image.appendChild(paragraphe);
    }
}

また、属性を作成する代わりに、実際のイベント ハンドラーを使用することをお勧めします。たとえば、次のように置き換えます。

image.setAttribute('onclick', 'dispose(' + i + ')');

と：

image.onclick = function() {
    dispose(i);
};

(またはaddEventListener、適切なフォールバックを使用attachEventして、oldIE で動作するようにします)。

ループ内にいるときはfor、より複雑な構文が必要になります (なぜ? )。したがって、次のように置き換えます。

nouvelle_image.setAttribute('onclick', 'zoom(' + i + ')');

と：

nouvelle_image.onclick = (function(index){
    return function() {
        zoom(index)
    }
}(i));
于 2013-05-24T19:04:33.243 に答える