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

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

مميزات اضافة COLORBOX وأمثله حيه

  • الإضافة تأتي في خمسة أشكال ( Styles ) مميزه ورائعة يمكنك مشاهدة أمثله حية في هذه المدونة التجريبية ، تنقل بين الأشكال عبر القائمة العلوية.
  • الإضافة تدعم: الصور المفردة – وتعرض الألبومات بعدة طرق متنوعة وتدعم استخدام  لوحة المفاتيح للتنقل بين الصور – وتدعم مقاطع الفيديو من اليوتيوب وفيمو – والصفحات الإلكترونية PDF – وملفات الفلاش SWF – وجلب المواقع الخارجية . . .
  • قمت بالتعديل في الإضافة بحيث يُفعل التأثير على الصور وملفات الفلاش والكتب الالكترونية PDF بشكل تلقائي، فلن تضطر للتعديل في كود HTML كما سنرى لاحقاً ، وهذا يعني أن جميع الصور في مواضيعك القديمة سيسري عليها التأثير مباشرة.
  • يمكنك بسهولة إعادة تصميم شكل التأثير بالتعديل في ملف CSS الخاص بالإضافة، على عكس بعض الإضافات التي تضع الصور في ملف الجافا نفسه!
  • يمكنك اختيار المقاسات المناسبة لمدونتك لتظهر الصور ومقاطع وغيرها بتأثير صندوق الضوء
  • لا تقلق من ناحية تعطل روابط الإضافة فقد خصصت حساب خاص في Google Code لجميع الإضافات التي سأعرضها في مدونة البلوقر ولن أحذفها أبداً بمشيئة الله.
  • هناك إمكانيات فائقة لهذه الإضافة لمن شاء أن يستزيد ويتعمق يتفضل بزيارة موقعها الرسمي.



طريقة تركيب الإضافة

من لوحة تحكم المدونة توجه إلى " تصميم " ثم اختر " تحرير HTML " ابحث عن السطر التالي:
</head>


الآن فوقه مباشرة ، انسخ هذا الكود :


<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>
$(document).ready(function(){
$("a[rel='images']").colorbox({transition:"fade"}); 
$("a[rel='imagessamesize']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='slideshow']").colorbox({slideshow:true}); 
$(".youtube").colorbox({iframe:true, innerWidth:760, innerHeight:520}); 
$(".vimeo").colorbox({iframe:true, innerWidth:760, innerHeight:520});
$(".iframe").colorbox({width:"80%", height:"80%", iframe:true}); 
$('a[href$=jpg]').colorbox();
$('a[href$=jpeg]').colorbox();
$('a[href$=png]').colorbox();
$('a[href$=gif]').colorbox();
$('a[href$=bmp]').colorbox();
$('a[href$=JPG]').colorbox();
$('a[href$=JPEG]').colorbox();
$('a[href$=pdf]').colorbox({iframe:true, innerWidth:760, innerHeight:520});
$('a[href$=swf]') .colorbox({iframe:true, innerWidth:660, innerHeight:420});
});
</script>


السطر الأول: خاص باستحضار مكتبة Jquery التي تعتمد عليها الإضافة. السطر الثاني: خاص باستحضار الإضافة نفسها. السطر الثالث: خاص بشكل الإضافة أي CSS ولاحظ أن الشكل الموجود هنا style1 يمكنك اختيار style2 أو style3 أو style4 أو style5  بكل سهوله بمجرد أن تضع بدلاً من الرقم (1) رقم الشكل المطلوب سيتم تطبيق الشكل الجديد، نعم ليس هناك أي شيء مطلوب أكثر من ذلك.


طريقة تفعيل الإضافة خلال المدونة


   عند كتابة رسالة جديدة لمدونتك وتريد عند موضع معين تطبيق التأثير عليك استدعاء التأثير المناسب حسب نوع الملف هل هو صورة أم فيديو أم موقع خارجي، هذا الاستدعاء سيكون من خلال إعطاء قيم لـ ( rel ) أو قيمة لـ (class) في وسم الروابط ( a ) ، هذه القيمة ستطلب من الإضافة تفعيل تأثير صندوق الضوء للصور مثلاً أو الفيديو من اليوتيوب أو عرض فلاشي وهكذا وسأشرح الطريقة لاحقاً …

 Light bulb الخبر السار  إضافاتنا هذه ستعمل تلقائياً وبدون تدخل بالنسبة للصور وملفات الفلاش وملفات PDF ، الآن اذهب لمدونتك التجريبية وقم بتركيب الإضافة كما، أكتب رسالة جديد وارفع أي صورة في محرر بلوقر بالطريقة المعتاده وجرب التأثير بعد نشر الرسالة، فقط عليك أن تختار حجم للصورة أصغر من حجمها الأصلي، وجرب أيضاً ارفاق صفحات الكترونية PDF، وجرب أيضاً أن ترفق رابط لملف فلاشي SWF… سترى إن شاء الله أن تأثير صندوق الضوء سيعمل بشكل كامل وبدون تدخل.

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

