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 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 ?

Thanks

mcl

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 😉