حصرى كود تكبير الصور بالمواضيع مع اطار من اختيارككود اكثر من رائع
تكبير الصورة زووم عند الضغط عليها بشكل مختلف عن الاكواد الاخرى
اولا كود الجافا علم على المواضيع فقط
- الكود:
-
$(function() {
var img = $('.post .postbody div img');
for (i=0; i<img.length; i++) {
img[i].className += ' c_0';
img[i].onclick = function() {
if (/c_0/.test(this.className)) this.className = this.className.replace(/c_0/,'c_1');
else if (/c_1/.test(this.className)) this.className = this.className.replace(/c_1/,'c_0');
}
}
});
ثم اضف احد هذان الكودين بالسى اس اس CSS
الكود الاول اطار بلون ثابت يمكن التحكم باللون فيه
- الكود:
-
.c_0, .c_1 { transition:500ms }
.c_1 {
transform:scale(1.5);
border:4px solid #AAA;
box-shadow:3px 3px 3px rgba(0,0,0, 0.5);
}
تغيير لون الاطار يتم عن طريق تغيير القيمة
#AAA ولتعديل سمك الاطار 4PX
الكود الثانى اطار عبارة عن صورة خلفية يمكنك عملها برواز
- الكود:
-
.c_0, .c_1 { transition:500ms }
.c_1 {
transform:scale(1.5);
background:url('http://i39.servimg.com/u/f39/11/74/20/44/4010.jpg') no-repeat center / 100% 100%;
padding:3%; /* space around image */
box-shadow:3px 3px 3px rgba(0, 0, 0, 0.5);
}
تغيير الصورة يتم عن طريق تغيير الرابط
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
اما عن المصدر فهو للخبير الاجنبى الاكثر من رائع
وهو الان منسوب الى مايكل سوفت 
بيت الجزائر لكل العرب 
الأربعاء 27 مارس 2024 - 2:03 من طرف th3free
هام جداً: قوانين المساهمة في المواضيع. انقر هنا للمعاينة 
