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


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

الموضوع: ThickBox 3.1 لعرض الصور بتقنية الـ AJAX

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


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

    ThickBox 3.1 لعرض الصور بتقنية الـ AJAX


    السلام عليكم ورحمة الله وبركاتة

    من خلال بحثي بالنت وجدت طريقة رائعة لعرض الصور

    واحببت ان انقلها لكم حتى تستخدمونها لما لها اثر كبير

    على زوار مواقعكم

    لنبدأ بسم الله

    اولا عليك تحميل الملفات التالية

    من المرفقات

    ستجد داخل الملف المضغوط خمسة ملفات

    الاول سيكون thickbox.css قم برفعة الى مجلد موقعك الرئيسي او اذا احببت

    قم بنسخ محتواه وضعه داخل صفحة الويب التي تريد ان تضع بها هذه الخاصية

    والملف الثاني والثالث سيكونون ملفات بأمتداد JS

    وملفان للصور ضعها في مجلد الصور

    قم بفتح الملف thickbox-compressed.js

    وابحث عن هذا المتغير tb_pathToImage

    وتأكد بأن امتدادة يؤدي الى هذه الصورة macFFBgHack.png

    ثم قم بتحرير صفحة الـ HTML

    وضع في الهيدر هذا الكود


    كود PHP:
                           <script type="text/javascript" src="java/jquery-latest.pack.js"></script> 
    <script type="text/javascript" src="java/thickbox-compressed.js"></script> 
    ولكن تاكد من امتداد الملفات بأنها صحيحة java/jquery-latest.pack.js هذا واحد

    والاخر java/thickbox-compressed.js هذا

    وقم ايضا بوضع هذا الكود اسفل منهما


    كود PHP:
                           <style type="text/css" media="all">@import "thickbox.css";</style
    وتأكد من مكان وجود الملف thickbox.css

    نأتي الان للقسم الاخير وهو

    فالنفرض بأن لديك صور وتريد عرضها اولا عليك عمل من كل صورة تريد عرضها صورة مصغره

    بحيث عند الضغط عليها تظهر لك الصورة الكبيرة وتتحكم بها كما تريد

    الان سأقم بشرح طريقة عملها بعد النظر الى الكود بالاسفل


    كود PHP:
                           <td class="style11"
    <
    a href="siteimage/imgC1.jpg" class="thickbox"
    <
    img alt="" src="siteimage/imgC.jpg" class="style12" ></a></td
    <
    td class="style11" class="thickbox"
    <
    a href="siteimage/imgD1.jpg" class="thickbox"
    <
    img alt="" src="siteimage/imgD.jpg" class="style12" ></a></td
    تلاحظ وجود كود لرابط الكتروني وكود لصورة

    الرابط الالكتروني سيكون للصورة الكبيرة وكود الصورة سيكون للصورة المصغره

    ولكن لابد عند قيامك بوضع رابط ان تضع بالاتريبيوت

    كود PHP:
                            class="thickbox" 
    واذهب الان للصفحة التي اردت تضع بها هذه الخاصية وانظر للذي سيحدث عند الضغط على الصورة
    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

    اتمنى ما اكون اخطأت بأي شيء بالدرس

    ولأي استفسار او سؤال تفضلوا واسألو وانا جاهز للرد عليكم

    بالتوفيق للجميع ^^
    الملفات المرفقة

 

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

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