//
you're reading...
بخصوص بلوج سبوت

>تكبير الصور عند تمرير الماوس فوقها


>

طريقة تركيب الإضافة

من لوح تحكم مدونتك توجه إلى تصميم ثم تحرير 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(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 */
}

بعد إضافة رمز أعلاه البحث الآن </head> في رمز القالب وإضافة رمز أدناه قبل ذلك.

<script src=’http://code.jquery.com/jquery-latest.js&#8217; type=’text/javascript’/>
<script type=’text/javascript’>
$(document).ready(function(){
//Larger thumbnail preview
$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('img').addClass(&quot;hover&quot;).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(&quot;hover&quot;).stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '100px',
height: '100px',
padding: '5px'
}, 400);
});
//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {
var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).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 " برابط صورة لديك و إذا كنت تريد أن تصل الصورة إلى عنوان آخر يمكنك إضافة هذا العنوان عن طريق استبدال ‘#’ مع رابط لصفحة ويب يؤخذ المستخدم إلى هذا العنوان عند الضغط على الصورة.

و يمكنك أيضا إضافة الهاك إلى وظائف مدونة كذلك بنفس الطريقة.

وفي الاخير اتمنى ان تكون قد اعجبتكم الاضافة

About neno1050

فنى دهانات

مناقشة

لا يوجد تعليقات.

أضف تعليقاً

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s

%d مدونون معجبون بهذه: