More

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

What do you think of this post?
  • Bad ()
  • Boring ()
  • Useful ()
  • Interesting ()
  • Awesome ()
تم تحديثهذه التدوينة لحذف اكواد 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'/> 
What do you think of this post?
  • Bad ()
  • Boring ()
  • Useful ()
  • Interesting ()
  • Awesome ()


You may also like  D3D Hack, WallHack, New Update 2017
Show More

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
Inline
Inline