جميع التأثيرات تعمل بوجود روابط تحت نصوص أو صور مصغرة ، وبالنظر في تحرير HTML سنجدها بالصيغة المبسطة التالية:

  1. <a href="URL"> TEXT </a>
  2. <a href="URL"> <img src="IMAGE"> </a>

    السطر الأول لتلك الروابط ( URL ) التي تكون تحت نص ، والسطر الثاني للروابط ( URL) التي تكون تحت صور مصغرة ، هذه هي الصورة البسيطة ولا تهتم لأي إضافات أخرى ، والآن لنرى كيف نكتب قيمة rel أو class لكل منهما :
  1. <a rel="X" href="URL"> TEXT </a>
  2. <a rel="X" href="URL"> <img src="IMAGE"> </a>

دائماً أكتب القيمة rel أو class  بين a  و herf حتى تضمن بمشيئة الله عدم الخطأ ، ولكن ماهي X ؟ ومتى نستخدم rel  أو class ، الجدول التالي سيجيب:


قيمة X
التأثير
rel="images" صورة متتالية
rel="imagessamesize" صور تعرض بمقاس واحد
rel="slideshow" عرض الصور كشرائح العرض
class="youtube" عرض فيديو من اليوتيوب
class="vimeo" عرض فيديو من قيمو
class="iframe" عرض موقع خارجي

لنطبق على مثال حقيقي وبالمثال يتضح المقالNerd



مثال تطبيقي : إضافة مقطع فيديو من اليوتيوب

نريد الآن عرض مقطع فيديو من اليوتيوب بتأثير صندوق الضوء ، وربما تعلم أن اليوتيوب لا يوفر طريقة لتختار فيها صورة بداية الفيديو أي قبل تشغيله ليبين محتوى الفيديو ، حسناً سنصمم صورة مصغرة مقتبسة من شاشة اليوتيوب ، ثم نرفعها عبر محرر بلوقر ، ثم نضع عليها رابط مقطع الفيديو من اليوتيوب ، بهذه الطريقة عندما يضغط زائر مدونتك على الصورة المصغرة سينتقل إلى صفحة أخرى ويترك مدونتك! وهذا مثال:

youtube

لن يتم تفعيل تأثير صندوق الضوء لأننا لم نضع قيمة لـ class في وسم الرابط – حسب الجدول -، الآن سنضع قيمة class تكون youtube ليتم تطبيق التأثير الخاص به ، من تحرير HTML  أضف هذه القيمة لتصبح هكذا:

<a  class="youtube"  href="http://www.youtube.com/embed/WZ9yif8vZGI?rel=0">
<img src="http://2.bp.blogspot.com/-grc_23PpFxY/TZn3XrTgEZI/AAAAAAAAANA/C9x7FIIcz88/s1600/youtube.png"></a>

لتكون النتيجة كالتالي:
youtube

التحكم في خصائص التأثير

