منتديات احلى لمسة

منتديات احلى لمسة


 
الرئيسيةمكتبة الصورس .و .جبحـثالأعضاءالمجموعاتالتسجيلدخول

شاطر | 
 

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

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
admin
Admin
Admin
avatar

القوس الثعبان
عدد المساهمات : 165
خبرة : 2147483647
الاعجاب : 1008
تاريخ الميلاد : 20/12/2001
العمر : 15
الموقع : انا عايش فى النت

مُساهمةموضوع: كود لعرض صورفي المواضيع بتقنية الصور المنبثقة كما في المدونات   الإثنين يناير 13, 2014 8:06 pm

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


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








تكبير الصورة معاينة الأبعاد الأصلية.








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


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

الشرح

اذهب الى

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

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

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

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

اقتباس :
اقتباس :
www.ahlamsa.wwooww.net
الكود


الكود: 
الكود:
$(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':'www.ahlamsa.wwooww.net'})});(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-----*/






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


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

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

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

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

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

المصدر منتديات احلى لمسة | وغير مسموح بالنقل دون ذكر المصدر

ــــــــــــــــــــــــــــــــــ


الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://ahlalamsa.wwooww.net
 
كود لعرض صورفي المواضيع بتقنية الصور المنبثقة كما في المدونات
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات احلى لمسة :: قسم البرمحة :: اكواد html-
انتقل الى:  
نيو سوفت نيوسوفت kd, s,tj سوفت نيو تحميل برنامج واتس اب للكمبيوتر مايا خليفة جهاد ايوب تحميل فيلم ريجاتا مشاهدة فيلم ريجاتا توقعات الابراج شهر 2 فبراير 2015 تحميل مسلسل Sweden Laundry تحميل فيلم القطه استعلم عن لجنتك الانتخابية بالرقم القومى انتخابات مجلس النواب 2015 ترددات القنوات الاباحية على النايل سات الجديدة 2015 نتيجة الصف السادس الابتدائى 2015 برقم الجلوس الترم الاول لجميع المحافظات اخر موضة من فساتين السهرة فساتين السهرة ازياء فساتين المصممة الإماراتية منى المنصوري مفارش سرير لغرف النوم نيو سوفت تحميل اغانى شعبى 2016 تحميل اغانى شعبى تحميل اغانى شعبى 2015 تحميل اغانى قناة شعبيات تحميل فيلم بتوقيت القاهرة تحميل فيلم هز وسط البلد تحميل فيلم يوم ملوش لازمة تحميل فيلم جرسونيره تحميل فيلم قدرات غير عادية تحميل فيلم سوء تفاهم تحميل فيلم من الف الى باء علاج القمل آيفون 7 تحميل برنامج تقطيع الاغانى تحميل برنامج فيس بوك ماسنجر تحميل برنامج أدوب ريدر تحميل متصفح كوماندو دراجون رجيم الزبادي خلطات لشد البطن وصفات لتخسيس الارداف صور حزينه للفيس بوك سريال برنامج بت ديفيندر Arabs Got Talent تحميل برنامج بت ديفيندر 2015 pdf تحميل برنامج سكاى بى عربى تحميل برنامج هوتميل ماسنجر تحميل برنامج اكتيف داونلود ماسنجر تحميل برنامج نقل الملفات من الكمبيوتر الى الايفون والايباد تحميل برنامج تشغيل كاميرا لاب توب تحميل برنامج الفوتوشوب ادوبي تحميل برنامج الكتابة على الفيديو بالعربى تحميل برنامج فلاش بلاير تحميل برنامج فايرفوكس تحميل برنامج موبيجينى ماركت تحميل برنامج واتس اب تطبيقات ايفون والايباد تحميل برنامج الاتصال المجانى بيجو تحميل برنامج فوتو فونيا موقع فوتو فونيا تحميل برنامج انترنت دونلود منجر تحميل لعبة جاتا مصر تحميل لعبة فيفا للاندرويد تحميل لعبة بيس 2015 تحميل لعبة صب واى لعبة صب واي اون لاين تحميل العاب بلاي ستيشن 2 تحميل باتش 2015 لبيس 6 تحميل باتش بيس 2013 انتقالات 2015 تياترو مصر تحميل فيفا 2015 العبايات السعودية ميكياج خليجى للعرايس ميكياج سهرات ميك اب للعيون عبايات اماراتية عبايات خليجية سوداء عبايات خليجية فساتين سهره ازياء شتاء كوفيات كروشية بناتى بالباترون كوفيات كروشية رجالى بالباترون لفات الحجاب حجاب تركى فساتين زفاف فساتين سواريه تصميمات ستائر مفارش ديكور حمامات ديكورات غرف النوم ازياء