تومبلايت جديد يظهر صورة وصف الموضوع بشكل بنبثق حصريا

اذهب الى الأسفل 
كاتب الموضوعرسالة
وهبة الساحر
 
 
وهبة الساحر


ذكر
عدد المساهمات : 9060
معدل النشاط : 14825
السُمعة : 135

تومبلايت جديد يظهر صورة وصف الموضوع بشكل بنبثق حصريا  Empty
مُساهمةموضوع: تومبلايت جديد يظهر صورة وصف الموضوع بشكل بنبثق حصريا    تومبلايت جديد يظهر صورة وصف الموضوع بشكل بنبثق حصريا  Emptyالجمعة 3 أبريل 2015 - 15:55


تومبلايت جديد يظهر صورة وصف الموضوع بشكل بنبثق حصريا

تومبلايت جديد يظهر صورة وصف الموضوع بشكل بنبثق حصريا

بسم الله الرحمان الر
تومبلايت جديد يظهر صورة وصف الموضوع بشكل بنبثق حصريا 
كود جديد تومبلايت
الكود: تومبلايت يضع صورة وصف الموضوع بطريقة جيدة 
وعند الضغط عليها تظهر بشكل بنبثق
صورة للمعاينه

تومبلايت جديد يظهر صورة وصف الموضوع بشكل بنبثق حصريا  22222212
https://i.servimg.com/u/f19/19/08/
62/30/22222212.png
بعد ما شوفنا صور عمل الكود ندخل على وضعه فى المنتدى

لوحة الاداره>>مظهر المنتدى>>التومبلايتات و القوالب>>إدارة عامة>>topics_list_box>>اضغط على تعديل تومبلايت جديد يظهر صورة وصف الموضوع بشكل بنبثق حصريا  Editer



قوم بالبحث عن الكود التالي:
الكود:
    {topics_list_box.row.topic.
switch_description.TOPIC_DESCRIPTION}

ونستبدله بهذا الكود
الكود:
    <a rel="lightbox" href="{topics_list_box.row.topic.
switch_description.TOPIC_DESCRIPTION}
"id="hanckidescpopup"><img 
class="hanckidesc" src="
{topics_list_box.row.topic.switch_
description.TOPIC_DESCRIPTION}"/></a>
الكود الاخر فى ورقة تصميم css
لوحة الاداره >> مظهر المنتدى >> الصور والألوان >> ألوان >> ورقة تصميم css
تعطيل كود ال CSS الأصلي: لا
تفعيل نظام تحسين مردودية ال CSS المشخص: نعم
ثم اضف هذا الكود الى ورقة تصميم css

الكود:
   pun tbody.statused td.tcl 
{padding-right: 10px !important;}img.hanckidesc {    
 float: right !important;    }
img.hanckidesc 
{max-width: 150px !important; 
 max-height: 50px !important;
margin-top: -10px !important;padding: 1px !important; 
 z-index: 10 !important; 
-webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
 -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);      }
    .lightboxOverlay {      top: 0;      left: 0;      z-index: 999;
background-color: black;
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); 
opacity: 0.8; display: none;  position:fixed;}
.lightbox { position: absolute;  left: 0;  width: 100%; 
 z-index: 999; line-height: 0;      font-weight: normal;}
.lightbox img.lb-image { position:fixed;  margin: auto; top: 0;
 left: 0; bottom: 0; right: 0;    }

ثم نتوجه الى:



لوحة الاداره >> عناصر إضافيه >> HTML و JAVASCRIPT 



إدارة أكواد Javascript
تفعيل نظام إدارة أكواد Javascript : نعم
إنشاء كود جديد
العنوان * : أي شيء تريد
أضف الكود الى: جميع الصفحات
ثم نضع الكود التالي:



الكود:
$(document).ready(function() {    
$.getScript('https://raw.github.com/lokesh/li
ghtbox2/master/js/lightbox.js');}); $(function () {      
 $('input[name="description"]').change(function () {          
 var ValidFileExtension = ['jpg', 'JPG', 'jpeg', 'JPEG', 
'png','PNG', 'gif', 'GIF', 'bmp','BMP'];        
if ($.inArray($(this).val().split('.').pop()
.toLowerCase(),ValidFileExtension) == -1) {            
alert("Purtroppo, sono utilizzabili solo queste estensioni:
'.jpeg','.jpg', '.png', '.gif', '.bmp'");        }    })})
ملاحظة: يجب علينا وضع رابط الصورة التى ستظهر فى وصف الموضوع 
مثال ؟
تومبلايت جديد يظهر صورة وصف الموضوع بشكل بنبثق حصريا  11111112
https://i.servimg.com/u/f19/19
/08/62/30/11111112.png




تم الشرح بواسطتى
وهبة الساحر
المتطوع المساعد



ارجوا ان اكون قد افدتكم
انتهي الموضوع

تومبلايت جديد يظهر صورة وصف الموضوع بشكل بنبثق حصريا  221706
تومبلايت جديد يظهر صورة وصف الموضوع بشكل بنبثق حصريا  201477


الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://3arb-way.yoo7.com
 
تومبلايت جديد يظهر صورة وصف الموضوع بشكل بنبثق حصريا
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» [تومبلايت] كود وضع صورة مائية "كلنا غزه" في أعلى المنتدى بشكل رائع
» [كود Css] اجعل اقتباس منتداك بشكل جديد حصريا من Yassine Bablil
» لماذا يظهر عنوان الموضوع بشكل عامودي
» مشكلة عند تسجيل اي عضو جديد يظهر بشكل تلقائي مشرف
» اريد تغير رابط صفحه هتمل

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