الثلاثاء، يوليو 28، 2009

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

. الثلاثاء، يوليو 28، 2009

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


الملفات المطلوبة.
  • ملف jquery.magnifier.js وهو الملف الذى يحوى الاسكربت الخاص بتكبير الصورة عند الضغط عليها.
  • ملف magnify.cur وهو الذى يظهر يجعل مؤشرة الماوس على شكل عدسة مكبرة عند مروره على الصورة عليه.
كيفية الاستخدام.

اولا : يتم رفع ملف الايقون magnify.cur على السيرفر و كتابة عنوان اللينك الخاص به.

ثانيا : فتح ملف الجافا سكربت jguery.magnifier.js و البحث بداخله على العبارة كما فى الكود التالى، و من ثم كتابة عنوان الايقون بها و حفظها ثم رفعها على السيرفر.

cursorcss: 'url(عنوان الارتباط لملف الايقون), -moz-zoom-in',

ثالثا: داخل لوحة تحكم المدونة اختر layout و منها اختر html وفى منطقة </head> قم بنسخ الكود التالى :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="عنوان مسار ملف الجافا على السيرفرالخارجى">
</script>

رابعا : عند قيامك بادراج صورة فى مدونتك، قم بادراج الفئة class=magnify داخل كود img الخاصة بالصورة كما فى الكود التالى

<img class="magnify"; style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 225px;" src="http://1.bp.blogspot.com/_MWXumvEdSuQ/Sm8MK-0oaVI/>
بالنسبة لمدونات البلوجر، لعرض الصورة بطريقة سليمة يجب حذف الكود التلقائى الذى يقوم البلوجر باضافته للتدوينة كلما قمت بادراج صورة وهذا الكود يسبق كود img مباشرة و يبدأ ب
<a onblur="try {parent.deselectBlo
ارجو ان يكون الموضوع مفيدا ، مع تمنياتى بالتوفيق لكم جميعا.

6 تعليق:

ذؤيب يقول...

جميل جدا!
إضافة رائعة اخي الحبيب و شرحك ممتاز .
بارك الله فيك يا طيب .
تحياتي.

ابو مشاري يقول...

اضافة رائعه
احسنت اخي
كنت ابحث عن الطريقة

تحياتي

temo يقول...

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

™SaRa يقول...

جزاك الله خيرا
بس انا مش عارفه ارفع الملف علي سيرفر ازاي يعني؟؟؟

temo يقول...

أهلا بك اختى سارة، كل ماعليك هو فتح حساب فى موقع يقدم مساحات مجانية للملفات مثل www.fileave.com وبعدها ادخلى لوحة التحكم ، و ارفعى ملف تكبيرة الصورة عليها... تمنياتى بالتوفيق

ĵÔǿÖǿÕĐĬŸ يقول...

روعه .. شكرا لك اخي الكريم ..

http://superjoojooo.blogspot.com/

 
room darkening shades