CODEWITHSUNDEEP
jqueryfancybox
mcl
mcl

Reputation: 691

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 ?

Thanks

mcl

Upvotes: 0

Views: 1282

Answers (1)

JFK
JFK

Reputation: 41143

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

Upvotes: 2

Related Questions