اضافة تأثير الاضاءة الى الصور jQuery

السلام عليكم ورحمة الله تعالى وبركاته ,للدكر فقط انا ادون لانني أجد راحة في كتابة مواضيع وخصوصا ان كانت مفيد هدفي من المدونة ليس ربحيا ابدا ,فقط لمشاركة تجاربي معكم لنبدأ , في هدا سوف نتعرف على طريقة مميزة لاضافة تأثير الاضاءة على صور مدونتك آلياً لان هناك طريقتان والطريقة اليدوية هي اضافة كود الى رابط الصورة

وهدا آمر يكون مزعج بعض الشيء ,ولمعاينة حية انقر هنا وقم بتمرير الماوس على الصورة وسترى النتيجة

وهده الاضافة تنتمي الى مكتبة jQuery الرائعة ,

1. الى العمل ….ادهب الى لوحة تحكم مدونتك في يمين الصفحة انقر على قالب ثم تحرير القالب ثم متابعة
2. ابحث عن هدا الكود  </head> وقبله انسخ والصق الكود الموجود التالي

 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".post img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".latest_img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".latest_img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>