حصرى حصرى حصرى كود تكبير الصور بالمواضيع مع اطار من اختيارك

كود اكثر من رائع

تكبير الصورة زووم عند الضغط عليها بشكل مختلف عن الاكواد الاخرى

اولا كود الجافا علم على المواضيع فقط

الكود:: $(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); }

تغيير الصورة يتم عن طريق تغيير الرابط
https://i.servimg.com/u/f39/11/74/20/44/4010.jpg

اما عن المصدر فهو للخبير الاجنبى الاكثر من رائع
وهو الان منسوب الى مايكل سوفت
http://micsoft.logu2.com
:karlhff: