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

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'/>


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


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


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


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


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



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






Boy

التعليقات: 29

مدونة وذكر يقول... 23 أبريل، 2011 1:47 ص

السلام عليكم
بارك الله فيك اخي الكريم مجهود رائع
والله خبرات نفتخر بها وفقك الله وسدد خطاك

جاسر الحربي يقول... 23 أبريل، 2011 8:49 ص

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

وفيك بارك الله يا أخيه

غير معرف يقول... 24 أبريل، 2011 12:21 م

جزاك الله خيراً

جاسر الحربي يقول... 24 أبريل، 2011 11:04 م

وجزاك الله خيراً كذلك :)

Eng.Zaki A.Rimawi يقول... 14 يوليو، 2011 1:00 م

شكرا جزيلا لك وبارك الله فيك على موقعك الرائع
ولكن يا طيب لم تعمل معي الاضافة على فيرفوكس او جوجل كروم على المدونة التالية:
http://engrimawi.blogspot.com/

جاسر الحربي يقول... 14 يوليو، 2011 2:58 م

السلام عليكم

أخي الفاضل أولاً أشكرك على طيب كلامك

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

الإضافة تعمل على الفيرفوكس والكروم والاكسبلورر التاسع

أسماء || أم نضال || يقول... 19 أغسطس، 2011 4:12 م

بارك الله فيك

جاسر الحربي يقول... 20 أغسطس، 2011 8:33 ص

أهلاً أم نضال ..
وفيك بارك الله

24/24 يقول... 1 سبتمبر، 2011 4:10 ص

أخي بارك الله فيك أستعمل قالب مدونة ذئيب و هذه الخاصية لا تعمل عندي

جاسر الحربي يقول... 4 سبتمبر، 2011 9:23 م

جربها اولا على مدونة تجريبية، ثم طبقهر على قالب ذؤيب، وغالبا ادا لم تعمل مثل هذه الاضافات يكون بسبب كثرتها في القالب الواحد للتعارض طبعا.

محمد يقول... 1 ديسمبر، 2011 2:02 ص

اخي جاسر تحية طيبة وبعد
راح اتعبك معي اخي العزيز
اريد هذة الاضافه ولاكن الاصلية بمعنى باللغة الانجليزية + اريد حذف كلمة next يعني عرض الصور يكون صورة صورة + اريد ان تعرض الاضافه الصورة بحجمها الاصلي واذا كانت الصورة كبيره تعرض بشكل مناسب على قد حجم شاشه الزائر
في انتظار ردك اخي العزيز

تحياتي

جاسر الحربي يقول... 10 ديسمبر، 2011 9:02 ص

يمكنك تركيب الإضافة من الموقع الأجنبي والرابط موجود أعلى التدوينة ، بعد ذلك يمكنك عرض الصور مفردة كما تريد.

أو استخدم هذه الإضافة:


تأثير LightBox للصور ومقاطع اليوتيوب والفلاش والمواقع وأكثر!

sta2r.com يقول... 22 مايو، 2012 3:02 م

السلام عليكم انا اضفت بالفعل وعمل بنجاح ولكن ظهرت مشكلة معى هو ان عندما اضغط على الصورة تكبر الصورة عندى مرتين مرة ب Lightbox ومرة اخرى عادية بدون اطار انا اعجبتنى Lightbox وانا اريد ازالة الظهور العادى وعايز الصورة تكبر بس Lightbox
ارجوا من حضرتك حل هذة المشكلة وممكن تزرو مدونتى وتدوس على الصورة وتشوف تكبير الصورة على شاشتين مش شاشة واحدة
http://sta2rdotcom.blogspot.com/
وشكرا

جاسر الحربي يقول... 22 مايو، 2012 8:26 م

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

اختبرت الإضافة في مدونتك وهي تعمل بشكل رائع مثل ستائركم :) ، وقد اختبرتها على كل من : الكروم - فيرفوكس - سفاري - اوبرا - ie9 ..
جميع المتصفحات تدعم الإضافة بدون مشاكل ..

sta2r.com يقول... 23 مايو، 2012 5:13 ص

انا شاكر لمجهودك يااخ جاسر انا بالفعل نزلت كود يمنع ظهور الشاشة العادية لكن فى نفس الوقت منع تشغيل بعض الادوات مثال انا فى المدونة ممكن اقسم الموضوعات على شكل شبكة او تفاصيل الكود اللى انا نزلته عشان يمنع ظهور الوضع العادى ويشغل بس اللايت بوكس منع تشغيل هذة الاداة وادخل على مدونتى وانت تعرف وكمان انواع المنتجات مش شغالة
الكود اللى ضفته ومنع التكبير العادى وشغل بس اللايت بوكس نزلته من المدونة دى ادخل عليها وشوفة
http://www.m5tar.blogspot.com/2011/09/lightbox-feature-on-blogger-and-how-to.html
وهل ممكن اعدل فيه عشان اشغل كل الادوات التانية وأمنع فيه ظهور التكبير العادى بتاع بلوجر واشغل تكبير اللايت بوكس

وشكرا

sta2r.com يقول... 23 مايو، 2012 5:55 ص