للتعامل مع الإضافة ما سبق ذكره يكفي، ولكن لمزيد من الفهم الأعمق ولمعرفة كيفية التحكم بالإضافة ، لنرجع إلى الكود الذي تم تركيبه لتفعيل إضافة colorbox في المدونة ، ولنترك الثلاثة الأسطر الأولى التي تحدثنا عنها سنجد أسفلها شفرة جافا وسأعيد عرضها الآن :
  1. <script>
  2. $(document).ready(function(){
  3. $("a[rel='images']").colorbox({transition:"fade"});
  4. $("a[rel='imagessamesize']").colorbox({transition:"none", width:"75%", height:"75%"});
  5. $("a[rel='slideshow']").colorbox({slideshow:true});
  6. $(".youtube").colorbox({iframe:true, innerWidth:760, innerHeight:520});
  7. $(".vimeo").colorbox({iframe:true, innerWidth:760, innerHeight:520});
  8. $(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
  9. $('a[href$=jpg]').colorbox();
  10. $('a[href$=jpeg]').colorbox();
  11. $('a[href$=png]').colorbox();
  12. $('a[href$=gif]').colorbox();
  13. $('a[href$=bmp]').colorbox();
  14. $('a[href$=JPG]').colorbox();
  15. $('a[href$=JPEG]').colorbox();
  16. $('a[href$=pdf]').colorbox({iframe:true, innerWidth:760, innerHeight:520});
  17. $('a[href$=swf]') .colorbox({iframe:true, innerWidth:660, innerHeight:420}); });
  18. </script>

هذه الشفرة بمثابة غرفة تحكم لخصائص التأثير يمكن التعديل عليها أو الإضافة ، مثلاً إذا كنت ترغب في تغيير عرض مقاطع اليوتيوب فعليك أن تتوجه إلى السطر رقم (6) ثم تغير في قيمة الـ Innerwidth و Innerheight. كذلك لو كنت تريد أن تغير عبارة imagessamesize بأخرى قصيرة يمكنك استبدالها بالكلمة التي تختارها وذلك من السطر رقم (4) ، أيضاً لو كنت ترغب في عرض مقاطع الفيمو بمقاسين حسب الموضوع الذي ستكتبه يمكنك إضافة سطر آخر أسفل السطر رقم (7) وتسميه مثلاً vimeo2 وهكذا .. افتح مدونة تجريبية وتعلم !
أحب أن أشير أن التعديل الذي قمت به حتى تعمل الصور والفلاش والكتب الإلكترونية هو إضافة الأسطر (9) إلى (17) ، وهي تعني أن أي رابط ينتهي بصيغ الصور أو الفلاش أو PDF فقم بتطبيق تأثير colorbox  عليها ، الآن أطلق العنان وجرب فقد تستطيع إضافة أسطر أخرى لصيغ أخرى تعمل تلقائياً … وقد تستطيع أيها القارئ الكريم أن تجعل تطبيق الإضافة تلقائياً بالنسبة لليوتيوب والفيمو بإضافة سطر لهذه الشفرة ، عن نفسي لا أعرف ولا أفهم الجافا ولكني سأبحث !



خطأ: This Image could not be loaded

إذا واجهتك هذه الرسالة فاعلم أنها بسبب تأثير مفتاح المقاس في رابط بيكاسا الذي أشرت اليه في هذه التدوينة ، وهذا مثال لرابط صورة من بيكاسا لن يعمل عليها التأثير:

http://lh3.ggpht.com/_7QkA1GqKTpo/TZQt0qZEnJI/AAAAAAAAAXc/gkrbLeXhGEE/s1600-h/dropbox_header%5B6%5D.png

لاحظ أن مفتاح المقاس (s1600-h) موجود في الرابط قم بحذفه مع العلامة المائلة بعده أو التي قبله لا فرق  (s1600-h/) ليصبح هكذا:

http://lh3.ggpht.com/_7QkA1GqKTpo/TZQt0qZEnJI/AAAAAAAAAXc/gkrbLeXhGEE/dropbox_header%5B6%5D.png

وبهذا سيتم تفادي هذا الخطأ إن شاء الله

حل مشكلة: التعارض مع عارض صور بلوقر الرسمي!

هذا الفقرة لتحديث الموضوع؛ حيث أُضيف إلى مدونات بلوقر ميزة مشابهه لعرض الصور بطريقة منبثقة للمزيد حولها اضغط هنا ، عند النقر على أي صورة ستفتح الصورة مرتين مرة بتأثير إضافتنا هذه ومره بتأثير ميزة بلوقر الرسمية ، فلابد من الغاء ميزة بلوقر لتفادي هذا التكرار باتباع التالي:
  • توجه الى لوحة تحكم بلوقر ثم اختر "مشاركات وتعليقات"
  • من التبويب "مشاركات" اختر من القائمة المنسدلة الخيار "لا" وذلك للخيار المسمى "عرض الصور في العرض المبسط"

حفظ ملفات الإضافة في استضافه خاصة

روابط الإضافة إن شاء الله مضمونه لستَ بحاجة لأي استضافة أخرى ، ولكن ان شئت يمكنك رفعها على أي استضافة وأرشح لك dropbox لأسباب وضحتها في هذه التدوينة، أو مواقع قوقيل google sites لكن عليك أن تتنبه لضرورة تعديل روابط الصور في هذه الحال، يمكنك تنزيل ملفات الإضافة المعدلة من قبلي من هنا ، أو زر موقع المطور لنسخة خام مع العلم أن الاصدار الذي اعتمدت عليه هو Colorbox 1.3.16 .

Clock إن شاء الله سأعرض في تدوينة لاحقة إضافة أخرى تعطي تأثير صندوق الضوء lightbox ولكن للصور فقط ، ميزتها السهولة المتناهيه ، وأيضاً قمت بتعريبها ، وتحسين مظهرها ….

تحاياي Good luck

التعليقات: 85

مدونة وذكر يقول... 12 أبريل، 2011 1:30 م

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

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

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

حياكِ الله ، وهذا بعض من الذي عندكم يا أخيه

تحاياي

أبو إياد يقول... 12 أبريل، 2011 11:45 م

أحسنت أخي الكريم درس مهم جدا ويستحق التطبيق ،واصل تميزك

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

@أبو إياد : حياك الله وبياك ، بضاعتي بسيطة اسال الله لها القبول وأن ينفع بها ، أهلاً وسهلاً

sossi يقول... 16 أبريل، 2011 7:27 م

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

مدونة ابو معاذ يقول... 16 أبريل، 2011 10:48 م

اخ ممكن توضح اكثر بالنسبة لطريقة انبثاق الفيديو ؟

جاسر الحربي يقول... 17 أبريل، 2011 7:27 ص

@sosso : وجزاك الله خيراً.

@ابو معاذ :

1. وأنت في محرر بلوقر وفي وضع " تأليف" ارفع صورة من تصميمك تدل على الفيديو وان شئت بدون صورة لك ذلك.
2. ضع المؤشر على الصورة ثم أرفق تحتها رابط بالطريقة العادية، هذا الرابط هو رابط ملف فيديو اليوتيوب.
3.الآن ادخل على وضع " تحرير html
4. أكتب : class="youtube"
أين تكتبه ؟
الجواب/ بين a و herf

جرب إذا واجهت مشكلة سجلها

مدونة بكل الألوان يقول... 7 مايو، 2011 4:16 م

جزاك الله خير اخي هذة الاضافات التي يحتاجها كل مدون عربي

الصراحة استفدنا منك الكثير والمفيد

جاسر الحربي يقول... 8 مايو، 2011 11:06 ص

وجزاك الله خيراً كذلك وحياك الله أخي وبياك

غير معرف يقول... 14 مايو، 2011 8:19 م

شكرا جزاك الف خير

أسامة يقول... 26 مايو، 2011 1:57 م

الله يعطيك الف عافية ما قصرت والله
شرح رائع ومفصل .
بس عندي سؤال ؟! هل الاضافة هذه تمشي مع صور بيكاسا ؟؟؟
انتظر اجابتك اخي الكريم
تحياتي

جاسر الحربي يقول... 29 مايو، 2011 1:46 م

حياك الله أخي أسامة

نعم يمكنك استخدام بيكاسا إن شاء الله ، ولكن انتبه لما أشرت له في آخر المقال اذا واجهت رسالة خطأ.

تحياتي العاطرة

محمد يقول... 22 يونيو، 2011 4:21 م

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

This content cannot be displayed in a frame

To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame.

What you can try:
Open this content in a new window

عند الضغط على فتح اللينك بنافذه جديدة يعرض الفيديو على اليوتيوب

واستفسار اخر قمت بتحميل ملف pdf على مستندات غوغل لم يعمل التأثير عليه هل يجب ان ارفع الملف على استضافة اخرى

مشكور على جهودك بتمنالك التوفيق

جاسر الحربي يقول... 22 يونيو، 2011 10:39 م

@محمد السلام عليكم

رسالة الخطأ الأولى: يبدو لي أنه بسبب إعداد الأمان في المتصفح IE ، جربت الإضافة مع الإصدار التاسع IE9 ويعمل دون مشاكل.

بالنسبة لملف pdf أعتقد أن مستندات قوقيل لا توفر روابط مباشرة للمفات ، ويمكنك استخدام موقع dropbox هذا الموقع جداً رائع وقد خصصت له تدوينة تحدثت عن تميزه وتفرده

DropBox لحفظ جميع أنواع
الملفات بروابط مباشرة

محمد يقول... 23 يونيو، 2011 6:37 م

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

شكله المتصفح لكن بما انه الاضافة ما بتتوافق مع كل المتصفحات بتفضل الاضافة مو مجدية كثير لكنها جميلة على كل حال ممكن استخدمها للصور بتنفع على كل المتصفحات مشكور جدا جاسر ما قصرت

جاسر الحربي يقول... 23 يونيو، 2011 10:36 م

@محمد

شكراً لك :) ، الخدمة ليست جديدة بل قديمة ومشهوره اطمئن من هذه الناحية ، لكن ان كنت تقصد سرقة الحساب فهذا ممكن طبعاً ، سوني وقوقيل وميكروسوفت تعرضوا لهجمات واختراقات كبيرة ، هذه حلاوة الانترنت وتلك مرارته!

