[英]Custom Fancybox v.2 title positioning
嘗試將Fancybox標題放置在圖像的左側。
您可以在http://www.josephfrederick.com上看到,我能夠破解CSS並移動標題,但是Fancybox並未計算新寬度,因此燈箱未居中(而是居中)。 這會在較小的屏幕上導致水平圖像出現大問題。
我能夠在Fancybox 1.4版中做到這一點(例如本網站: http ://sarahewain.com/index.php),但是Fancybox 2中的情況有所變化。
謝謝你的盡心幫助。 並告訴我您是否還需要其他建議。
這是對應的CSS ...
.fancybox-outer {
background: white repeat scroll 0% 0%;
text-shadow: none;
margin-left:-180px; /*must match A*/
border: 0px solid #000;
}
.fancybox-inner {
position:relative;
left:180px; /*must match A*/
}
.fancybox-image {
padding-left:0px;
}
.fancybox-prev {
top:30%;
left:-220px;
right:auto;
width: 36px;
height: 111px;
background: url(images/arrow_prev.png) no-repeat scroll 0% 0%;
opacity: 0.3;
filter:alpha(opacity=30);
}
.fancybox-next {
top:30%;
width: 36px;
height: 111px;
left:auto;
right:-38px;
background: url(images/arrow_next.png) no-repeat scroll 0% 0%;
opacity: 0.3;
filter:alpha(opacity=30);
}
.fancybox-next:hover, .fancybox-prev:hover {
opacity: 1.0;
filter:alpha(opacity=100);
}
.fancybox-next span, .fancybox-next:hover span {
display:none;
}
.fancybox-prev span, .fancybox-prev:hover span {
display:none;
}
.fancybox-title {
position:absolute;
width:160px; /*must match B*/
left:-160px; /*must match B*/
bottom: 20px;
}
js
jQuery(".my_class").fancybox({
margin : [0, 0, 0, 160],
helpers : {
title : {
type : 'outside'
}
}
});
的CSS
.fancybox-title {
position:absolute;
width:160px;
left:-160px;
bottom: 20px;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.