1

中に美しい写真があり、その近くに次の写真に移動するためのボタンがあるライトボックスを想像してみてください...

ユーザーが次のボタンをクリックすると、JS は次のように動作します。

var Image = new Image();
Image.onload = getWidth;
Image.onerror = getFailure; 
Image.src = "http://somewebsite.mr/pics/4.png";

次に、画像が読み込まれると、JS は画像の幅を調べるために getWidth 関数に入ります。

w = this.width;  //height is not needed as CSS will adjust it correctly

その後、JS は画像の幅に応じてライトボックスの幅を変更します (境界線を作成するためのパディングが少し追加されます)。次に、JS は現在ライトボックスに表示されている画像の src 属性をhttp://somewebsite.mr/pics/4.pngに変更します。これにより、ライトボックスの画像が変更されます...

それがライトボックスの構築方法ですか？これは機能しますが、クロスブラウザーであり、何があっても正常に機能することを確認する必要があります。ライトボックスの開発について知っていることを教えてください。仕事をする別の方法はありますか？おそらく、そのプログラムに害を及ぼす可能性のある問題をいくつか知っていますか?

編集:私の懸念は、ライトボックスの場合に画像のプリロードに問題があるかどうかです。クロスブラウザでしょうか？残りの作業については知っています。ライトボックスの写真を変更する方法を知る必要があります。私は画像のプリロードが初めてです。メイン技ですか？

4

1 に答える 1

2

あなたのコンセプトは正しいと思います。ただし、ライトボックスを作成する場合、注意すべきクロスブラウザの問題が多数あります。それらすべてをリストしたマニュアルや記事は知りませんが、他のライトボックスのソースコードを調べてインスピレーションを得ることができるかもしれません。私は個人的に、GregNeustaetterの多面的なライトボックスが非常に理解しやすくカスタマイズしやすいと感じました。

于 2009-12-19T15:24:08.250 に答える