fancyBox2：幻灯片按钮和图像边框

Question

是否有可能只有幻灯片开/关按钮和位置 在标题区域内的某个地方？我想要这样做的原因是 ，因为按钮栏缩小了显示图像的大小，我只想让选项 打开或关闭幻灯片放映，导航是通过正常的左侧和右侧 单击图像完成的。

是否有可能减少图像边界，特别是底部边界？我尝试了填充和边距设置，但得到了一些意想不到的结果。有没有一个例子 任何地方的确切语法？

感谢

MCL

Answer 1

您可能需要创建自己的播放/暂停按钮。在我来说，我创造出来的的fancybox按钮（助手/ fancybox_buttons.png）这个CSS的：

a.myPlay { 
/* set the proper path to the png file */ 
background-image: url("fancybox2.0.4/helpers/fancybox_buttons.png"); 
background-color: #2a2a2a; 
background-repeat: no-repeat; 
display: block; 
line-height: 30px; 
text-indent: -9999px; 
width: 30px; 
height: 30px; 
float: left; 
margin-right: 20px; 
} 
a.myPlay { 
background-position: 0 -30px; 
} 
a.myPlayON { 
background-position: -30px -30px; 
} 

和一些额外的（内联CSS）应用到fancybox-title类样式来调整我的title（可选）：

.fancybox-title { 
min-height: 30px; 
line-height: 30px; 
} 

然后该做的伎俩（helpers和afterLoad是设置的重要选项）脚本：

$(document).ready(function() { 
$(".fancybox").fancybox({ 
    nextEffect : 'fade', 
    prevEffect : 'fade', 
    openEffect : 'fade', 
    closeEffect : 'fade', 
    closeBtn : 'true', 
    arrows : 'true', 
    helpers : { 
    title : { type : 'inside' } 
    }, 
    afterLoad: function(){ 
    if($.fancybox.player.isActive){ 
    this.title = '<a href="javascript:$.fancybox.play();" title="Slideshow" class="myPlay myPlayON" onclick="$(\'.myPlay\').toggleClass(\'myPlayON\')">pause</a> Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : ''); 
    } else { 
    this.title = '<a href="javascript:$.fancybox.play();" title="Slideshow" class="myPlay" onclick="$(\'.myPlay\').toggleClass(\'myPlayON\')">play</a> Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : ''); 
    } // if else 
    } // afterLoad 
}); //fancybox 
}); // ready 

请注意，您仍然需要加载fancybox的按钮js和css文件，无论您是否使用helpers>buttons选项。

A正在工作DEMO HERE。使用风险自负;）