تكبير الصور بتقنية 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();
});
});
</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>

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

إذا أعجبك الموضوع فشاركه مع أصدقائك فلن يأخد منك الأمر سوى 5 ثوان :)