fancyBox2:幻灯片按钮和图像边框 [英] fancyBox2: Slideshow Buttons and Image Border

问题描述

是否只能打开/关闭幻灯片放映按钮和位置 在标题区域内的某个地方?我想要这个的原因是 因为按钮栏减小了所显示图像的大小，我只想选择 要打开或关闭幻灯片，导航是通过正常的左右方向完成的 点击图片.

Is it possible to only have the slideshow on/off button and position that somewhere inside the title area ? My reason for wanting this is because the button bar reduces the size of the image shown and I only want to have the option to turn the Slideshow On or Off, Navigation is done by the normal left and right clicking of the image.

是否可以缩小图像周围的边框，尤其是底部边框?我尝试了用于填充和边距的设置，但得到了一些意外的结果.有例子吗 确切语法的任何地方?

Is it possible to reduce the border around the image, especially the bottom border ? I tried settings for padding and margin, but got some unexpected results. is there an example anywhere of the exact syntax ?

谢谢

mcl

推荐答案

您可能需要创建自己的播放/暂停按钮.在我的情况下，我使用以下css从fancybox按钮(helpers/fancybox_buttons.png)中创建了它们:

You may need to create your own play/pause buttons. In my case I created them out of the fancybox buttons (helpers/fancybox_buttons.png) with this 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;
}

和应用于fancybox-title类的一些额外的(内联CSS)样式来调整我的title(可选):

and some extra (inline css) style applied to the fancybox-title class to tweak my title (optional):

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

然后执行此操作的脚本(helpers和afterLoad是要设置的重要选项):

Then the script that does the trick (helpers and afterLoad are the important options to set) :

$(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

请记住，无论您是否未使用helpers> buttons选项，您仍需要加载fancybox的按钮js和css文件.

Just bear in mind that you still need to load the fancybox's buttons js and css files regardless that you are not using the helpers > buttons option.

有效的此处演示.使用风险自负；)

A working DEMO HERE. Use at your own risk ;)

这篇关于fancyBox2:幻灯片按钮和图像边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！