fancyBox2: кнопки слайд-шоу и границы изображения

Question

Можно ли только включить кнопку включения / выключения слайд-шоу и расположить ее где-нибудь внутри области заголовка?Моя причина этого заключается в том, что панель кнопок уменьшает размер показанного изображения, и я хочу только включить или выключить слайд-шоу. Навигация выполняется обычным щелчком левой и правой кнопки изображения.

Можно ли уменьшить границу вокруг изображения, особенно нижнюю границу?Я пробовал настройки для отступов и полей, но получил неожиданные результаты.есть ли где-нибудь пример точного синтаксиса?

Спасибо

mcl

Answer 1

Возможно, вам понадобится создать свои собственные кнопки воспроизведения / паузы.В моем случае я создал их из кнопок fancybox (helpers / 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

Просто неситепомните, что вам все равно нужно загрузить файлы js и css для fancybox независимо от того, что вы не используете опцию helpers> buttons.

Работающий DEMO HERE .Используйте на свой страх и риск;)