إتصل بنا

الاسم

بريد إلكتروني *

رسالة *

إضافة blogger photo zoom لتكبير الصور

13 تعليق
السلام عليكم و رحمة الله تعالى .
كثير منكم يستعمل إضافة الفايرفوكس Facebook Photo Zoom ، و هي أدات تمكن من عرض الحجم الحقيقي للصورة بمجرد تمرير مؤشر الفأرة على الصورة المصغرة .
و من هنا أتتني فكرة عمل هذه الإضافة التي تتيح نفس الإمكانية لمدونات بلوجر ، و ذلك بإدراج كود jQuery بسيط ، ربما يستطيع بعضكم تعديله أو تغييره إن شاء ذالك .


مثال عن عمل الإضافة 

هذه صورة مصغرة ، قم بوضع مؤشر الفأرة عليها و سترى في أعلى اليسار الصورة بالحجم الحقيقي ، جرب حتى على الصورة الزرقاء فوق .

مميزات الإضافة

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

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

قد يرغب البعض في جعل الإضافة تعمل على مواضيع محددة ، و قد يرغب الاخر في تعميمها على جميع المواضيع .

على مواضيع محددة :

أثناء تحرير الموضوع إنتقل إلى جهت تحرير HTML و ضع الكود التالي في اخر الموضوع

<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'/>
<script>
     $(function(){
        $("a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)")
            .mouseover(
                function(){
                    var source = $(this).attr("href");
                    $(".post-body").append("<img src="+source+" class='zd' />");
                    $(".zd").css({"position":"fixed","zIndex":"10","top":"5px","left":"5px","border":"1px solid orange","padding":"5px","background":"#fff","maxWidth":"900px","max-height":"600px"});
                }
            )
            .mouseout(
                function(){
                    $(".zd").remove()
                }
            )
    })
    </script>

لتعميم الإضافة على جميع المواضيع إذهب إلى تصميم > إضافة أداة > HTML/Javascript و ضع نفس الكود السابق

مبدأ عمل الإضافة

نلاحظ أن الصور في بلوجر دائما تحمل روابط ، عندما تضغط على تلك الصور يتفعل الرابط و ينتقل بك إلى صفحة تضهر فيها الصورة بأبعادها الحقيقية ، في الحالة العادية . و ما يميز روابط الصور هو الرمز الذي تنتهي به .
دائما ما إن تنتقل إلى صفحة الصورة الحقيقية تجد الرابط ينتهي بإحدى الرموز التالية :
  • gif
  • png
  • jpeg
  • jpg
  • bmp
  •  ini
  • JPG
في الواقع هذه الرموز هي إمتدادات لتلك الصور ، و لا يمكن أن تجد صورة على الويب ليس لها واحد من هذه الإمتدادات .

عمل الإضافة يركز على البحث على الروابك التي تنتهي بتلك الإمتدادات و تحتوي على صورة 
<a href="xxx.png"><img src="yyy.png" /></a>
ينسخ الرابط href و يخلق عنصرا جديدا هو صورة بمصدر src يساوي القيمة href التي نسخها ، و يعطيها خصائص css تمكنها من الظهور بالشكل الذي ترى .
و عند إزالة مؤشر الفأرة عن الصورة في الموضوع ، يقوم الكود بحذف الصورة التي خلقها .
و هكذا . كود بسيط و فعال

تحياتي - عاشق النت




الكاتب : Med Anass SDK

عاشق النت إسم على مسمى أعشق كل ما له علاقة بالوب و الإنترنت
مساحة إعلانية

تعليقات بلوجر

  1. السلام عليكم،
    إضافة جيدة حقا !

    ردحذف
  2. شكرا لك اخوي على الاضافة بارك الله لك وفيك

    ردحذف
  3. السلام عليكم لا أدري لماذا لم يعمل معي

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

    ردحذف
    الردود
    1. إن الكود السابق يحتوي على خصائص الإطار :
      position":"fixed","zIndex":"10","top":"5px","left":"5px","border":"1px solid orange","padding":"5px","background":"#fff","maxWidth":"900px","max-height":"600px"
      تستطيع تغيير بعض هذه الخصائص حسب رغبتك .

      حذف
  5. طريقة رائعة

    http://cuisine4arabe.blogspot.com

    ردحذف
  6. AbdouBatna.blogspot.com

    ردحذف
  7. اخي الكريم الاضافة غير فعاله وضعتها في Javascript ولم تعمل ابدا

    ووضعته في نهاية الموضوع ولم تعمل ؟؟؟ رابط مدونتي: http://aliraqia.blogspot.se/

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

    ردحذف
  9. تحياتي
    http://www.chahidna.com

    ردحذف
  10. Welcome to Flash Gamer 7, the online arcade dedicate to flash games. Here you will find houndred of flash games of your favourite heroes.

    Flash Gamer 7, Free online flash Games

    => www.flashgamer7.blogspot.com

    ردحذف

لإدخال الأكواد بالتعليقات عليك تحويلها بـأداة ترميز أحرف HTML الخاصة