أسهل طريقة لتفعيل تأثير LightBox مُعربة ومحسنة (للصور فقط)

في آخر تدوينه شرحت إضافة Colorbox الرائعة والشاملة لتفعيل تأثير  صندوق الضوء أو Lightbox للمدونات والمواقع، وهي بالفعل شاملة تغنيك تماماً في هذا الباب ، ولكن ربما يظهر فيها شيء من التعقيد – وهو ليس كذلك – لذلك سأعرض الآن إضافة بديلة وفي غاية السهوله ولكنها فقط للصور المفرده كما أنها تعرض جميع الصور في التدوينه الواحدة في صندوق ضوء واحد. الإضافة مبنية على إضافة مشهوره جداً وهذا موقعها lokeshdhakar.com.

لمعاينة التأثير يمكنك زيارة هذه المدونة التجريبية: http://lightbox-testing.blogspot.com/

طريقة التركيب

سهله جداً ابحث عن السطر التالي:

</head>

الصق فوقه مباشرة هذا الكود:

<link href='http://alblogger-gen.googlecode.com/svn/trunk/lightbox/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/>
<script src='http://alblogger-gen.googlecode.com/svn/trunk/lightbox/lightbox.js' type='text/javascript'/>

فقط لا يوجد شيء أكثر .. اعذرني ستعمل الإضافة تلقائياً على جميع الصور حتى تلك التي سبق نشرها.

مميزات الإضافة والتعديلات

• الإضافة جداً خفيفه ورشيقة وهي من أشهر إضافات Lightbox .
• ملفات الإضافة مرفوعه على حساب خاص في google code الأسرع والأفضل ولن أحذفها ابداً بحول الله. يمكنك حفظها واستخدامها كما يحلو لك.
• تدعم التنقل بواسطة لوحة المفاتيح من خلال الأسهم، يمكن إغلاق صندوق الضوء بالضغط على زر "C" من لوحة المفاتيح ايضاً.
• قمت بتعريبها باقتصاص الصور من ملف الجافا واستبدالها بأخرى عربية.
• قمت بتحسين مظهر الإضافة عبر خصائص CSS3 وأضفت خاصية الظلال حول الصندوق.
• قمت بتعريب جزء وصف الصورة بحيث يظهر بشكل جيد واخترت له خط تاهوما.

التعديل على الإضافة

يمكنك التعديل على الإضافة وتغيير مظهرها من خلال ملف CSS ، ومن خلال ملف الجافا ، مثلاً يمكن تغيير لون  الخلفية حول صندوق الضوء بتغيير لونها من الخاصية overlayBgColor ، وتغيير درجة الشفافية بتغيير قيمة  overlayOpacity ، بالإضافة طبعاً إلى الأزرة …. وهكذا



واخيراً عن نفسي أفضل الإضافة السابقة ، لأنها تؤدي كل ما تؤديه هذه الإضافة وأكثر ، ولكن كما أسلفت هذه أسهل للمبتدئين