Dalam proyek baru-baru ini, saya menemui masalah untuk mencapai efek ini:
Setelah mengklik thumbnail halaman pic_small.Aspx, halaman pic_all.aspx akan muncul. Ukuran halaman pic_all.aspx akan otomatis disesuaikan dengan ukuran gambar, dan harus terdapat informasi deskripsi gambar. Anda juga dapat mengklik gambar sebelumnya dan gambar berikutnya untuk membalik halaman.
Proses implementasinya adalah sebagai berikut:
Kode pada thumbnail halaman pic_small.Aspx adalah:
<IMG id="imgPic" style="CURSOR: hand" border=0 height="95" onclick="ShowWindow(<%#DataBinder.Eval(Container.DataItem,"ID")%>)" src='< %#"Images/Product/" + DataBinder.Eval(Container.DataItem,"PicUrl")%>' width="118" runat="server">
ShowWindow disimpan dalam file OpenWindows.js dengan konten berikut:
function Tampilkan Jendela( id)
{
window.open('pic_all.aspx?ID=' + id,'_blank','Scrollbars=no');
}
Kode berikut dapat menyadari bahwa setelah mengklik thumbnail, akan muncul halaman pic_all.aspx untuk menampilkan informasi gambar. Yang ingin diterapkan di bawah ini adalah halaman pic_all.aspx secara otomatis menyesuaikan dengan ukuran gambar.
Tempatkan kode berikut di antara <Head></Head> pada halaman pic_all.aspx:
<script>
jendela fungsi.onload()
{
var obj=document.getElementById("PicUrl");
window.resizeTo(obj.offsetWidth + 127,obj.offsetHeight + 75);
}
</script>
PicUrl di sini digunakan untuk menampilkan ukuran gambar asli di halaman pic_all.aspx. Saya menggunakan kontrol html. Apa pun metode yang Anda gunakan, Anda harus membaca nama atau jalur gambar dari database.
obj.offsetWidth mendapatkan lebar gambar asli yang ditampilkan. obj.offsetWidth + 127 berarti jendelanya 127 piksel lebih besar dari lebar gambar, karena masih ada ruang yang tersisa untuk mengimplementasikan informasi deskripsi gambar.
Dengan cara ini, jendela pop-up dapat secara otomatis disesuaikan dengan ukuran gambar, dan halaman pop-up dapat diedit sesuka hati, karena halaman pop-up adalah halaman yang ditentukan, dan apa pun yang Anda inginkan. untuk mengeditnya anda bisa mengatasinya sama seperti biasanya.
Terima kasih kepada Bohu karena telah memberikan kode kunci untuk seluruh proses implementasi. Tanpa bantuannya, saya tidak akan dapat menyelesaikan proyek hari ini, dan saya tidak akan dapat meninggalkan perusahaan saya saat ini dengan tenang terima kasih yang sebesar-besarnya kepada setiap teman yang antusias membantu orang lain, itulah sebabnya saya akan menuliskan semua masalah yang dihadapi dalam proyek ini, dengan harapan dapat memberikan bantuan kepada lebih banyak orang.