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

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

 

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

 

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

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

 

view demo

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

 

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

 

تعديل القالب 1 تعديل القالب 2

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 ثوان :)

هناك 7 تعليقات:

  1. اداة جيدة .. جزاكم الله خير :)

    ردحذف
  2. تسلم اخي منير اضافه رائعه ولم اراها في اي مدونه عربيه فقط رايتها في احدي المدونات الاجنبيه التي تهتم ببلوجر وكنت انوي ترجمة الدرس ووضعه في مدونتي تقارب لكنك قد سبقتني اخي الغالي اذن ليس بوسعي الا نقل الموضوع هذا الي مدونتي مع ذكر المصدر طبعا اذا سمحت لي.
    ملحوظه: لقد قمت بتصميم بنر بسيط لمدونتك يناسب القالب الجديد لمدونتي اتمنى ان يحوز اعجابك اخي الغالي.يمكنك مشاهدته علي الرابط التالي
    http://tqarob.blogspot.com/

    ردحذف
  3. موضوع رائع اضافة ممتازة لجمالية المدونة
    بجد ممتاز تقبل مروري

    ردحذف
  4. @Jamila العفو أختي جميلة

    تشرفت بردك :)

    ردحذف
  5. @مدونة تقارب نورت الموضوع أخي الكريم فقد طالت غيبتك عنا

    بخصوص النقل يشرفني ذالك خاصة و أن المدونة مميزة جدا مثل صاحبها و مبروك القالب الجديد فهو جميل جدا و قد أعجبني

    و البنر أعجبني كذالك فلك جزيل الشكر

    ردحذف
  6. @عرب ويب ديازين أنت الممتاز أخي الكريم

    و مرورك يشرفني فحفظك الله و رعاك

    ردحذف
  7. اخي السلام عليكم
    كنت اريد من حضرتك شئ
    اضافاتان اولهما اريد وضع خلفية وراء شعار المدونة
    http://araby-egy.blogspot.com/
    والاضافة الثانية هي تكبير شعار المدونة مثلما في مدونتك الاكثر من رائعة

    ردحذف