لسلام عليكم ورحمة الله وبركاته …
هذا كود أجاكس لعرض الصور بشكل رائع وجميل ومنسق …
سأضع أكواداً أخرى قريباً بإذن الله …
رابط الأكواد : 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 سأشرح تعديل بعض السطور فيه …
كود PHP:
من السطر 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
   
containerBorderSize10,   // حجم الحدود عند عرض الصورة
   
containerResizeSpeed1,  // سرعة معالجة حجم الصوره “التصغير والتكبير”.
   // 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 
كود PHP:
 


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