بعد بسم الله الرحمن الرحيم والصلاة والسلام على اشرف المرسلين .
في درسنا اليوم سنتعرف على كيفية اضافة هاك jQuery لعمل تكبير للصورة بشكل رائع عند تمرير الموس فوقها
طريقة تركيب الإضافةفي درسنا اليوم سنتعرف على كيفية اضافة هاك jQuery لعمل تكبير للصورة بشكل رائع عند تمرير الموس فوقها
من لوح تحكم مدونتك توجه إلى تصميم ثم تحرير HTML و قبل البدء في التعديل احفظ نسخة احتياطية من قالبك على حاسوبك.
ضع علامة في خانة توسيع القوالب.
الخطوة الأولى (*) : ابحث عن ]]></b:skin> و قبله مباشرة ضع كود CSS الآتي :
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/AVvXsEiqxnFH2j3IWLTL73w2_FlLuOHATa3YeZy2xfLBOfw1LIX9LUuBgQFJ33B-Q0KwnBEAOE-XNhocs2y8ZR4NiztnRbuYd7agM3F6fQZ0PbLohXQmTnRaHWdMxEO1OzcizD9Y2ahY79a9PA2E/) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}
<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>
احفظ القالب
الآن لإضافة القطعة معرض الصور الذهاب إلى تخطيط> أضف> أداة هتمل / جافا سكريبت
وإضافة الرمز أدناه في القطعة أتش تي أم أل جافا سكريبت /.
<ul class="thumb"><li><a href="#"><img src="Your Image Link Here" alt="" /></a></li>
<li><a href="#"><img src="Your Image Link Here" alt="" /></a></li></ul>
استبدل عبارة " Your Image Link Here " برابط صورة لديك و إذا كنت تريد أن تصل الصورة إلى عنوان آخر يمكنك إضافة هذا العنوان عن طريق استبدال '#' مع رابط لصفحة ويب يؤخذ المستخدم إلى هذا العنوان عند الضغط على الصورة.
و يمكنك أيضا إضافة الهاك إلى وظائف مدونة كذلك بنفس الطريقة.
وفي الاخير اتمنى ان تكون قد اعجبتكم الاضافة
"تكفينا كلمة شكر "