دروس مبرّمج

السلام عليكم ورحمة الله وبركاته …
هذا كود أجاكس لعرض الصور بشكل رائع وجميل ومنسق …
سأضع أكواداً أخرى قريباً بإذن الله …
رابط الأكواد : http://leandrovieira.com/projects/jquery/lightbox/
مع مثال طبعاً …

طريقة العمل , قم بالدخول للرابط , ثم اضغط على الصوره التاليه :

 

Ajax-JQuery-Light_Box

ثم قم بتحميل الملف , بعض فك الضغط , سينتج لديك 4 مجلدات , css , images , js , photos
وملف index.html … تستطيع تحرير هذا الملف ليناسبك لعرض صورك بدون تعب … لكن سأشرح قليلاً كيفية وضع السكربت إلى مايعجبك !.
قم بوضع مجلد على سطح المكتب او على اي مكان تريده اسمه ajax مثلاً…قم بنقل المجلد js إلى المجلد ajax والمجلد css والمجلد images …
الآن نقلنا ثلاث مجلدات , فلـندخل على المجلد js ونفتح الملف jquery.lightbox-0.5 سأشرح تعديل بعض السطور فيه …
من السطر 21 إلى 45 تقريباً …
// Offering a Custom Alias suport - More info: http://docs.jquery.com/Plugins/Authoring#Custom_Alias
(function($) {
 /**
  * $ is an alias to jQuery object
  *
  */
 $.fn.lightBox = function(settings) {
  // تعديل الإعدادات إلى مايعجبك
  settings = jQuery.extend({
   // Configuration related to overlay
   overlayBgColor:   ’#000′,  //  لون الخلفية بعد الضغط على صوره وتكبيرها
   overlayOpacity:   0.8,  // شفافية الخلفيه , من 1 إلى 9
   // Configuration related to navigation
   /* إظهار زي التالي والسابق دائماً true = نعم false = لا */
   fixedNavigation:  false,
   // Configuration related to images
   // رابط صورة الإنتظار “التحميل”
   imageLoading:   ’style/images/light_box/lightbox-ico-loading.gif’,
   // رابط صورة كلمة “السابق”
   imageBtnPrev:   ’style/images/light_box/lightbox-btn-prev.gif’, 
   // رابط صورة كلمة “التالي”
   imageBtnNext:   ’style/images/light_box/lightbox-btn-next.gif’, 
   // رابط “إغلاق”
   imageBtnClose:   ’style/images/light_box/lightbox-btn-close.gif’,
   imageBlank:    ’style/images/light_box/lightbox-blank.gif’,
   // Configuration related to container image box
   containerBorderSize: 10,   // حجم الحدود عند عرض الصورة
   containerResizeSpeed: 1,  // سرعة معالجة حجم الصوره “التصغير والتكبير”.
   // Configuration related to texts in caption. For example: Image 2 of 8. You can alter either “Image” and “of” texts.
   // كلمة Image
   // في جملة Image 1 of 9 إستبدلها بـ “الصوره”
   txtImage:    ’Image’, 
   txtOf:     ’of’,  // استبدلها بـ من
   // Configuration related to keyboard navigation
   keyToClose:    ’c',  // إختصار إغلاق عرض الصور من لوحة المفاتيح
   keyToPrev:    ’p',  // إختصار الصوره السابقه من لوحة المفاتيح
   keyToNext:    ’n',  //إختصار عرض الصوره التاليه من لوحة المفاتيح
   // Don´t alter these variables in any way

ملاحظة : لاتقم بنسخ هذه الأكواد مع الشرح ووضعها بالملف , بس إقرأ الشرح وقم بالتعديل على الملف الأصلي .

لوضع صفحة تحتوي على صورك , قم بإستخدام الصفحه المرفقه مع الملفات , صفحة index.html …
وشكراً.