كود لعرض صورفي المواضيع بتقنية الصور المنبثقة كما في المدونات من محمود طلعت
صفحة 1 من اصل 1
كود لعرض صورفي المواضيع بتقنية الصور المنبثقة كما في المدونات من محمود طلعت
![كود لعرض صورفي المواضيع بتقنية الصور المنبثقة كما في المدونات من محمود طلعت Bsmlh10](https://2img.net/r/ihimizer/img696/9431/bsmlh10.png)
اهلا اعضاء احلى منتدى الكرام
![كود لعرض صورفي المواضيع بتقنية الصور المنبثقة كما في المدونات من محمود طلعت 201477](https://2img.net/u/1811/68/54/94/smiles/201477.gif)
![كود لعرض صورفي المواضيع بتقنية الصور المنبثقة كما في المدونات من محمود طلعت Thwggg12](https://i.servimg.com/u/f43/14/93/12/42/thwggg12.png)
اقدم لكم اليوم كود مميز جدااا
يقوم الكود بجعل جميع صور المنتدى الموجودة في المواضيع بأظهارها بشكل أحترافي و عرضها مثل المدونات و المنتديات الفيبي
و هاد أول مرة بتحصل في تاريخ منتديات أحلى منتدى بوضع خاصية عرض الصور بهذا الشكل
![كود لعرض صورفي المواضيع بتقنية الصور المنبثقة كما في المدونات من محمود طلعت Thwggg12](https://i.servimg.com/u/f43/14/93/12/42/thwggg12.png)
![كود لعرض صورفي المواضيع بتقنية الصور المنبثقة كما في المدونات من محمود طلعت Ououuo10](https://i.servimg.com/u/f43/14/93/12/42/ououuo10.png)
![كود لعرض صورفي المواضيع بتقنية الصور المنبثقة كما في المدونات من محمود طلعت Mahmou11](https://i.servimg.com/u/f43/14/93/12/42/mahmou11.jpg)
![كود لعرض صورفي المواضيع بتقنية الصور المنبثقة كما في المدونات من محمود طلعت Thwggg12](https://i.servimg.com/u/f43/14/93/12/42/thwggg12.png)
و لتركيب الكود بشكل الحصحيح تابع الشرح معي
ملاحظة : يجب عمل جميع الخطوات بشكل الصحيح و بترتيب حتى يعمل معرض الصور على المواضيع
شرح تركيب الكود :
و ضع هذا الشرح بالكود مكانه
الشرح
اذهب الى
لوحة الاداره / العناصر الاضافيه / 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 -->
و من ثم نضغط على زر سجل
و من ثم نضغط على
![كود لعرض صورفي المواضيع بتقنية الصور المنبثقة كما في المدونات من محمود طلعت Ajouter](https://2img.net/i/fa/admin/icones/ajouter.png)
![كود لعرض صورفي المواضيع بتقنية الصور المنبثقة كما في المدونات من محمود طلعت Thwggg12](https://i.servimg.com/u/f43/14/93/12/42/thwggg12.png)
و الأن الخطوة ما قبل الأخيرة
و هي أضافة كود الـ 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-----*/
![كود لعرض صورفي المواضيع بتقنية الصور المنبثقة كما في المدونات من محمود طلعت Thwggg12](https://i.servimg.com/u/f43/14/93/12/42/thwggg12.png)
و الأن الخطوة الأخيرة و الأهم
لوحة إدارة - إدارة عامة -الرسائل و الإيميلات -تشكيل - المساهمات و المواضيع
تعديل ابعاد الصور التي يضعها الأعضاء في المساهمات :
نقوم بتفريغ المربعات الطول و العرض من الأرقام
و من ثم نضغط سجل
و الأن نذهب إلى المواضيع و نعمل معاينة على الصور
![كود لعرض صورفي المواضيع بتقنية الصور المنبثقة كما في المدونات من محمود طلعت 172425](https://2img.net/u/2015/15/05/13/smiles/172425.gif)
عن طريق الضغط عليها و أستمتعو و متعو أعضائكم
![كود لعرض صورفي المواضيع بتقنية الصور المنبثقة كما في المدونات من محمود طلعت 668399](https://2img.net/u/2015/15/05/13/smiles/668399.gif)
بالخاصية الجديدة و المتميزة
![كود لعرض صورفي المواضيع بتقنية الصور المنبثقة كما في المدونات من محمود طلعت 314553](https://2img.net/u/2015/15/05/13/smiles/314553.gif)
![-](https://2img.net/s/t/21/40/40/i_tabs_less.png)
» كود وضع اطار على اخر مساهمة للنسخة التانية من محمود طلعت
» طلب كود لعرض الصور
» طريقة لعرض الصور
» مطلوب كود لعرض الصور بطريقة محترفة
» مطلوب كود لعرض الصور بطريقة محترفة
» طلب كود لعرض الصور
» طريقة لعرض الصور
» مطلوب كود لعرض الصور بطريقة محترفة
» مطلوب كود لعرض الصور بطريقة محترفة
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى