Fancybox 2。
我想将所有“按钮助手”按钮添加到标题中。
使标题与左边缘对齐,而按钮与右边缘对齐。
拜托,谁能告诉我,我该怎么办?
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;
}
最佳答案
这是我对fancybox所做的最奇怪的事情之一,但这只是为了好玩。
首先,如果要将按钮助手添加到title
,则必须确保每个链接都具有title
属性(某些链接可能没有)...因此,您可以从以下开始:
$(document).ready(function () {
$(".fancybox").each(function () {
// make sure every element has the tile attribute
if (!$(this).attr("title")) {
$(this).attr("title", " "); //no-break space
}
})
}); // ready
这将为没有链接的任何链接添加一个空白(不间断空格)
title
。另一方面,将Buttons助手移动到
title
可能会遇到一些问题,因此最好的选择是克隆它,然后将克隆追加到title
。让我们为克隆设置一些CSS属性,以便将其放置在
title
中我们想要的位置:/* hide the actual buttons helper */
#fancybox-buttons {
display: none
}
/* position the clone : notice the class "clone" */
#fancybox-buttons.clone {
position: absolute;
top: 5px;
right: 0;
}
/* also position the child ul */
#fancybox-buttons.clone ul {
right: 0;
margin: 0;
position: absolute;
}
然后,我们将在fancybox自定义脚本中使用
afterShow
回调:克隆按钮助手
将类
clone
添加到克隆的元素中将其附加到fancybox
title
显示(淡入)
请注意,我们将设置
title
位置inside
使其可行。还要注意,由于在加载了fancybox之后添加了按钮辅助器,因此我们需要等待它才能克隆它。这是setTimeout
派上用场的地方:$(document).ready(function () {
$(".fancybox").each(function () {
// make sure every element has the tile attribute
if (!$(this).attr("title")) {
$(this).attr("title", " "); //no-break space
}
}).fancybox({
modal: true,
helpers: {
title: {
type: 'inside'
},
buttons: {}
},
afterShow: function () {
// wait for the buttons helper
var buttons = setTimeout(function () {
$("#fancybox-buttons")
.clone(true, true) // clone with data and events
.attr("class", "clone") // set class "clone" (and remove class "top")
.appendTo(".fancybox-title") // append it to the title
.fadeIn(); // show it nicely
}, 100); //setTimeout
} // afterShow
}); // fancybox
}); // ready
看到它正常工作:JSFIDDLE
使用后果自负;)
编辑:
在上一个演示中,单击任何按钮时,图标都不会更改为OP指出的相应功能。我们需要一些额外的回调,以将图标“切换”功能添加到克隆的按钮中:
onPlayStart: function () {
$("#fancybox-buttons.clone").find(".btnPlay").attr('title', 'Pause slideshow').addClass('btnPlayOn');
},
onPlayEnd: function () {
$("#fancybox-buttons.clone").find(".btnPlay").attr('title', 'Start slideshow').removeClass('btnPlayOn');
},
onUpdate: function () {
$("#fancybox-buttons.clone").find(".btnToggle").toggleClass('btnToggleOn');
}
查看新的分叉的JSFIDDLE
编辑#2:
要解决在锁定的叠加层设置为false-
onUpdate
时滚动(根据OP的注释)时overlay : {locked:false}
按钮切换的问题,我们必须替换以下代码:onUpdate: function () {
$("#fancybox-buttons.clone").find(".btnToggle").toggleClass('btnToggleOn');
}
这样 :
onUpdate: function () {
var toggle;
toggle = $("#fancybox-buttons.clone").find(".btnToggle").removeClass('btnDisabled btnToggleOn');
if (this.canShrink) {
toggle.addClass('btnToggleOn');
} else if (!this.canExpand) {
toggle.addClass('btnDisabled');
}
}
查看新的JSFIDDLE