أما الإضافة فهي مجربة على: الفيرفوكس | الكروم | السفاري | انترنت اكسبلورر من الاصدار السادس حتى التاسع | والاوبرا كذلك
هل بقي متصفحات غيرها :)

sossi يقول... 28 يونيو، 2011 5:55 ص

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

جاسر الحربي يقول... 28 يونيو، 2011 8:18 ص

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

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

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

admin يقول... 12 يوليو، 2011 1:08 ص

اخي ربنا يبارك فيك ماشاء الله موضوعاتك رائعة مثلك
وفقك الله
اريد مساعدتك في شيء
عندي مدونة فيديوهات ودا الرابط بتاعها http://tiebaalhorramovies.blogspot.com/
المهم انا لما بحط الفيديو لا يظهر لي صورة مصغرة للفيديو قبل فتحه ياريت لو عندك حل للمشكلة دي تقولي انا في انتظار ردك
وجزاك الله خيرا

مدونة كن داعيا للخير يقول... 4 سبتمبر، 2011 12:12 ص

شكرا جزيلا على المعلومات القيمة

مدونة ديزين فور عرب يقول... 4 سبتمبر، 2011 6:41 ص

جزاكم الله خيرا
على المعلومات الرائعة

يشرفنى زيارتك

مدونة ديزين فور عرب

http://des4-arab.blogspot.com

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

حياكم الله وبياكم

Mr.Mark يقول... 16 سبتمبر، 2011 3:11 ص

