إضافة تكبير الصور بعد مرور مؤشر الفأرة عليها

 الأن تابع معي كيفية إضافتها لمدونتك بسهولة

---

1 - في لوحة تحكم موقعك أو مدونتك قم بالتوجر لتحرير HTML 

وقم بالبحث عن الوسم التالي
]]></b:skin> 

وقبله مباشرة قم بنسخ الكود التالي
↓

ul.thumb {

float: left;

list-style: none;

margin: 0; padding: 10px;

width: 360px;

}

ul.thumb li {

margin: 0; padding: 5px;

float: left;

position: relative; /* Set the absolute positioning base coordinate */

width: 110px;

height: 110px;

}

ul.thumb li img {

width: 100px; height: 100px; /* Set the small thumbnail size */

-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */

border: 1px solid #ddd;

padding: 5px;

background: #f0f0f0;

position: absolute;

left: 0; top: 0;

}

ul.thumb li img.hover {

background:url(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center; /* Image used as background on hover effect

border: none; /* Get rid of border on hover */

}

2- الخطوة الثانية قم بالبحث عن الوسم 

</head>

وقم بنسخ الكود التالي ايضاً قبله مباشرة

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function(){

//Larger thumbnail preview

$("ul.thumb li").hover(function() {

$(this).css({'z-index' : '10'});

$(this).find('img').addClass("hover").stop()

.animate({

marginTop: '-110px',

marginLeft: '-110px',

top: '50%',

left: '50%',

width: '174px',

height: '174px',

padding: '20px'

}, 200);

} , function() {

$(this).css({'z-index' : '0'});

$(this).find('img').removeClass("hover").stop()

.animate({

marginTop: '0',

marginLeft: '0',

top: '0',

left: '0',

width: '100px',

height: '100px',

padding: '5px'

}, 400);

});

//Swap Image on Click

$("ul.thumb li a").click(function() {

var mainImage = $(this).attr("href"); //Find Image Name

$("#main_view img").attr({ src: mainImage });

});

});

</script>

3 -الأن ما عليك إلا أن تنسخ رابط الصورة التي تريد أن يحدث عليها التاثير في اي مكان في مدونتك داخل هذا الكود سواء في عنصر جديد من هناصر الواجهة أو في تدويناتك...

---

<ul class="thumb">
<li><img src="رابط صورتك هنا" /></a></li>
</ul>

---