fancyBox2: Slideshow Buttons and Image Border

Question

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 s

Answer 1

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;
}

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;
}

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

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 ;)