اخي جاسر شكرا لك على جهدك المتواصل من اجل تطوير البلوجر

انا استخدم الاضافه في عرض الصور فقط ولاكن عند النقر على الصورة لاتظهر بحجمها الكامل ماهو التعديل المطلوب لكي تقوم الاضافه بعرض الصورة بحجمها الكامل او حجم مناسب للشاشه مع العلم اني استخدم الكود التالي في المدونه من اجل عرض الصورة في التدوينه بحجم مناسب
.post img {
max-width: 540px;
width: expression(this.width > 540 ? 540: true);
}

جاسر الحربي يقول... 17 سبتمبر، 2011 11:41 ص

أكتب لي رابط مدونتك فضلاً

القارئ والمنشد محمد سمير صادق يقول... 29 سبتمبر، 2011 5:55 ص
أزال المؤلف هذا التعليق.
القارئ والمنشد محمد سمير صادق يقول... 29 سبتمبر، 2011 5:59 ص
أزال المؤلف هذا التعليق.
القارئ والمنشد محمد سمير صادق يقول... 29 سبتمبر، 2011 6:00 ص

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

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

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

حسناً أخي محمد .. أضحى عندي يقين أن كل من يقول أن أحد الإضافات التي أقدمها لا تعمل ـ يستخدم إضافات متعددة وفي كل إضافة يكرر سطر استيراد مكتبة الجي كيوري التي تعتمد عليها كثير من الإضافات.

أقترح عليك أن تزيل إضافة الأخبار فأنت مُنشد ومقرئ - ما شاء الله - ومدونتك ليست غرفة أخبار ، كذلك أعد النظر في كل الإضافات التي ركبتها. اترك فقط تلك الإضافات التي لها علاقة بموضوع مدونتك.

حاول وان لم تفلح أرسل لي قالب مدونتك عبر البريد في صفحة راسلني، وساعدني بذكر الإضافات التي ركبتها ومن أي موقع , حتى أحاول أن أسوي بين الإضافات وأصلح بينهم :) قدر جهدي.

لعله خير إن شاء الله

القارئ والمنشد محمد سمير صادق يقول... 30 سبتمبر، 2011 1:33 ص

اخي الحبيب جاسر
ارجو منك فحص الرسائل الواردة في بريدك الالكتروني وشكرا لك

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

حُلت المشكلة بفضل الله ، الرجاء تجربة الإضافة الآن

القارئ والمنشد محمد سمير صادق يقول... 1 أكتوبر، 2011 8:07 م

الشكر لله اولا ثم الشكرا لك اخي جاسر اللهم اجعلة في ميزان حسناتك وجزاكم الله خيرا

جاسر الحربي يقول... 1 أكتوبر، 2011 11:18 م

وجزاك الله خير أخي الفاضل

غير معرف يقول... 5 أكتوبر، 2011 7:11 م

ما تلك الجداول و الأوامر كلها أنت تعرف ان التدوين عمل مرهق ... تجنب تلك الإضافات التي لا تدعم التلقائية هدا الموضوع لا يبث بأي احترافية..لا حول و لا قوة الا بالله العظيم

علي العسبلي يقول... 15 أكتوبر، 2011 12:05 م

أفضل إضافه رئيتها بحياتي




مدونة غرائب

dana يقول... 26 أكتوبر، 2011 6:46 م

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

جاسر الحربي يقول... 26 أكتوبر، 2011 10:56 م

@غير معرف: من أبسط حقوقك انك تعبر عن رأيك واصبر على مصابك

@ علي: مشكور حفظك الباري

@دانة: الله يعافيك ويبارك فيك ويسددك ممتن لتلك التوقيعات التي تبث في النفس بهجه

غير معرف يقول... 27 نوفمبر، 2011 8:04 م

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

جاسر الحربي يقول... 29 نوفمبر، 2011 6:24 م

العفو أخي الكريم

إذا كانت تلقائية فأظن أن التعارض قد ينتج إما بالغاء تأثير أحدهما ، أو ينتج عنه خطأ وهو الأقرب.

وسواء حدث تعارض أم لم يحدث لابد من الغاء أحدهما لأنها ستشكل عبئ على المدونة وسرعتها ، فقراءة ملفات الإضافة سواء جافا أو css ستسهلك وقت زمني ..

حياك الله

Masrawy يقول... 20 ديسمبر، 2011 5:40 ص

مشكور اخى الحبيب بس ياريت تشرحها فيديو افضل عشان انا مش فاهم حاجه خالص بصراحة من الكتابه

جاسر الحربي يقول... 22 ديسمبر، 2011 2:59 م

أخي مصراوي ..

افتح مدونة جديدة وطبق الطريقة ، لا يربكك طول الشرح ، وأخبرني في النقطة التي تعثرت في تفعيلها ، وسأساعدك إن شاء الله ..

حالياً قد لا أجد وقت لعمل فيديو ، ولكن سأحاول ان شاء الله

