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

محروم.كوم · #1 09-11-2009, 06:50 AM

السلام عليكم ورحمة بركاته
والصلاة والسلام على سيدنا محمد
اللهم امين
عنوان الدرس: شرح تركيب صندوق 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

الملفات المرفقة lightbox.zip (12.6 كيلوبايت) lightboxdemo.zip (273.1 كيلوبايت) __DEFINE_LIKE_SHARE__

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
[ 18 - 2 ] ثيم رائع من المصمم Blue Light By Leo يستحق التجربة >>>	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	02-19-2010 01:40 AM
برنامج تركيب صورتك على اجسام من تحب ببرنامجFaceOnBody Pro 2.4 رائع	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	11-30-2009 04:40 AM
product احصائيات المنتدى بالاجاكس	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	06-03-2009 01:50 PM
برنامج صندوق الحسنات ؟؟؟؟؟ رائع جداً	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	06-02-2009 02:10 AM
طلب كود الطقس بالاجاكس .. يوجد مثال	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	06-01-2009 12:21 AM