كيفية إضافة خاصية بلوجر زوم blogger photo zoom لمدونات بلوجر

blogger

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

كثير منكم يستعمل إضافة الفايرفوكس 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 تمكنها من الظهور بالشكل الذي ترى .

و عند إزالة مؤشر الفأرة عن الصورة في الموضوع ، يقوم الكود بحذف الصورة التي خلقها .

و هكذا . كود بسيط و فعال.