0


تم تحديثهذه التدوينة لحذف اكواد Jquery في الموضوع الأول . 

ا
لسلام عليكم إخواني الكرام هذه التدوينة مخصصة للجميع أو بالأحرى من لا تتواجد لديهم خاصية تكبير الصورة التي تكون بداخل

 الموضوع بمعنى عند الضغط على الصورة تظهر بصندوق وبحجمها الطبيعي أيضا تتيح لك إظهار صور أخرى بالموضوع ،
 العديد من القوالب لا تتوفر لديهم هاته الخاصية وتوجد قليل من الشروحات لكن معقدة وفي الأغلبية لا تعمل ، والطريقة التي  سأقدمها لكم هي سهلة وفعالة 100% 


معاينة

شرح طريقة التركيب

قبل كل شيئ طبق ما في الصورة

1 . توجه لقالب >> تحرير 
2. ابحث بإستعمال CTRL+F عن  <b:skin/><[[
3. ضع الكود التالي قبله [ فوقه ]
إضغط مرتيين لتحديد الكل

/* CSS Image Lightbox Ar1web */
#jquery-overlay{position:absolute;top:0;left:0;z-index:95;width:100%;height:500px;}
#jquery-lightbox{position:absolute;top:0;left:0;width:100%;z-index:100;text-align:center;line-height:0}
#jquery-lightbox a,#jquery-lightbox a:hover{border:none;}
#jquery-lightbox a img{border:none;}
#lightbox-container-image-box{position:relative;background-color:#fff;width:250px;height:250px;margin:0 auto;max-width:100%!important;}
#lightbox-container-image{padding:10px;}
#lightbox-loading{display:none!important;}
#lightbox-nav{position:absolute;top:25%;left:0;height:100%;width:100%;z-index:10}
#lightbox-container-image-box > #lightbox-nav{left:0;transition:All 0.2s ease;}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;display:block;transition:All 0.2s ease;}
#lightbox-nav-btnPrev{left:10%;float:left;transition:All 0.2s ease;}
#lightbox-nav-btnNext{right:10%;float:right;transition:All 0.2s ease;}
#lightbox-container-image-data-box{font-size:10px;font-family: 'Open Sans',Helvetica,sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;overflow:hidden;max-width:100%!important;padding:0 10px;}
#lightbox-container-image-data{padding:0 10px;color:#818d99}
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:normal}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em}

4. ابحث عن </body> ضع الكود التالي فوقه

<script src='https://ar1web-com.googlecode.com/svn/Hm/previewimg.js' type='text/javascript'/> 

إرسال تعليق

جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).

 
Top