[Template] لعرض صورفي المواضيع بتقنية الصور المنبثقة كما في المدوناتبرمجة الكود من قبل اخوكم Sam Hameed
مدة التي أستغرقه الكود لبرمجة
ساعة 2.30|صورة للمعينة الكود و مكان ظهورة |
و لتركيب الكود بشكل الحصحيح تابع الشرح معي
ملاحظة : يجب عمل جميع الخطوات بشكل الصحيح و بترتيب حتى يعمل معرض الصور على المواضيعشرح تركيب الكود :
لوحة أدارة >> مظهر المنتدى >> التومبلايتات و القوالب >> أدارة عامة --overall_headerنقوم بلبحث عن الكود التالي : - الكود:
-
<script src="{JQUERY_PATH}" type="text/javascript"></script>
و أسفله مباشرة نقوم بوضع الكود التالي : تنوية:-تفضل مشكورآ بوضع ردآ ليظهر لك بقية الموضوع والشرح
- الكود:
-
<script type="text/javascript" src="http://www1.3rab.pro/10085.js"></script>
و من ثم نضغط على زر سجل
و من ثم نضغط على لنشر القالبو الأن سنقوم بتعديل على قالب المواضيع حتى يعمل المعرض على الصور بداخل المواضيع فقط
و هاد الخطوة مهمة جدا فأذا لم تركب فلن يعمل الكود أبدا
نذهب إلى
لوحة أدارة >> مظهر المنتدى >> التومبلايتات و القوالب >> أدارة عامة --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 by sam hameed-----*/
#lbOverlay{
position:fixed;z-index: 999;
left:0;
top:0;
width:100%;
height:100%;
sam_hameed;
background-color:#000;
cursor:pointer;
}
#lbCenter,#lbBottomContainer{
position:absolute;
sam_hameed;
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;
sam_hameed;
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;
sam_hameed;
border:10px solid #fff;
border-top-style:none;
}
#lbCloseLink{
display:block;
float:right;
sam_hameed;
width:66px;height:22px;
background:transparent url(http://i41.servimg.com/u/f41/14/81/17/27/110.png) no-repeat center;
outline:none;
sam_hameed;
margin:5px 0;
}
#lbCaption,#lbNumber{
margin-right:71px;
}
.postbody img{
max-width:450px;
}
/*-----Programming code by sam hameed-----*/
و الأن الخطوة الأخيرة و الأهم
لوحة إدارة - إدارة عامة -الرسائل و الإيميلات -تشكيل - المساهمات و المواضيع
تعديل ابعاد الصور التي يضعها الأعضاء في المساهمات :
نقوم بتفريغ المربعات الطول و العرض من الأرقام
و من ثم نضغط سجل
و الأن نذهب إلى المواضيع و نعمل معاينة على الصور