معهد دعم اتش فى اى بى اس لحلول الويب - Powered by vBulletin


 
 
النتائج 1 إلى 1 من 1

الموضوع: تركيب صندوق light box بالاجاكس ... رائع جدا

  1. #1
    أدارى
    الصورة الرمزية HVIPS4


    تاريخ التسجيل: Jun 2011
    رقم العضوية: 6
    الدولة: Cairo
    المشاركات: 1,979
    HVIPS4 غير متواجد حالياً

    تركيب صندوق 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:
                           <link rel="stylesheet" href="js/lightbox.css" type="text/css" media="screen" />
    <
    script type="text/javascript" src="js/prototype.lite.js"></script>
    <script type="text/javascript" src="js/moo.fx.js"></script>
    <script type="text/javascript" src="js/litebox-1.0.js"></script> 
    5- الى هنا نكون قد ضمنا ملفات العمل ... الان علينا اعطاء اشارة البدء في وسم body
    استبدل كلمة <body> بالكود التالي

    كود PHP:
                           <body onload="initLightbox()"
    6- الان قمنا بتحديد اشارة البدء ... الان لا يبقى علينا سوى ضبط الصور لتنتج بالصورة الصحيحة .. يجب ان تكون كود وسم الصور على النحو التالي مع العلم انه يمكنك التحكم بامكانيات الصورة من خلال الطول والعرض عادي ... لكن اللي يهمنا هو الرابط + ال rel

    كود PHP:
                           <a href="رابط الصورة" rel="lightbox[example]">
    <
    img border="0" src="رابط الصورة"></a

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

 

ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •