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

من أكثر التأثيرات الجمالية والاحترافية التي تضاف إلى المواقع تأثير صندوق الضوء أو 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 ) ، هذه القيمة ستطلب من الإضافة تفعيل تأثير صندوق الضوء للصور مثلاً أو الفيديو من اليوتيوب أو عرض فلاشي وهكذا وسأشرح الطريقة لاحقاً …

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

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

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

<a href="URL">   TEXT   </a>


<a href="URL">   <img src="IMAGE">   </a>

    السطر الأول لتلك الروابط ( URL ) التي تكون تحت نص ، والسطر الثاني للروابط ( URL) التي تكون تحت صور مصغرة ، هذه هي الصورة البسيطة ولا تهتم لأي إضافات أخرى ، والآن لنرى كيف نكتب قيمة rel أو class لكل منهما :

<a rel="X" href="URL">   TEXT   </a>


<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"	عرض موقع خارجي

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

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

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

لن يتم تفعيل تأثير صندوق الضوء لأننا لم نضع قيمة لـ 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>

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

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

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

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

هذه الشفرة بمثابة غرفة تحكم لخصائص التأثير يمكن التعديل عليها أو الإضافة ، مثلاً إذا كنت ترغب في تغيير عرض مقاطع اليوتيوب فعليك أن تتوجه إلى السطر رقم (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 .

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

تحاياي