اختر لونك المفضل




العودة  Egyword - كلمة مصرية

أهلا وسهلا بك زائرنا الكريم، إذا كانت هذه زيارتك الأولى للشبكة، فيرجى التكرم بزيارة صفحة التعليمـــات، بالضغط هنا. كما يشرفنا أن تقومبالتسجيل بالضغط هنا إذا رغبت بالمشاركة في المنتدى، أما إذا رغبت بقراءة المواضيع والإطلاع فتفضل بزيارة القسم الذي ترغب أدناه.






Egyword :: خدمات المواقع والمنتديات :: قسم تطوير منتديات Ahlamontada :: قسم أكواد JavaScript و jQuery

  الجمعة 1 يناير 2016 - 0:47

  • عدد المساهمات : 1030
  • تاريخ التسجيل : 13/05/2012
  • الموقع : Portsaid


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




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

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



الكود:
[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]








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

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



توقيع : 3aMeR





Facebook: Ahmed 3amer

Skype: ahmed.amer521










ȜąṀєЯ






  السبت 9 يناير 2016 - 23:23

  • عدد المساهمات : 298
  • تاريخ التسجيل : 09/01/2016


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




[بارك الله فيك على الموضوع القيم والمميز وفي انتظار جديدك الأروع والمميز لك مني أجمل التحيات وكل التوفيق لك يا رب


توقيع : عمر المصري







  
hotel deals in sharm el sheikh

الــرد الســـريـع
..

هل تريد التعليق؟
انضم إلى ( Egyword - كلمة مصرية ) للحصول على حساب مجاني أو قم بتسجيل الدخول إذاكنت عضوًا بالفعل






تعليمات المشاركة
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة




Powered by vBulletin® Copyright ©2000 - 2015, Jelsoft Enterprises Ltd