Masrawy يقول... 24 ديسمبر، 2011 1:56 ص

مشكور اخى جاسر جربت الصريقة فعلا ونفعت على قالب افتراضى. ومنفعتش على القالب بتاعى للاسف

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

هذه مشكلة تعارض الإضافات ، صادفت الكثير من الإخوة

مصطفي جبر يقول... 13 أغسطس، 2012 10:13 ص

السلامن عليك اخي جاسر كل عام وانت بخير انا اسف علي ازعاجك الاضافة لم تعمل معي لا اعرف لماذا
ولله هل هناك انا اعرف ان العيب من قالب مع العلم انني لااريد تغيير القالب

ارجو المساعدة

وهذه مدونتي
http://blogg-face.blogspot.com/

جاسر الحربي يقول... 13 أغسطس، 2012 8:17 م

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

مكتبة الجي كيوري أرفقتها في قالبك تقريباً 7 مرات!
هناك إضافة lightbox مضافة وحسب مسار ملفاتها هي من أبي إياد.
عندك عدد كثير من ملفات الجافا ..

هذه ظروف مهيئة جداً لتعارض ملفات الجافا

مصطفي جبر يقول... 30 أغسطس، 2012 7:41 م

شكرا علي ردك
نعم اخي كل هذا بقالبي

نعم صحيح من ابو اياد ولكن انا ازلتها مؤخرا

وهل هناك حل اخي لهذا
ارجو الاجابة وشكرا لك استاذ جاسر

amir aliraQi يقول... 14 نوفمبر، 2012 11:47 م

مع الاسف لم تعمل معي الاضافة
كان عندي كود يضع في HTML/JavaScript
يفعل مع الصور فقط وجدا جميل لاكنه لا عمل ايضا

ارجو من الاخ جاسر الحربي اذا كان يعرف المشكلة
رابط مدونتي : http://aliraqia.blogspot.se/

جاسر الحربي يقول... 26 نوفمبر، 2012 1:23 م

السلام عليكم

حياكم الله ، يا اخوة إضافات lightbox غالباً تتعارض مع بعضها الآخر

محمد يقول... 28 ديسمبر، 2012 11:51 م

مشكور على جهودك
بالنسبة لاضافة الصور تمام
لكن بالنسبة لاضافة الفيديو لم استطيع الاضافة يظهر مربع ابيض مكان الفيديو عندما اضيف الفيديو الخاص بشرحك تتم العملية بنجاح لكن لفيديو آخر لا استطيع
بالنسبة للينك الفيديو اي لينك للفيديو انسخ بالضبط
شكرا

جاسر الحربي يقول... 30 ديسمبر، 2012 10:13 ص

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

ضع رابط تطبيقك للتأثير لأعاينه

غير معرف يقول... 30 ديسمبر، 2012 5:37 م

والله منا فاهم حاجه

جاسر الحربي يقول... 30 ديسمبر، 2012 6:27 م

استعن بصديق :)

غير معرف يقول... 30 ديسمبر، 2012 11:56 م

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

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

السلام عليكم

إذا كانت صورة تحتها رابط لملف للتنزيل فلن يكون تأثير Lightbox مفعل ، أما ملفات الإضافة فهي مستضافه في حساب خاص بالمدونة في google code وخصصتها للإضافات التي اقدمها ولن أحذفها إن شاء الله.
ولكن أنصح بشدة حفظها ورفعها في حساب خاص بمدونتك .

غير معرف يقول... 6 يناير، 2013 5:06 م

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

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

أزال المؤلف هذا التعليق.

غير معرف يقول... 7 يناير، 2013 8:04 م

جزاك الله كل خير استاذ جاسر انا اتبع نفس الطريقة بالفعل ولكن عند رفع ملف الاستيايل بمفرده الذى اريده وهو الاستايل(1)لا يعمل

ووجدت ان المشكلة تكمن فى رقم اختيار الاستايل رقم1

http://alblogger-gen.googlecode.com/svn/trunk/colorbox/style1/colorbox.css

فاعند تغير الملف باخر على حسابى يختفى تلك الرقم وسبح الملف هكذا
http://----------------------------/colorbox.css


ولا تعمل الاضافة لعدم وجود هذا المسمى style1


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

جاسر الحربي يقول... 7 يناير، 2013 9:00 م

أزال المؤلف هذا التعليق.

غير معرف يقول... 9 يناير، 2013 7:06 ص

انا كمان حاولت كتير يا استاذ جاسر رفع ملف الاضافة ولم تفلح معايى ياريت لو تتكرم حضرتك وتشرحلنا الطريقة الصحيحه لرفع الملف

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

أزال المؤلف هذا التعليق.

غير معرف يقول... 9 يناير، 2013 8:06 ص

