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