
في آخر تدوينه شرحت إضافة 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 ، بالإضافة طبعاً إلى الأزرة …. وهكذا
واخيراً عن نفسي أفضل الإضافة السابقة ، لأنها تؤدي كل ما تؤديه هذه الإضافة وأكثر ، ولكن كما أسلفت هذه أسهل للمبتدئين
التعليقات: 30
السلام عليكم
بارك الله فيك اخي الكريم مجهود رائع
والله خبرات نفتخر بها وفقك الله وسدد خطاك
وعليكم السلام ورحمة الله
وفيك بارك الله يا أخيه
جزاك الله خيراً
وجزاك الله خيراً كذلك :)
شكرا جزيلا لك وبارك الله فيك على موقعك الرائع
ولكن يا طيب لم تعمل معي الاضافة على فيرفوكس او جوجل كروم على المدونة التالية:
http://engrimawi.blogspot.com/
السلام عليكم
أخي الفاضل أولاً أشكرك على طيب كلامك
أما بالنسبة للإضافة فجربها أولاً على مدونة تجريبية خالية من أي إضافات أخرى ، غالباً إضافات الجافا لا تعمل بسبب إضافات أخرى ، وهذا من أبرز عيوب كثرة الإضافات في المدونات.
ويبدو أنك مركب إضافة مشاركة صور المدونة قد يكون بينها وبين هاته الإضافة تعارض ، ولكن اقطع الشك باليقين بتجربتها على مدونة جديدة
الإضافة تعمل على الفيرفوكس والكروم والاكسبلورر التاسع
بارك الله فيك
أهلاً أم نضال ..
وفيك بارك الله
أخي بارك الله فيك أستعمل قالب مدونة ذئيب و هذه الخاصية لا تعمل عندي
جربها اولا على مدونة تجريبية، ثم طبقهر على قالب ذؤيب، وغالبا ادا لم تعمل مثل هذه الاضافات يكون بسبب كثرتها في القالب الواحد للتعارض طبعا.
اخي جاسر تحية طيبة وبعد
راح اتعبك معي اخي العزيز
اريد هذة الاضافه ولاكن الاصلية بمعنى باللغة الانجليزية + اريد حذف كلمة next يعني عرض الصور يكون صورة صورة + اريد ان تعرض الاضافه الصورة بحجمها الاصلي واذا كانت الصورة كبيره تعرض بشكل مناسب على قد حجم شاشه الزائر
في انتظار ردك اخي العزيز
تحياتي
يمكنك تركيب الإضافة من الموقع الأجنبي والرابط موجود أعلى التدوينة ، بعد ذلك يمكنك عرض الصور مفردة كما تريد.
أو استخدم هذه الإضافة:
تأثير LightBox للصور ومقاطع اليوتيوب والفلاش والمواقع وأكثر!
السلام عليكم انا اضفت بالفعل وعمل بنجاح ولكن ظهرت مشكلة معى هو ان عندما اضغط على الصورة تكبر الصورة عندى مرتين مرة ب Lightbox ومرة اخرى عادية بدون اطار انا اعجبتنى Lightbox وانا اريد ازالة الظهور العادى وعايز الصورة تكبر بس Lightbox
ارجوا من حضرتك حل هذة المشكلة وممكن تزرو مدونتى وتدوس على الصورة وتشوف تكبير الصورة على شاشتين مش شاشة واحدة
http://sta2rdotcom.blogspot.com/
وشكرا
وعليكم السلام ورحمة الله وبركاته
اختبرت الإضافة في مدونتك وهي تعمل بشكل رائع مثل ستائركم :) ، وقد اختبرتها على كل من : الكروم - فيرفوكس - سفاري - اوبرا - ie9 ..
جميع المتصفحات تدعم الإضافة بدون مشاكل ..
انا شاكر لمجهودك يااخ جاسر انا بالفعل نزلت كود يمنع ظهور الشاشة العادية لكن فى نفس الوقت منع تشغيل بعض الادوات مثال انا فى المدونة ممكن اقسم الموضوعات على شكل شبكة او تفاصيل الكود اللى انا نزلته عشان يمنع ظهور الوضع العادى ويشغل بس اللايت بوكس منع تشغيل هذة الاداة وادخل على مدونتى وانت تعرف وكمان انواع المنتجات مش شغالة
الكود اللى ضفته ومنع التكبير العادى وشغل بس اللايت بوكس نزلته من المدونة دى ادخل عليها وشوفة
http://www.m5tar.blogspot.com/2011/09/lightbox-feature-on-blogger-and-how-to.html
وهل ممكن اعدل فيه عشان اشغل كل الادوات التانية وأمنع فيه ظهور التكبير العادى بتاع بلوجر واشغل تكبير اللايت بوكس
وشكرا
اخ جاسم بعد التحية معلش انا كتبت ليك ان سبب عدم تشغيل بعض الادوات عندى فى المدونة كان سببوا كود مانع ظهور عملية التكبير بتاعت بلوجر فى الحقيقة مش هو السبب لانى أكتشفت ان كود اللايت بوكس هو السبب هو اللى بيمنع تشغيل بعض الادوات عندى فى المدونة لانى جربت اشيل كود المنع بردو الادوات مشتغتلتشى لكن لما شيلت كود اللايت بوكس من اساسة اشتغلت انا اسف على ازعجك بس اتمنى تفدينى فى الموضوع ده وجزاكم الله خيرا
السلام عليكم ..
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>
وأنا في شرحي ذكرت أن الموضع يكون ( قبل )
فحاول أن تغير موضع الكود وجرب ..
إذا لم تنجح ارسل لي القالب بالاضافات التي كانت قبل تركيبك للغضافات اللاايتبوكس .. الى بريدي الموجود في صفحة راسلنا
وسأحاول أشخص المشكلة حسب جهدي
تحاياي
شكرا على مجهودك اخ جاسر انا فعلا جربت تنفيذ الامر زى ماقولتلى وبردوة لم تنجح ممكن تقولى ازاى اقدر ابطل تكبير الصورة العادى من بلوجر من غير كود المنع وعن طريق لوجة التحكم
ثانيا ارسلك ازاى القالب ومفيش طريقةعندك اقدر احملك القالب عليها فى الموقع عندك ولك جزيل الشكر
السلام عليكم أخي شكرا على المجهو و المدونة الاكثر من رائعة ولكن الإضافة لم تعمل معي أيضا كيف الحل ؟
وعليكم السلام ..
العفو أخي الكريم ، جربها في مدونة جديدة ستعمل بإذن الله
وان لم تعمل أضف لي رابط المدونة
.
مدونة اكثر من رائعة.
أشكر لك تعليقك الطيب ومرورك المبهج
صباحك خير أخي ..
عملت الاظافة تشتغل معي تمام ، بس تعطل علي سلايد شو مع اني اريد الاضافتين
@أصيل: التعارض في إضافات الجافا أمر وارد جداً
السلام عليكم ورحمة الله وبركاته
نفذت الطريقة على مدونة تجريبية لكن واجهتني مشكلة وهي ظهور الشريط العلوي فوق الصور هذا رابط صورة للتوضيح
https://lh4.googleusercontent.com/-j01aILLhzgI/UScrJGvprMI/AAAAAAAACZo/pePZbnmMgh4/s902/Sans+titre.bmp
اتمنى ان تساعدني بحثت طويلا عن طريقة انشاء البوم صور وأود ان يبقى الزوار في مدونتي يعني البومي الحالي ينقلهم الى بيكاسا هذا مثال بتقنية اللايت بوكس كما اعتقد اود ان يكون الالبوم مشابها لهذا هل من طريقة
http://www.sarreve.fr/?page_id=31
يعني اريد ان اجد حلا لوضع الصور على شكل جدول مثلما هو موضح بالموقع ثم عند الضغط تكبر الصور ولا باس ان تكون متتالية يعني يوجد كلمة سابق تالي وبارك الله فيك
وعليكم السلام ورحمة الله وبركاته ،،
أعتقد أنه تعارض تنسيق بسبب تنسيق القائمة العلوية وتحديداً قيمة 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 ممكن تعدلين حسب رغبتك
.
BARAKA ALLAH FIK WA JAZAKA KHAYRAN FI"LAN RAi"A
كشف تسربات
تحميل لعبة كراش
كتاب شمس المعارف
اذا امكن يا اخى تحديث الروابط لانها لا تعمل
إرسال تعليق