منتدى الدعم العربي لمنتديات أحلى منتدى
مرحبا بك في منتدى دعم منتديات AhlaMontada

لتتمكن من الإستمتاع بكافة ما يوفره لك هذا المنتدى من خصائص, يجب عليك أن تسجل الدخول الى حسابك في المنتدى. إن لم يكن لديك حساب بعد, نتشرف بدعوتك لإنشائه.

انشاء منتدى مجاني شبيه بهذا المنتدى
أحلى الشبكات الإجتماعية

انشاء منتدى مجاني



 انشاء منتدى مجاني

أقسام الدعم

دعم الخدمات العامة:
مشاكل كلمة السر
مشاكل فتح المنتدى
مشاكل لوحة الإدارة
مشاكل تنسيق المظهر
المشاكل الأخرى

----------------------

دعم الخدمات التكميلية :
مشاكل النطاقات
مشاكل التومبلايت

----------------------

مراسلة الإدارة :

طلب كلمة السر
إرسال أكواد أو شروحات
أتصل بنا
كيفية طلب كلمة سر جديدة
> طريقة طلب كلمة سر

تنبيه: لا تضع أبداً ايميل الإنشاء في مساهماتك و لا تعطيه لأحد!
المواضيع الأخيرة
» ارجزا من الاخوة والاخوات المساعدة
أمس في 23:07 من طرف ahd allah

» وضع اعلان فى اعلى الصفحه
أمس في 21:35 من طرف ahd allah

» طلب لتغيير ايميل الانشاء
أمس في 20:40 من طرف ahd allah

» طلب بعض الاكواد المهمة جدا
أمس في 20:29 من طرف ahd allah

» وضع صورة
أمس في 19:28 من طرف zaydoon

» مشكلة وكيف الحل
أمس في 18:07 من طرف nesma

» سؤال بغاية الاهمية
أمس في 15:15 من طرف الزعيم

» رابط منتداي يحول الى الادفلاي يرجى رفع للزعيم
أمس في 15:11 من طرف الزعيم

» مشكلة
أمس في 11:46 من طرف الزعيم

أفضل الأعضاء الموسومين
@الزعيم
 
@@
 
@stones
 
@Mohamed Nsr
 
@JAR7
 

عمل منتدى

كود لعرض صورفي المواضيع بتقنية الصور المنبثقة كما في المدونات من محمود طلعت

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

كود لعرض صورفي المواضيع بتقنية الصور المنبثقة كما في المدونات من محمود طلعت

مُساهمة من طرف Mahmoud Tal3aT في الأحد 11 مارس 2012 - 20:26



اهلا اعضاء احلى منتدى الكرام

اقدم لكم اليوم كود مميز جدااا
 مميزاته :
يقوم الكود بجعل جميع صور المنتدى الموجودة في المواضيع بأظهارها بشكل أحترافي و عرضها مثل المدونات و المنتديات الفيبي
و هاد أول مرة بتحصل في تاريخ منتديات أحلى منتدى بوضع خاصية عرض الصور بهذا الشكل











و لتركيب الكود بشكل الحصحيح تابع الشرح معي
ملاحظة : يجب عمل جميع الخطوات بشكل الصحيح و بترتيب حتى يعمل معرض الصور على المواضيع


شرح تركيب الكود :
و ضع هذا الشرح بالكود مكانه

الشرح

اذهب الى

لوحة الاداره / العناصر الاضافيه / HTML و JAVASCRIPT /  إدارة أكواد Javascript

انشاء كود جديد

ضع الكود و حدد جميع الصفحات

ابحث فى الكود عن الرابط التالى و استبدله برابط منتداك

help.ahlamontada.com
الكود


