درس اليوم هو كيفية جعل الصور تكبر عند
مرور مؤشر الماوس عليها وهي جد رائعة وسهلة جدا يتم إضافتها بالإستعانة
ببعض أكواد ال 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/AVvXsEicLC1iXG5lnzJ9O90AqOAdaZeLCkSs2Dc0M8gHw2EEgEcuOjOQljX1K68pRdznKP1dwzsPoM3IEwzzHf0li7lpdHg-k52gqskh0H3Of7fVX3hyqjcjhf5ZSG0R-WlXNSpNzbsDl3CconBN/) 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>
مسموح بنقل الموضوع بشرط ذكر المصدر : حصريا إضافة تكبير الصور بعد مرور مؤشر الفأرة عليها | للابلاغ عن رابط لا يعمل هنا
