More

إضافة فتح الصور بصندوق LightBox

" Here you can search for everything you want and you will find it as soon as possible "
تم تحديثهذه التدوينة لحذف اكواد 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'/> 


You may also like  اضافة القران الكريم الي مدونة بلوجر quran
Tags
Show More
" Here you can search for everything you want and you will find it as soon as possible "

Scorpion

Welcome To The Biggest Site For Android Games And Apps You Can Find New Modded Games And Game Cheat & CrossFire Hacks You Can Find Daily Update Only Here Don’t Forget To Like Page in Facebook And Subscribe To Blog

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected

Please consider supporting us by disabling your ad blocker