الرمز:
$(function($){$('.postbody
img').slideDown(1,function(){if($(this).height()>120){$(this).replaceWith('<a
 rel="lightbox-atomium" href="'+$(this).attr('src')+'"
title="help.ahlamontada.com"><img src="'+$(this).attr('src')+'"
title="أضغط على الصورة لتشهدها بحجمها
الطبيعي"></a>')}});$(".postbody
a[href]").filter(function(){return/\.(jpg|png|gif|bmp|dib|jpeg)$/i.test(this.href)}).attr({'rel':'lightbox-atomium','title':'help.ahlamontada.com'})});(function(w){var
 
E=w(window),u,f,F=-1,n,x,D,v,y,L,r,m=!window.XMLHttpRequest,s=[],l=document.documentElement,k={},t=new
 Image(),J=new
Image(),H,a,g,p,I,d,G,c,A,K;w(function(){w("body").append(w([H=w('<div
 id="lbOverlay" />')[0],a=w('<div id="lbCenter"
/>')[0],G=w('<div id="lbBottomContainer"
/>')[0]]).css("display","none"));g=w('<div id="lbImage"
/>').appendTo(a).append(p=w('<div style="position: relative;"
/>').append([I=w('<a id="lbPrevLink" href="#"
/>').click(B)[0],d=w('<a id="lbNextLink" href="#"
/>').click(e)[0]])[0])[0];c=w('<div id="lbBottom"
/>').appendTo(G).append([w('<a id="lbCloseLink" href="#"
/>').add(H).click(C)[0],A=w('<div id="lbCaption"
/>')[0],K=w('<div id="lbNumber" />')[0],w('<div
style="clear: both;"
/>')[0]])[0]});w.slimbox=function(O,N,M){u=w.extend({loop:false,overlayOpacity:0.8,overlayFadeDuration:400,resizeDuration:400,resizeEasing:"swing",initialWidth:250,initialHeight:250,imageFadeDuration:400,captionAnimationDuration:400,counterText:"صورة
 {x} من
{y}",closeKeys:[27,88,67],previousKeys:[37,80],nextKeys:[39,78]},M);if(typeof
 
O=="string"){O=[[O,N]];N=0}y=E.scrollTop()+(E.height()/2);L=u.initialWidth;r=u.initialHeight;w(a).css({top:Math.max(0,y-(r/2)),width:L,height:r,marginLeft:-L/2}).show();v=m||(H.currentStyle&&(H.currentStyle.position!="fixed"));if(v){H.style.position="absolute"}w(H).css("opacity",u.overlayOpacity).fadeIn(u.overlayFadeDuration);z();j(1);f=O;u.loop=u.loop&&(f.length>1);return
 
b(N)};w.fn.slimbox=function(M,P,O){P=P||function(Q){return[Q.href,Q.title]};O=O||function(){return
 true};var N=this;return N.unbind("click").click(function(){var
S=this,U=0,T,Q=0,R;T=w.grep(N,function(W,V){return
O.call(S,W,V)});for(R=T.length;Q<R;++Q){if(T[Q]==S){U=Q}T[Q]=P(T[Q],Q)}return
 w.slimbox(T,U,M)})};function z(){var
N=E.scrollLeft(),M=E.width();w([a,G]).css("left",N+(M/2));if(v){w(H).css({left:N,top:E.scrollTop(),width:M,height:E.height()})}}function
 
j(M){if(M){w("object").add(m?"select":"embed").each(function(O,P){s[O]=[P,P.style.visibility];P.style.visibility="hidden"})}else{w.each(s,function(O,P){P[0].style.visibility=P[1]});s=[]}var
 N=M?"bind":"unbind";E[N]("scroll
resize",z);w(document)[N]("keydown",o)}function o(O){var
N=O.keyCode,M=w.inArray;return(M(N,u.closeKeys)>=0)?C():(M(N,u.nextKeys)>=0)?e():(M(N,u.previousKeys)>=0)?B():false}function
 B(){return b(x)}function e(){return b(D)}function
b(M){if(M>=0){F=M;n=f[F][0];x=(F||(u.loop?f.length:0))-1;D=((F+1)%f.length)||(u.loop?0:-1);q();a.className="lbLoading";k=new
 Image();k.onload=i;k.src=n}return false}function
i(){a.className="";w(g).css({backgroundImage:"url("+n+")",visibility:"hidden",display:""});w(p).width(k.width);w([p,I,d]).height(k.height);w(A).html(f[F][1]||"");w(K).html((((f.length>1)&&u.counterText)||"").replace(/{x}/,F+1).replace(/{y}/,f.length));if(x>=0){t.src=f[x][0]}if(D>=0){J.src=f[D][0]}L=g.offsetWidth;r=g.offsetHeight;var
 
M=Math.max(0,y-(r/2));if(a.offsetHeight!=r){w(a).animate({height:r,top:M},u.resizeDuration,u.resizeEasing)}if(a.offsetWidth!=L){w(a).animate({width:L,marginLeft:-L/2},u.resizeDuration,u.resizeEasing)}w(a).queue(function(){w(G).css({width:L,top:M+r,marginLeft:-L/2,visibility:"hidden",display:""});w(g).css({display:"none",visibility:"",opacity:""}).fadeIn(u.imageFadeDuration,h)})}function
 
h(){if(x>=0){w(I).show()}if(D>=0){w(d).show()}w(c).css("marginTop",-c.offsetHeight).animate({marginTop:0},u.captionAnimationDuration);G.style.visibility=""}function
 
q(){k.onload=null;k.src=t.src=J.src=n;w([a,g,c]).stop(true);w([I,d,g,G]).hide()}function
 
C(){if(F>=0){q();F=x=D=-1;w(a).hide();w(H).stop().fadeOut(u.overlayFadeDuration,j)}return
 false}})(jQuery);if(!/android|iphone|ipod|series60|symbian|windows
ce|blackberry/i.test(navigator.userAgent)){jQuery(function($){$("a[rel^='lightbox']").slimbox({},null,function(el){return(this==el)||((this.rel.length>8)&&(this.rel==el.rel))})})}


و الأن سنقوم بتعديل على قالب المواضيع حتى يعمل المعرض على الصور بداخل المواضيع فقط
و هاد الخطوة مهمة جدا فأذا لم تركب فلن يعمل الكود أبدا


نذهب إلى

لوحة أدارة >> مظهر المنتدى >> التومبلايتات و القوالب >> أدارة عامة  --viewtopic_body

نبحث عن الكود التالي

الرمز:
<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({
 'selector' : '.postbody', 'max_width' :
{switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' :
{switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
و نستبدله بلكود التالي



الرمز:

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[$(resize_images({
 'selector' : '.postbody', 'max_width' :
{switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' :
{switch_image_resize.IMG_RESIZE_HEIGHT} }));//]]></script>
<!-- END switch_image_resize -->

و من ثم نضغط على زر سجل
 
و من ثم نضغط على لنشر القالب




و الأن الخطوة ما قبل الأخيرة

و هي أضافة كود الـ CSS حتى يعمل شكل و ستايل معرض الصور

طريقة وضع الكود:

لوحة أدارة - مظهر المنتدى - ألوان - ورقة الانماط الانسيابية css

الرمز:


/*-----Programming code byMahmoud TalaaT& sam hameed-----*/
#lbOverlay{
  position:fixed;z-index: 999;
  left:0;
  top:0;
  width:100%;
  height:100%;
  Mahmoud TalaaT;
  background-color:#000;
  cursor:pointer;
}
#lbCenter,#lbBottomContainer{
  position:absolute;
Mahmoud TalaaT;
  z-index: 999;overflow:hidden;
  background-color:#fff;
}
.lbLoading{
  background:#fff url(http://i27.servimg.com/u/f27/14/67/90/38/novfao10.gif) no-repeat center;
}
#lbImage{
  position:absolute;left:0;top:0;border:10px solid #fff;background-repeat:no-repeat;}
#lbPrevLink,#lbNextLink{
  display:block;
Mahmoud TalaaT;
  position:absolute;
  top:0;
  width:50%;
  outline:none;
}
#lbPrevLink{
  left:0;
}
#lbPrevLink:hover{
  background:transparent url(http://i41.servimg.com/u/f41/14/81/17/27/211.png) no-repeat 0 15%;
}
#lbNextLink{
  right:0;}
#lbNextLink:hover{
  background:transparent url(http://i41.servimg.com/u/f41/14/81/17/27/310.png) no-repeat 100% 15%;
}
#lbBottom{
  font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;font-size:10px;color:#666;line-height:1.4em;
  text-align:left;
  Mahmoud TalaaT;
  border:10px solid #fff;
  border-top-style:none;
}
#lbCloseLink{
  display:block;
  float:right;
  Mahmoud TalaaT;
  width:66px;height:22px;
  background:transparent url(http://i41.servimg.com/u/f41/14/81/17/27/110.png) no-repeat center;
  outline:none;
  Mahmoud TalaaT;
  margin:5px 0;
}
#lbCaption,#lbNumber{
  margin-right:71px;
}
.postbody img{
  max-width:450px;
}
/*-----Programming code byMahmoudTalaat&samhamed-----*/





و الأن الخطوة الأخيرة و الأهم


لوحة إدارة - إدارة عامة -الرسائل و الإيميلات -تشكيل - المساهمات و المواضيع

تعديل ابعاد الصور التي يضعها الأعضاء في المساهمات :

نقوم بتفريغ المربعات الطول و العرض من الأرقام

و من ثم نضغط سجل
و الأن نذهب إلى المواضيع و نعمل معاينة على الصور
 
عن طريق الضغط عليها و أستمتعو و متعو أعضائكم

بالخاصية الجديدة و المتميزة



Mahmoud Tal3aT
 
 

ذكر
عدد المساهمات : 2039
معدل النشاط : 5166

http://aflammix.yoo7.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة


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