استاذ جاسر مفيس فايده بردك حاولت بكل الطرق ولم تنجح عمليه الرفع مع ان كل الاضافات انا برفعها على حسابى بدون ادنى مشكلة اول مره تحصلى المشكلة دى ومتعملش الاضافة دى اعتقد ان السبب الاساسى بسبب القيمية الى كلمت حضرتك عليصا فى الstyle1 اعتقد انى لزم ارفع جميع ملف الاستايل style فاياريت لو حضرتك تتكرم وتدينى ملف (الstyle1 رقم واحد بس ) بدون بقيت style1 يبقى جزاك الله كل خير وده رابط مدونتى الى حضرتك طلبته منى http://blog-islamiah.blogspot.com/

فى انتظار ردك اخى جاسر

غير معرف يقول... 9 يناير، 2013 8:12 ص

عذا اخى جاسر لقد نسيت الاجابة عليك بالفعل قومت برفع مجلد الصور واستبدال الكلمات مثل images/controls.png بروابط الصور التى قومت برفعها ولم تعمل؟؟ لا اعلم ماهو السبب لقد اصبتنى الحيرة عن جد

جاسر الحربي يقول... 9 يناير، 2013 9:20 ص

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

عفواً قد أخطأت وأحلت الى موضوع غير الذي أقصده ، رابط الموضوع الصحيح:
http://www.alblogger.com/2011/10/css-html-google-code.html

إذا رفعت الملفات بطريقة مباشرة لن تعمل ، لابد من اتباع الشرح في الدرس واستخدام برنامج مثل TortoiseSVN وقد وضحت السبب في عدم عملها عند رفعها مباشرة.

style1 مجرد مجلد ، وعلى أي حال يمكنك الاطلاع وتنزيل كافة الملفات من خلال هذا الرابط واستخدامها كيفما شئت:

http://alblogger-gen.googlecode.com/svn/trunk/colorbox/

غير معرف يقول... 9 يناير، 2013 8:29 م

شكرا لك اخى جاسر وجارى العمل وعند الانتهاء وساخبرك بالنتيجة عند الانتهاء جزاك الله كل خير

غير معرف يقول... 12 يناير، 2013 10:15 ص

لا يوجد اى امل اخى جاسر فى اعادة رفع الملف على حسابى ارجوا ان تمدنى برابط الموضوع الاصلى للاضافة وجزاك الله كل خير حيث انك قومت برفع ملفات الاضافة بطريقة خاطئه (عجيبه!!) مما يجعل اعادة رفعها مره اخرى على حساب اى شخص امر من المستحيل ولا بد ان تقوم باعادة تهيئة الاضافة ورفع جميع ملفاتها دفعه واحده لتعلم الاضافة لذالك ارجوا ان تمدنى برابط الموضوع للاضافة الاصلى وشكرا لك

جاسر الحربي يقول... 12 يناير، 2013 7:43 م

أخي الفاضل

الإضافة ترفعها على "مشروع" في قوقل كود، يمكنك إنشاء مشروع جديد ورفع الإضافة اليه ، لا يوجد أي مشكلة ولا تعارض !!


-لم أفهم ماذا تعني برابط الإضافة الأصلي ، على أي حال ...

رابط الإضافة من المطور: http://www.jacklmoore.com/colorbox
ويمكنك تحميل الإضافة كامله كملف مضغوط من خلال هذا الرابط
http://www.jacklmoore.com/colorbox/colorbox.zip
وهي اصدار احدث بالمناسبة


رابط ملفات الإضافة التي قدمتها:
http://alblogger-gen.googlecode.com/svn/trunk/colorbox
جميع الملفات مكشوفه من خلال هذا الرابط


بالتوفيق

غير معرف يقول... 13 يناير، 2013 2:19 ص

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

بالتوفيق لك وشكرا لك مره اخرى

جاسر الحربي يقول... 13 يناير، 2013 10:00 ص

مبروك عليك اخيرا نجحت

انا رفعتها بطريقة صحيحه والا كيف تراها تعمل في المدونة التجريبية !! ، ويبدو انك لم ترفع كامل الاضافة من صور وملفات css وهي ضرورية والارتباطات فيها نسبية الى موقعها فقط !

ساتريكل يقول... 6 فبراير، 2013 3:09 م

شباب ممكن حد يصمم لى واحدة لمدونتى هذة
gyptsatiricalcomedy.blogspot.com
وبها صفحة الفيسبوك هذة
https://www.facebook.com/egypt.Satiricalcomedy

ابوايمان السفر يقول... 21 مايو، 2013 5:22 ص

السلام عليكم ورحمة الله وبركاته
مشاء الله تبارك الله عليك استاذنا جاسر
انت راااائع شرحك لدروس شامل وكامل ولكامل وجه الله
كم اتمنا من الله اني اصير عندك تلميذ
لاستفيد منك ومن علمك المبارك باذن الله
http://up.7cc.com/upfiles/QEC02759.jpg

[img][/img]

MOHAMMED AL-DASHAN يقول... 22 مايو، 2013 3:48 ص

السلام عليكم ورحمة الله وبركاته اشكرك جزيل جزيل الشكر على الاضافة الرائعة جدا

