最近のプロジェクトで、この効果を実現するために次の問題が発生しました。
pic_small.Aspx ページのサムネイルをクリックすると、pic_all.aspx ページがポップアップします。pic_all.aspx ページのサイズは画像のサイズに応じて自動的に調整され、画像の説明情報が含まれている必要があります。前の画像と次の画像をクリックしてページをめくることもできます。
実装プロセスは次のとおりです。
pic_small.Aspx ページのサムネイルのコードは次のとおりです。
<IMG id="imgPic" style="カーソル: 手" border=0 height="95" onclick="ShowWindow(<%#DataBinder.Eval(Container.DataItem,"ID")%>)" src='< %#"Images/Product/" + DataBinder.Eval(Container.DataItem,"PicUrl")%>' width="118" runat="server">
ShowWindow は、次の内容で OpenWindows.js ファイルに保存されます
。 ShowWindow(id)
{
window.open('pic_all.aspx?ID=' + id,'_blank','Scrollbars=no');
}
次のコードは、サムネイルをクリックすると、pic_all.aspx ページがポップアップして画像情報を表示することを実現します。以下で実装されるのは、pic_all.aspx ページが画像のサイズに応じて自動的に調整されることです。
pic_all.aspx ページの <Head></Head> の間に次のコードを配置します:
<script>
関数 window.onload()
{
var obj=document.getElementById("PicUrl");
window.resizeTo(obj.offsetWidth + 127,obj.offsetHeight + 75);
}
ここでの PicUrl は、ページ pic_all.aspx に元の画像サイズを表示するために使用されます。どの方法を使用しても、データベースから画像の名前またはパスを読み取る必要があります
。
obj.offsetWidth は表示される元の画像の幅を取得します。obj.offsetWidth + 127 は、画像の説明情報を実装するためにある程度のスペースを残す必要があるため、ウィンドウが画像の幅より 127 ピクセル大きいことを意味します。
このようにして、ポップアップ ウィンドウは画像のサイズに応じて自動的に調整され、ポップアップ ページは指定されたページであるため、必要に応じて自由に編集できます。編集するには、通常と同じように処理できます。
実装プロセス全体のキーコードを提供してくれた Bohu に感謝します。彼の助けがなければ、今日プロジェクトを完了することはできなかったでしょうし、安心して現在の会社を退職することはできなかったでしょう。他の人を助けることに熱心な友人全員に心から感謝します。だからこそ、より多くの人に助けを与えられることを願って、プロジェクトで遭遇したすべての問題を書き留めておきます。