تكبير الصور بتقنية jQuery

بسم الله الرحمن الرحيم

 

السلام عليكم أخي الكريم في موضوع سابق كنا قد تطرقنا لموضوع ألبوم صور بتقنية مختلفة : Spacegallery و اللذي يعمل بتقنية jQuery الرائعة. اليوم سنتطرق لدرس أخر بتقنية jQuery و هو خاص بتكبير الصور.

 

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

 

و لتطبيق الإضافة في مدونتك إتبع الشرح.

اقرا ايضا : تغيير العبارات (رسالة أحدث، رسالة أقدم) بروابط وعناويين المواضيع

 

1- توجه للوحة تحكم المدونة

 

2- إبحث عن الوسم التالي عن طريق الزرين Ctrl+F

]]></b:skin>

3- ألصق الكود بالأسفل فوقه تماما

#easy_zoom{
width:600px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;

اقرا ايضا :طريقة تقسيم موضوعات بلوجر الى صفحات لسرعة التصفح

position:fixed;
top:35px;
left:50%;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;

اقرا ايضا :أضف أخر التعليقات مع صورة الكاتب بشكل جميل ورائع لمدونات البلوجر

}

قد تحتاج لتغير في القيمة المعلمة باللون البرتقالي ليتناسب الكود مع قالب مدونتك.

 

4- الأن إبحث عن الوسم

</head>

5- بعد ذالك قم بلصق الكود التالي فوقه

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://spiceupyourblogextras.googlecode.com/files/easyzoom.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
$(&#39;a.zoom&#39;).each(function(i) {
$(this).easyZoom();
});

اقرا ايضا :إضافة تبادل إعلاني بتأثير جميل jQuery

});
</script>

6- قم الأن بحفظ القالب، ثم إضافة أكواد CSS و jQuery  ما عليك الأن سوى إضافة الصور لذا تابع.

 

إضافة الصور لمواضيعك

 

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

 

أضف الكود التالي لتدويناتك و غير الرابط الملون برابط الصورة التي تريد تكبيرها.

<div class="separator" style="clear: both; text-align: center;">
<a class="zoom" Your-Image-Url" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="Your-Image-Url" width="320" /></a></div>

بهذا نكون قد إنتهينا من هذه الإضافة أتمنى أن تنال إعجابك.