Question

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

是否可以减少图像周围的边框，尤其是底边？我尝试了填充和边距的设置，但得到了一些意想不到的结果。有一个例子任何地方都有确切的语法？

由于

MCL

Answer 1

您可能需要创建自己的播放/暂停按钮。在我的情况下，我使用此css从fancybox按钮（helpers / fancybox_buttons.png）创建它们：

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＆gt; buttons选项。

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

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

1 个答案: