منتدى استراحات زايد - [درس خاص] شرح تركيب صندوق light box بالاجاكس ... رائع جدا

السلام عليكم ورحمة بركاته
والصلاة والسلام على سيدنا محمد
اللهم امين

عنوان الدرس: شرح تركيب صندوق lightbox لعرض الصور باستخدام الاجاكس.
مثال حي على الدرس: http://www.doknowevil.net/litebox/ اضغط على احد الصور وانظر كيف يتم عرض الصور.
متطلبات الدرس بشكل نظري: في هذي الخاصية نستخدم prototype مع mootools معا للحصول على هذه الخاصية الرائعة في عرض الصور. وهي تضفي ديناميكية على صفحات الويب. لكي يتم تركيب الصندوق نحتاج لتضمين ملفات جافا سكربت وcss في وسم head كما سيتبين بعد قليل ثم سنقوم من خلال الوسم body بعمل initialization يعني بدء لهذه الخاصية.. ونحتاج لاضافة rel داخل وسم a في روابط الصور. قد لا تفهم هذا الكلام النظري الموجود هنا .. لكن اؤكد لك انه عند رؤيتك للشرح العملي ستدرك مدى سهولة الطريقة.

شرح التركيب

1- قم بتحميل الملف المرفق باسم lightbox.
2- بعد فك الضغط للملف ستجد مجلدين الاول اسمه js وهو ملفات الجافاسكربت التي سوف نضمنها بالهيد وايضا يوجد معه ملف الستايل css . ثم في المجلد الثاني images ستجد صور الايقونات next prev وX والخ...
3- ننقل هذه الملفات الى السكربت او الصفحات المراد اضافة الخاصية لها وانا ساعتمد الاسماء js سيحتوي كود الجافاسكربت و images للصور.
4- داخل وسم head اضف الكود التالي مع مراعاة التغييرات (في حالة قمت انت بتغيير اسماء المجلدات)
رمز PHP:

5- الى هنا نكون قد ضمنا ملفات العمل ... الان علينا اعطاء اشارة البدء في وسم body
استبدل كلمة بالكود التالي
رمز PHP:

6- الان قمنا بتحديد اشارة البدء ... الان لا يبقى علينا سوى ضبط الصور لتنتج بالصورة الصحيحة .. يجب ان تكون كود وسم الصور على النحو التالي مع العلم انه يمكنك التحكم بامكانيات الصورة من خلال الطول والعرض عادي ... لكن اللي يهمنا هو الرابط + ال rel
رمز PHP:

بعد ذلك قم بحفظ الصفحة
وتمتع بهذه الميزة الجميلة
وهذا مثال مركب وتطبيق كامل للدرس
حمله من المرفق باسم lightboxdemo

الملفات المرفقة http://www.traidnt.net/vb/images/attach/zip.gif lightbox.zip (12.6 كيلوبايت) http://www.traidnt.net/vb/images/attach/zip.gif lightboxdemo.zip (273.1 كيلوبايت)