EnglishFrenchGermanSpainItalianDutchRussianPortugueseArabic

تغير شكل lightbox الخاص ببلوجر بآخر مميز

السلام عليكم
كيف الحال إخواني اليوم يستم طرح تطبيق مميز على خصائص مدونات بلوجر
هذا التطبيق سيغير شكل lightbox الخاص ببلوجر بآخر مميز
صورة من الشكل الجديد

تغير شكل lightbox الخاص ببلوجر بآخر مميز

ما هي خاصية lightbox أولا؟
هذه الخاصية تهم الصور التي ترفعها في مواضيع مدونتك بحيث عندما يضغط الزائر على الصورة لروئيتها تضهر هذه الخاصية جميع الصور المتوفرة في الموضوع على شكل سلايد شو وهذه الإضافة ستغير شكله كما في مثال الصورة

لتطبيق هذا التغير على خاصية lightbox اتبع الخطوات التالية:
إبحث عن الوسم التالي ]]></b:skin>
ثم فوقه ضع الكود التالي

#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;}
#jquery-lightbox{position:absolute;top:10%;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;max-width: 960px;max-height: 560px;margin:0 auto;}
#lightbox-container-image{padding:10px;}
img#lightbox-image {max-height: 540px;max-width: 940px;}
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0;}
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width: 100%;z-index:10;}
#lightbox-container-image-box > #lightbox-nav{left:0;}
#lightbox-nav a{outline:none;}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block;}
#lightbox-nav-btnPrev{left:10%;float:left;}
#lightbox-nav-btnNext{right:10%;float:right;}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;max-width: 940px;;padding:0 10px 0;}
#lightbox-container-image-data{padding:0 10px;color:#555;}
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left;}
#lightbox-image-details-caption{font-weight:bold;}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em;}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em;}
هذا الأول يخص اللون الأبيض

#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;}
#jquery-lightbox{position:absolute;top:10%;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:#000;max-width: 960px;max-height: 560px;margin:0 auto}
#lightbox-container-image{padding:10px;}
img#lightbox-image {max-height: 540px;max-width: 940px;}
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0}
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width: 100%;z-index:10}
#lightbox-container-image-box > #lightbox-nav{left:0;}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block}
#lightbox-nav-btnPrev{left:10%;float:left}
#lightbox-nav-btnNext{right:10%;float:right}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#000;margin:0 auto;line-height:1.4em;overflow:auto;max-width: 940px;;padding:0 10px 0}
#lightbox-container-image-data{padding:0 10px;color:#fff}
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:bold}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em}
وهذا الكود يخص اللون الأسود

بعد ان اخترت اللون الذي تريد ووضعته فوق الوسم ]]></b:skin>
إبحث أيضا عن الوسم التالي </head>
ثم فوقع ضع هذا الكود

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
    <script src='http://helplogger.googlecode.com/svn/trunk/custom-lightbox-for-blogger.js' type='text/javascript'/>
يخص الكود الاول اي اللون الابيض

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
    <script src='http://helplogger.googlecode.com/svn/trunk/custom-lightbox-for-blogger-black.js' type='text/javascript'/>

يخص الكود التاني اي اللون الاسود

الآن إنتهينا من تركيب الشكل الجديد الخاص بخاصية lightbox
آخر خطوة هي إيقاف تشغيل النمط القديم لخاصية lightbox  لكي يشتغل النمط الجديد الذي قمنا بتركيبه
فقط اتبع الصورة التالية

تغير شكل lightbox الخاص ببلوجر بآخر مميز
هذا كل شيئ اتمنى ان تكون الإضافة قد لاقت إعجابكم أي سؤال لا تتردد في طرحه
بالتوفيق للجميع ودمتم في رعاية الله وحفظه

ليست هناك تعليقات:

إرسال تعليق

التالي السابق الرئيسية