في مشروع حديث، واجهت مشكلة لتحقيق هذا التأثير:
بعد النقر فوق الصورة المصغرة لصفحة pic_small.Aspx، ستظهر صفحة pic_all.aspx ويجب ضبط حجم صفحة pic_all.aspx تلقائيًا وفقًا لحجم الصورة، ويجب أن تحتوي على معلومات وصفية للصورة. يمكنك أيضًا النقر على الصورة السابقة والصورة التالية لقلب الصفحة.
عملية التنفيذ هي كما يلي:
الكود الموجود في الصورة المصغرة لصفحة pic_small.Aspx هو:
<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 في ملف OpenWindows.js بالمحتوى التالي:
الوظيفة نافذة العرض (المعرف)
{
window.open('pic_all.aspx?ID=' + id,'_blank','Scrollbars=no');
}
يمكن للتعليمة البرمجية التالية أن تدرك أنه بعد النقر فوق الصورة المصغرة، ستظهر صفحة pic_all.aspx لعرض معلومات الصورة. ما سيتم تنفيذه أدناه هو أن صفحة pic_all.aspx يتم ضبطها تلقائيًا وفقًا لحجم الصورة.
ضع التعليمة البرمجية التالية بين <Head></Head> على صفحة pic_all.aspx:
<script>
نافذة الوظيفة.onload()
{
var obj=document.getElementById("PicUrl");
window.resizeTo(obj.offsetWidth + 127,obj.offsetHeight + 75);
}
</script>
يتم استخدام PicUrl هنا لعرض حجم الصورة الأصلي في الصفحة pic_all.aspx. أستخدم عنصر تحكم html بغض النظر عن الطريقة التي تستخدمها، يجب عليك قراءة اسم الصورة أو مسارها من قاعدة البيانات.
يحصل obj.offsetWidth على عرض الصورة الأصلية المعروضة. obj.offsetWidth + 127 يعني أن النافذة أكبر بمقدار 127 بكسل من عرض الصورة، لأنه يجب ترك بعض المساحة لتنفيذ معلومات وصف الصورة.
وبهذه الطريقة، يمكن تعديل النافذة المنبثقة تلقائيًا وفقًا لحجم الصورة، ويمكن تحرير الصفحة المنبثقة حسب الرغبة، لأن الصفحة المنبثقة هي صفحة مخصصة، وبغض النظر عن ما تريد للتعديل، يمكنك التعامل معه بنفس الطريقة المعتادة.
شكرًا لبوهو على توفير الكود الرئيسي لعملية التنفيذ بأكملها، لولا مساعدته، لم أكن لأتمكن من إكمال المشروع اليوم، ولن أتمكن من مغادرة شركتي الحالية براحة البال شكري العميق لكل صديق متحمس لمساعدة الآخرين، ولهذا السبب سأكتب جميع المشاكل التي واجهتها في المشروع، على أمل تقديم بعض المساعدة لمزيد من الناس.