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

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

معكم اخوكم عفريت بلوجر وفي جديد مواضيعي بعد غيبة طويلة لابد من الرجوع للقائكم و مشاركة مواضيع مفيدة معكم دائما لتطوير مدوناتنا و الرقي بها

درس اليوم هو كيفية جعل الصور تكبر عند مرور مؤشر الماوس عليها وهي جد رائعة وسهلة جدا يتم إضافتها بالإستعانة ببعض أكواد ال CSS و JQuery

قبل أن تتابع معي الشرح شاهد هذه الصورة التي لم أقم بإضافة التاثير عليها ثم شاهد الصورة الثانية التي قمت بإضافة التأثير عليها

---

[الصورة 1]

---

[الصورة 2]

 

• 

 

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

---

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfq4JZ8htdYfAYmCVB7Rdi3jxTh828yaNDv36W1gTvgcLPvT3-QflCDyS_dlpDL8vX7mlLS9jOEp2feqt4sbx9SxBbvgZOJitwhFgey5GMZz42crQf2ICL0oX6V1CQWZPV6GIcL_a77Icj//) 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>

---