اتمنى تعطيني حل في الصورة المصغرة لمقطع اليوتيوب لانها كبيرة جدا انا اريدها 200عرض و طول 150

اتمنى ترد لي في اسرع وقت ممكن

جاسر الحربي يقول... 22 مايو، 2013 2:39 م

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

@ابو ايمان: شكراً لمشاعرك الطيبة ، وفقك الله وحياك دائماً ب3



@محمد: عادي أخوي قم بتصغيرها ببرنامج الرسام أو باي برنامج آخر ، أتمنى أكون فهمت سؤالك

.

.

ahmed zoom يقول... 25 مايو، 2013 10:08 ص

ممكن اضافة لليوتيوب فقط.

وشكرا على مجهودك وبالتوفيق

زووم بلاحدود- اخبارية-تكنولجيا-متنوعة-نصائح-طرائف-اسلاميات

Shana Noor يقول... 9 يونيو، 2013 10:36 م
أزال المؤلف هذا التعليق.
Shana Noor يقول... 9 يونيو، 2013 10:37 م
أزال المؤلف هذا التعليق.
Shana Noor يقول... 9 يونيو، 2013 10:38 م



طب سؤال يهمني كتير علي اي قالي يعمل ام قوالب معينة


....وتاني حاجة هو اي فيديو ولا لازم يكون يوتيوب ...ضروري رد عليا

Shana Noor يقول... 10 يونيو، 2013 5:30 م

عملت كل اللي قولت عليه وما اشتغلت
http://egy-y.blogspot.com/2013/06/blog-post_10.html
مش عارفة ايه السبب
ساااااااااااااااعدني بجد

جاسر الحربي يقول... 11 يونيو، 2013 2:31 م

السلام عليكم

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

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

Shana Noor يقول... 11 يونيو، 2013 8:02 م
أزال المؤلف هذا التعليق.
Shana Noor يقول... 11 يونيو، 2013 8:06 م


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

وكل ما اضع الاكواد فوق الـهيد واعمل حفظ واعمل خروج يقول لم يتم حفظ التغيرات ... بالله عليك ساعدني

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

السلام عليكم

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

وهذه هي الإضافة التي ذكرتها :

[code]<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<style type='text/css'>
/* jQuery lightBox plugin - Gallery style */
#gallery {
background-color: #444;
padding: 10px;
width: 520px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>
<script src='http://lightboxabuiyad.googlecode.com/svn/jquery.lightbox-0.4.js' type='text/javascript'></script>
<link href='http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.css' media='screen' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
$(function() {
$('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').lightBox();
});
</script><font size='0'><a href='http://www.pergola-bois-terrasse.org'></a></font>[/code]

ع2 السطر الأخير فيه رابط لموقع مقدم الإضافة مختفي لأن حجمه صفر ، وهذه من اساليب الترويج السيئة والتي تستغل المستخدمين ج8 ..

منتديات مواويلي يقول... 20 أغسطس، 2013 5:13 م

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



تحياااااااتي

Fethi Belkacemi يقول... 12 يوليو، 2014 2:41 م

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

و الله أخي لم أجد كلمات أعبر بها عن شكري و إمتناني لك إلا الدعاء لك بالصحة و العافية و زيادة العلم

أبحث كثيرا في الانترنت و خاصتا قراءة المواضيع الدروس لحد الان لم أجد شرحا يقارب هذا الشرح

طريقة سلسة ومفيدة اكثر حتى من لايعرف شيئا يتعلم ماشاء الله

شكرا شكرا شكرا و ألف شكر

abdelrahman khaled يقول... 20 أغسطس، 2014 6:25 م

شكرا جزيلا لك على الاضافة الروعة

لكن كنت اريد مثلا ان اضيف زر او اى شىء اسفل الصورة داخل الصندوق

كيف هذا !

Ayana tech يقول... 4 ديسمبر، 2014 3:39 م

استاذ جاسر انا محتاجلك كثير
اولا انا لدي مكتبه جي كيوري اصدار 1.10.2
عند اضافه colorbox بدون مكتبه جي كيوري التي في الموضوع لاتعمل
قمت بأضافه مكتبه الجي كيوري التي في الموضوع اصبحت تعمل ولكن الاضافات الاخري التي تعتمد علي الاصدار الذي كان لدي 1.10.2
لماذا مكتبه الجي كيوري لدي لاتعمل الا مع اضافه واحده فقط عند إضافه اي اضافه اخري لاتعمل
وعند تكرير مكتبه الجي كيوري لاتعمل الاضافات باكملها
وهل هناك تعارض بين الاضافه colorbox ومكتبات جيكيوري بالاصدارات التي تختلف عن التي في الموضوع
للمعاينه : http://ayanatech.blogspot.com

BASHAR TERRY يقول... 26 سبتمبر، 2015 1:04 ص

ما شاء الله تبارك الرحمن . فعلا تستحق لقب مدووووون

إرسال تعليق



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

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

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