منطقة الاعضاء

28/08/2014

صورة للتوضيح
[JAVASCRIPT] تكبير الصور بالمواضيع مع اطار من اختيارك 4010

يمكنكم تغيير رابط الصورة من الكود لاي اطار تريده
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

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

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

اما عن المصدر فهو للخبير الاجنبى الاكثر من رائع
وهو الان منسوب الى مايكل سوفت

أهلا وسهلا بك إلى بيت الجزائر لكل العرب.