اخ جاسم بعد التحية معلش انا كتبت ليك ان سبب عدم تشغيل بعض الادوات عندى فى المدونة كان سببوا كود مانع ظهور عملية التكبير بتاعت بلوجر فى الحقيقة مش هو السبب لانى أكتشفت ان كود اللايت بوكس هو السبب هو اللى بيمنع تشغيل بعض الادوات عندى فى المدونة لانى جربت اشيل كود المنع بردو الادوات مشتغتلتشى لكن لما شيلت كود اللايت بوكس من اساسة اشتغلت انا اسف على ازعجك بس اتمنى تفدينى فى الموضوع ده وجزاكم الله خيرا

جاسر الحربي يقول... 23 مايو، 2012 9:17 ص

السلام عليكم ..

1) بالنسبة للكود الذي يمنع "تشغيل الوضع العادي" الذي أشرت الى موقعه ليس له داعٍ الآن، فيمكن ايقاف هذه الخاصية من لوحة التحكم.

2) التعارض بين اضافات الجافا وارد جداً ، لكن لاحظت أنك زودت مدونتك بالإضافة الاخرى ، وهي:

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

بعد الوسم

</head>

وأنا في شرحي ذكرت أن الموضع يكون ( قبل )

فحاول أن تغير موضع الكود وجرب ..

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

تحاياي

sta2r.com يقول... 24 مايو، 2012 3:27 ص

شكرا على مجهودك اخ جاسر انا فعلا جربت تنفيذ الامر زى ماقولتلى وبردوة لم تنجح ممكن تقولى ازاى اقدر ابطل تكبير الصورة العادى من بلوجر من غير كود المنع وعن طريق لوجة التحكم

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

ZaKaRiA BOuSsAiDa يقول... 21 يونيو، 2012 6:31 م

السلام عليكم أخي شكرا على المجهو و المدونة الاكثر من رائعة ولكن الإضافة لم تعمل معي أيضا كيف الحل ؟

جاسر الحربي يقول... 23 يونيو، 2012 8:11 ص

وعليكم السلام ..

العفو أخي الكريم ، جربها في مدونة جديدة ستعمل بإذن الله
وان لم تعمل أضف لي رابط المدونة

.

woocks يقول... 25 أغسطس، 2012 6:31 م

مدونة اكثر من رائعة.

جاسر الحربي يقول... 25 أغسطس، 2012 11:11 م

أشكر لك تعليقك الطيب ومرورك المبهج

Mahmoud يقول... 6 يناير، 2013 9:05 م
أزال المؤلف هذا التعليق.
أصيل ألغفاري يقول... 24 يناير، 2013 7:50 ص

صباحك خير أخي ..

عملت الاظافة تشتغل معي تمام ، بس تعطل علي سلايد شو مع اني اريد الاضافتين

جاسر الحربي يقول... 26 يناير، 2013 7:56 ص


@أصيل: التعارض في إضافات الجافا أمر وارد جداً

Om Hend يقول... 22 فبراير، 2013 11:32 ص

السلام عليكم ورحمة الله وبركاته
نفذت الطريقة على مدونة تجريبية لكن واجهتني مشكلة وهي ظهور الشريط العلوي فوق الصور هذا رابط صورة للتوضيح
https://lh4.googleusercontent.com/-j01aILLhzgI/UScrJGvprMI/AAAAAAAACZo/pePZbnmMgh4/s902/Sans+titre.bmp
اتمنى ان تساعدني بحثت طويلا عن طريقة انشاء البوم صور وأود ان يبقى الزوار في مدونتي يعني البومي الحالي ينقلهم الى بيكاسا هذا مثال بتقنية اللايت بوكس كما اعتقد اود ان يكون الالبوم مشابها لهذا هل من طريقة
http://www.sarreve.fr/?page_id=31
يعني اريد ان اجد حلا لوضع الصور على شكل جدول مثلما هو موضح بالموقع ثم عند الضغط تكبر الصور ولا باس ان تكون متتالية يعني يوجد كلمة سابق تالي وبارك الله فيك

جاسر الحربي يقول... 23 فبراير، 2013 2:08 م

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

أعتقد أنه تعارض تنسيق بسبب تنسيق القائمة العلوية وتحديداً قيمة z-index .

أما طريقة عمل جاليري ( البوم صور ) فيمكن استخدام هذه الإضافة ، وعند تحرير الموضوع انزلي الى سطر جديد ثم تحولي الى نافذة HTML وأضيفي الصور كالتالي:

[code]<div style="text-align: center;">

<a href="رابط الصورة الأولى" >
<img src="رابط الصورة الأولى" width="150px" height="150px" /></a>

<a href="رابط الصورة الثانية" >
<img src="رابط الصورة الثانية" width="150px" height="150px" /></a>

<a href="رابط الصورة الثالثة" >
<img src="رابط الصورة الثالثة" width="150px" height="150px" /></a>

</div>[/code]

[url="http://lightbox-testing.blogspot.com/2010/02/blog-post.html"]مثال مباشر[/url]

عرض المصغرات في المثال 150 ممكن تعدلين حسب رغبتك


.

Om Hend يقول... 26 فبراير، 2013 11:14 ص

BARAKA ALLAH FIK WA JAZAKA KHAYRAN FI"LAN RAi"A

دليلك للمعلوميات يقول... 9 يوليو، 2015 3:15 ص

كشف تسربات
تحميل لعبة كراش
كتاب شمس المعارف

إرسال تعليق



تابع صفحتنا في شبكة قوقيل بلس واقترحها :

تابع صفحتنا في الفيسيبوك:

ليصل جديدنا إلى بريدك تفضل بالاشتراك