Fancybox 2.如何將按鈕助手中的按鈕添加到標題(Fancybox 2)?
我想爲標題添加所有「Button helper」按鈕。 使標題與左邊緣對齊,並將按鈕與右邊緣對齊。
請問誰能告訴我,我該怎麼辦?
jquery.fancybox.css:
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-tmp
{
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
}
.fancybox-skin {
bottom: 15px;
position: relative;
background: DarkGreen;
color: #444;
text-shadow: none;
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-outer, .fancybox-inner {
position: relative;
}
.fancybox-inner {
overflow: hidden;
}
.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: 100%;
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
}
.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
visibility: hidden;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
.fancybox-overlay {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 8010;
}
.fancybox-title {
visibility: hidden;
font: 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
position: relative;
text-shadow: none;
z-index: 8050;
}
.fancybox-opened .fancybox-title {
visibility: visible;
}
.fancybox-title-inside-wrap {
position: relative;
padding-bottom: 5px;
font-weight: bold;
color: white;
text-align: left;
}
jquery.fancybox-buttons.css:
#fancybox-buttons {
display: none;
position: fixed;
right: 10px;
width: 100%;
z-index: 8050;
}
#fancybox-buttons ul {
display: block;
width: 133px;
height: 25px;
margin: 0 auto;
padding-right: 5px;
list-style: none;
}
#fancybox-buttons ul li {
float: left;
margin: 0;
padding: 0;
}
#fancybox-buttons a {
display: block;
width: 27px;
height: 25px;
text-indent: -9999px;
background-color: DarkGreen;
background-image: url('http://2.bp.blogspot.com/-5CNF6M2iOPM/UfVFckJ9jiI/AAAAAAAABjY/WT53trk2XUE/s1600/fancybox_buttons.png');
background-repeat: no-repeat;
outline: none;
}
#fancybox-buttons a:hover {
background-image: url('http://4.bp.blogspot.com/-M6nS5WXq-lI/UfVFcvlh7MI/AAAAAAAABjU/fMbwIP_esaQ/s1600/fancybox_buttons2.png');
background-color: ForestGreen;
}
#fancybox-buttons a.btnPrev {
background-position: -1px -3px;
}
#fancybox-buttons a.btnNext {
background-position: -31px -3px;
}
#fancybox-buttons a.btnPlay {
background-position: -1px -33px;
}
#fancybox-buttons a.btnPlayOn {
background-position: -31px -33px;
}
#fancybox-buttons a.btnToggle {
background-position: -1px -63px;
}
#fancybox-buttons a.btnToggleOn {
background-position: -31px -63px;
}
#fancybox-buttons a.btnClose {
height: 25px;
width: 25px;
background-position: -63px -3px;
background-color: DarkRed;
background-image: url('http://4.bp.blogspot.com/-M6nS5WXq-lI/UfVFcvlh7MI/AAAAAAAABjU/fMbwIP_esaQ/s1600/fancybox_buttons2.png');
}
#fancybox-buttons a.btnClose:hover {
background-color: Red;
}
#fancybox-buttons a.btnDisabled {
background-color: DarkGreen;
background-image: url('http://2.bp.blogspot.com/-5CNF6M2iOPM/UfVFckJ9jiI/AAAAAAAABjY/WT53trk2XUE/s1600/fancybox_buttons.png');
cursor: default;
}
感謝的想法。 我改變了你的腳本。 我的版本:[http://jsfiddle.net/5QbeL/show/](http://jsfiddle.net/5QbeL/show/) 但是在您的和我的腳本中,「播放/暫停」按鈕和「尺寸切換「按鈕背景(圖標)在我點擊其中任何一個後不會改變。 1)嘗試暫停幻燈片按暫停按鈕,該按鈕仍然會顯示暫停按鈕。 2)嘗試按下相應的按鈕來展開或縮小圖像,並且該按鈕不會改變其背景(圖標)。 –
@WalterStolz:看到我編輯的答案。如果你考慮的話也請http://meta.stackexchange.com/a/5235 – JFK
我想指定關於「onUpdate」回調方法函數的工作。 如果未顯示覆蓋鎖定參數(默認值),則切換大小按鈕不會更改滾動時的背景(圖標)。這很好。 如果該參數設置爲假值,則切換大小按鈕會在滾動時更改圖標。 例如:[http://jsfiddle.net/ajk89/show/](http://jsfiddle.net/ajk89/show/) 如何禁用此功能? –