| |
| |
| |||||||
| مهارات لغــــات البــــرمـجــــة لغات البرمجه php و asp و Ajax و Java و غيرها |
 |
| | أدوات الموضوع |
|
#1
14-08-2007, 02:15 مساء
| |||
| |||
 Lightbox2 - شاهد صورك بتقنية الـ AJAX السلام عليكم ... Lightbox2هذا الملف الرائع الذي يسمح لك بسهولة مشاهدة صورك بتقنية الأجاكس ، يمكنك أولا مشاهدة تطبيق واحد من بين الكثير قمت بها و التي كانت نتائجها رائعة ... من هنا ... نعود الآن إلى طريقة الإستعمال ... بعد التحميل الملفات اللازمة من هنا ... وفك ضغطها ستجد ثلاث مجلدات : css ; images ; js ... لا يستوجب تركها كما هي ، و لكن من المستحسن ذلك لأنني سأضع الشرح على هذا الأساس ... أظن من أسماءها واضح ما تحتويه و لكن لا بأس في ذكرها ... ملفات مجلد الـ css ... يحتوي على ملف وحيد هو " lightbox.css " و هو خاص بتنسيق العرض و سوف نتطرق له لاحقا ... ملفات مجلد الـ images ... و ملفاته ... ( يمكنك تغييرها بما يتناسب معك أيضا ) اللازمة : " closelabel.gif " ; " close.gif " ; " blank.gif " ; " loading.gif " ... الإختيارية : " prevlabel.gif " ; " prev.gif " ; " nextlabel.gif " ; " next.gif " ... سنذكر لاحقا لماذا هي إختيارية ... كما يمكن أن تضع في هذا المجلد صورك التي تريد عرضها ... ملفات مجلد الـ js ... و ملفاته ... " scriptaculous.js " ; " prototype.js " ; " lightbox.js " ; " effects.js " ... هذه هي الملفات الأساسية للعمل ( لا شرح لها :smailes77: ) طريقة العمل ... الجزء الأول ... 1- أدرج ملفات الجافا سكريبت في هيدر الصفحة كود بلغة HTML: <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script> 2- كما عليك إضافة ملف الـ css إلى الصفحة كود بلغة HTML: <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> 3- تأكد من مواقع الصور ( خاصة إذا قمت ببعض التغييرات ) الجزء الثاني ... 1- أضف rel="lightbox" مع رابط للصورة في أي مكان ( مع نص ، صورة ...) ... كما يمكنك إختياريا إضافة عنوان يظهر مع الصورة و كذلك عن تقريب الفأرة إلى الصورة ، النص ... كود بلغة HTML: <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a> كود بلغة HTML: <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a> <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a> <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a> يمكنك إستخدامها حتى في صفحات HTML .... التحميل في المرفقات ... ( سأقوم عن قريب بوضع شرح لتغيير الـ CSS مع تعريب الصور :smailes1: ) أريد أن أرى تطبيقاتكم .... الموضوع منقول
__________________ بو مُجَاهِد  |
|
مهارات سوفت للبرامج وتطوير المواقع والمنتديات والتبادل التجاري. |
المواضيع المتشابهه | ||||
| الموضوع / كاتب الموضوع | ||||
| حــوّل صورك إلى رسم بالرصاص ! (كاتب الموضوع : مُجَاهِد) | ||||
| إجعـــل صورك ضبابيّة (كاتب الموضوع : مُجَاهِد) | ||||
| عقاب الشرطة الأسترالية ... شاهد سيارتك تتحطم أمام عينيك (كاتب الموضوع : محمدالسكني) | ||||
| شاهد mbc,2m, aljazeera,dubai وقنوات اخرى بوضوح شديد (كاتب الموضوع : مُجَاهِد) | ||||
| ساعات بتقنية الفلاش (كاتب الموضوع : مُجَاهِد) | ||||
|
|
| أدوات الموضوع | |
| |
| العاب | العاب بنات | العاب اطفال | العاب اكشن | العاب حربية |
| العاب سيارات | العاب ذكاء | العاب قتال | العاب رياضية | العاب جميلة |
