Like And Win VIP Hack
Click Like To WIN 30 Day VIP Hack

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

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

 
Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0
تم تحديثهذه التدوينة لحذف اكواد 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'/> 

Related Post

كود الإعجاب التلقائي بصفحة فيسبوك لكل زوار مدونتك ... السلام عليكم ورحمة الله وبركاته. هل تعاني من نقص معجبين صفحاتك وتريد الحصول على المزيد بأي طريقة؟ هنا الحل اليوم سوف اشارك معكم كود الإعجاب التلقائي ب...
الطريقة الصحيحة لإضافة وإستخدام خاصية إقرأ المزيد... الإضافة الأكثر إستخداماً هي إضافة إقرأ المزيد وفي رايي هي اهم إضافة للحفاظ على مظهر وسرعة المدونات من يستغني عن تلك الإضافة يحرم مدونته من الس...
بنرات تتغير مع تحديث الصفحة هل فكرت يوماً بان تضع مواضيع مختارة من مدونتك لكن لم تجد مساحة مناسبة في القالبهل كنت ترغب في إضافة سلايدر لمدونتك لكن خفت من الثقل هل أردت إظهار رسائ...
اضافة القران الكريم الي مدونة بلوجر quran... بسم الله الرحمن الرحيم مرحبا بكم اخواني في مدونة مسطرة و اليوم موضوعنا عن اضافة جميلة جدا الا و هي كود اضافة القران الكريم الي مدونة بلوجر و ...
Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0

0 Comments ON " إضافة فتح الصور بصندوق LightBox "
leave a response

*

Copyright © All Rights Reserved 2014→2017 To Add-Fast.CoM