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

انضم إلى المنتدى ، فالأمر سريع وسهل

ايجي توداي
تومبلايت جديد يظهر صورة وصف الموضوع بشكل بنبثق حصريا  13401710
ايجي توداي
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

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

اذهب الى الأسفل

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

مُساهمة من طرف 5ameS الجمعة يوليو 07, 2017 10:02 pm

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

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

لوحة الاداره>>مظهر المنتدى>>التومبلايتات و القوالب>>إدارة عامة>>topics_list_box>>اضغط على تعديل [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



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


الكود:
    {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'");        }    })})
ملاحظة: يجب علينا وضع رابط الصورة التى ستظهر فى وصف الموضوع 
مثال ؟
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]



5ameS
5ameS
المشرف العام
المشرف العام

القوس
الجنس : ذكر
الفأر
عدد مشاركاتى : 351
السٌّمعَة : 0
تاريخ التسجيل : 22/04/2010
•عُمرِےُ *: : 27
•مُوِقُعـےُ •|: •مُوِقُعـےُ •|: : egy-2day.yoo7.com

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

الرجوع الى أعلى الصفحة

- مواضيع مماثلة

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