تغيير در نحوه نمايش lightbox؟

[javad583]

دوستان سلام، سوالی که دارم تقريبا ربطی به مامبو نداره اما چون در بعضی سايت های مامبویی از lightbox استفاده شده و خودمم هم همینجا باهاش آشنا شدم گفتم اينجا بپرسم.

اگه این صفحه رو ببينيد :: <b><font color=red>فقط کاربران عضو انجمن می توانند لینک ها را مشاهده کنند</font></b> پس از لود کامل صفحه میبینید که هنگام اجرا lightbox ، کادر تصاوير با یه مقدار فاصله از بالای صفحه نمايش داده میشه. حالا من میخام این فاصله وجود نداشته باشه. باید چه مقداری رو تغيير بدم؟

اين هم نمونه CSS موجود ::



#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#lightbox a img{ border: none; }
#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#imageContainer{
padding: 10px;
}
#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer&gt;#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../../img/blank.gif) no-repeat;
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../../img/prev.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../../img/next.gif) right 15% no-repeat; }
#imageDataContainer{
font: 10px Tahoma, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%
}
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: right; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: right; padding-bottom: 1.0em; font:12px Tahoma ; }
#imageData #bottomNavClose{ width: 66px; float: left; padding-bottom: 0.7em; }
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}

[atoofy]

سلام .شما در قسمت زير
#imageContainer{
padding: 10px;
}
كد را به اين تغيير بديد:

#imageContainer{
padding: 10px;
margin-top: ...px;
}
و به جاي ... ميزان اندازه ي مورد نظر از بالاي صفحه را وارد كنيد (به پيكسل) ببينيد درست مي شه يا نه؟

يــــــــــــــــــــــــ اعـــــــــــــــــــلي

[javad583]

اولا ممنون از توجهتون، ولی مشکل کماکان پابرجاست ...

[atoofy]

سلام . خوب اين دفعه كد زير را
#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
به اين كد تغيير بديد:

#outerImageContainer{
position: absolute;
margin-top: ...px;
background-color: #fff;
width: 250px;
height: 250px;
}

و به جاي ... ميزان اندازه ي مورد نظر از بالاي صفحه را وارد كنيد (به پيكسل) ببينيد درست مي شه يا نه؟ اين دفعه اگه خدا بخواد بايد درست بشه. فقط دقت كنيد كه در كد بالا چند تغيير ايجاد شده.

يــــــــــــــــــــــــ ــــــاعـــــــــــــــــ ـــــــلي

[javad583]

نه متاسفانه هنوز که هنوزه درست نشده. دوستان اگه ممکنه بجای گمانه زنی، روی نمونه عملی کد امتحان کنند.

---
پاورقی :: انتظار و تحکمی در کار نیست، تنها یه خواهش از یک برنامه نویسه که دلش میخواد کد های HTML قشنگی داشته باشه !!

[ubuntulinuxman]

به احتمال زیاد مشکل شما فقط در IE6 هست
لینک زیر وبسایت اصلی لایت باکس هست، شاید برسی کد های اون بتونه بهتون کمک کنه

<b><font color=red>فقط کاربران عضو انجمن می توانند لینک ها را مشاهده کنند</font></b>
اگر نتونستید کاری بکنید میتونید لایت باکس رو از این سایت دانلود کنید و جایگزین لایت باکسی که خودتون استفاده کردید بکنید
اینم یه نمونه کوچیک که با استفاده از کد های لایت باکس ارائه شده در سایت بالا ساخته شده


mapicioc.com

[javad583]

ubuntulinuxman عزیز، ممنون از توجهت اما سایتی که شما معرفی کردی هم همین موردی رو که من گفتم داره (منظورم وجود فاصله از بالای صفحه هست)

در ضمن من با IE 6/7 - Firefox - Safari - Opera تست کردم که نتیجه یکسان بوده.

[jbasoft]

سلام

دوست عزیز فکر کنم تو تنظیمات خود لایت باکست position: absolute تعریف شده که باید اون رو به position: relative تبدیلش کنی....

دوم اینکه padding ها رو بربر 0 قرار بده.

سوم اینکه اگر درست نشد به حالت اول برش گردون و Position تصاویر رو در قالب CSS برای افقی center و برای عمودی top قرار بده.

چهارم اگر بازهم درست نشد ... در outerImageContainer و در قسمت position: relative اونرو به position: absolute تبدیل کن.البته با همون مقادیر اولیه دیگر آیتم ها ... بقیه رو عوض نکن.

[ubuntulinuxman]

ubuntulinuxman عزیز، ممنون از توجهت اما سایتی که شما معرفی کردی هم همین موردی رو که من گفتم داره (منظورم وجود فاصله از بالای صفحه هست)

در ضمن من با IE 6/7 - Firefox - Safari - Opera تست کردم که نتیجه یکسان بوده.


جالبه! ولی سایتی که من معرفی کردم توی هیچ مرورگری و توی سیستم عاملی این مشکل رو نداره!
الان هم دوباره با چهار تا مرورگر چک کردم هیچ فاصله ای از بالا نداره، سایت رسمی لایت باکس هم این مشکلی رو که شما میگید نداره، هیچ فاصله ای از بالای صفحه نیست