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

أسهل طريقة لتفعيل تأثير 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

التعليقات: 30

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

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

Jaser Alharbi يقول... 23 أبريل 2011 في 8:49 ص

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

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

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

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

Jaser Alharbi يقول... 24 أبريل 2011 في 11:04 م

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

IT Blog يقول... 14 يوليو 2011 في 1:00 م

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

Jaser Alharbi يقول... 14 يوليو 2011 في 2:58 م

السلام عليكم

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

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

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

Asma Rahmouni يقول... 19 أغسطس 2011 في 4:12 م

بارك الله فيك

Jaser Alharbi يقول... 20 أغسطس 2011 في 8:33 ص

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

غير معرف يقول... 1 سبتمبر 2011 في 4:10 ص

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

Jaser Alharbi يقول... 4 سبتمبر 2011 في 9:23 م

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

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

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

تحياتي

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

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

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


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

ستائر.كوم يقول... 22 مايو 2012 في 3:02 م

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

Jaser Alharbi يقول... 22 مايو 2012 في 8:26 م

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

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

ستائر.كوم يقول... 23 مايو 2012 في 5:13 ص

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

وشكرا

ستائر.كوم يقول... 23 مايو 2012 في 5:55 ص

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

Jaser Alharbi يقول... 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>

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

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

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

تحاياي

ستائر.كوم يقول... 24 مايو 2012 في 3:27 ص

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

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

Ze Author يقول... 21 يونيو 2012 في 6:31 م

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

Jaser Alharbi يقول... 23 يونيو 2012 في 8:11 ص

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

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

.

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

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

Jaser Alharbi يقول... 25 أغسطس 2012 في 11:11 م

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

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

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

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

Jaser Alharbi يقول... 26 يناير 2013 في 7:56 ص


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

Rim Nsiri يقول... 22 فبراير 2013 في 11:32 ص

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

Jaser Alharbi يقول... 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 ممكن تعدلين حسب رغبتك


.

Rim Nsiri يقول... 26 فبراير 2013 في 11:14 ص

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

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

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

ahmed el naddar يقول... 21 مايو 2017 في 4:07 م

اذا امكن يا اخى تحديث الروابط لانها لا تعمل

إرسال تعليق