title: Move 'toggle size' button fancybox
body: <p>I am currently using a combination of fancybox thumbnails and buttons (only the toggle size button). By default, the buttons appear in the centre of the viewport, I would like to move this to the bottom right hand corner of the image, essentially appearing attached in the same way the close button is or just below the right corner would also be fine.</p>
  
  <p>I have tried space it relative to the viewport width but it doesn't work. Is there a way to position it relative to the image?</p>
  
  <p>I apologise for the abundance of code - I have no idea what to include and what to disregard, so I've put it all in.</p>
  
  <p>If you look at my website (unfinished but I've uploaded it to help) you can see the issue on gallery one.</p>
  
  <p>Shereewalker.com</p>
  
  <p>Any help would be very much appreciated.</p>
  
  <p>Here is my css</p>
  
  <pre><code>    #fancybox-buttons {
      position: fixed;
      left: 0;
      width: 100%;
      z-index: 8050;}
  
  
  #fancybox-buttons.top {top: 10px;}
  
  #fancybox-buttons.bottom {bottom: 10px;}
  
  .fancybox-close {
      position: absolute;
      top: -18px;
      right: -18px;
      width: 36px;
      height: 36px;
      cursor: pointer;
      z-index: 8040; }
  
  #fancybox-buttons ul {
      width: 36px;
      height: 36px;
      cursor: pointer;
      margin: 0 auto;
      list-style: none;}
  
  
  #fancybox-buttons ul li {
      float: left;
      margin: 0;
      padding: 0;}
  </code></pre>
  
  <p>And my javascript</p>
  
  <pre><code>    jQuery(document).ready(function ($) {
     $(".fancybox").fancybox({
      prevEffect  : 'none',
          nextEffect  : 'none',
  
         // API options
         helpers : {
                  title   : {
                  type: 'outside'
                              },
  
             buttons: {},
             thumbs: {
              width   : 10,
                  height  : 10
  
             }
         }
     }); // fancybox
  }); // ready
  </code></pre>
  
  <p>And even more javascript</p>
  
  <pre><code>(function ($) {
      //Shortcut for fancyBox object
      var F = $.fancybox;
  
      //Add helper object
      F.helpers.buttons = {
          defaults : {
              skipSingle : false, // disables if gallery contains single image
              position   : 'top', // 'top' or 'bottom'
              tpl        : '&lt;div id="fancybox-buttons"&gt;&lt;ul&gt;&lt;li&gt;&lt;a class="btnToggle" title="Toggle size" href="javascript:;"&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;'
          },
  
          list : null,
          buttons: null,
  
          beforeLoad: function (opts, obj) {
              //Remove self if gallery do not have at least two items
  
              if (opts.skipSingle &amp;&amp; obj.group.length &lt; 2) {
                  obj.helpers.buttons = false;
                  obj.closeBtn = true;
  
                  return;
              }
  
              //Increase top margin to give space for buttons
              obj.margin[ opts.position === 'bottom' ? 2 : 0 ] += 30;
          },
  
          onPlayStart: function () {
              if (this.buttons) {
                  this.buttons.play.attr('title', 'Pause slideshow').addClass('btnPlayOn');
              }
          },
  
          onPlayEnd: function () {
              if (this.buttons) {
                  this.buttons.play.attr('title', 'Start slideshow').removeClass('btnPlayOn');
              }
          },
  
          afterShow: function (opts, obj) {
              var buttons = this.buttons;
  
              if (!buttons) {
                  this.list = $(opts.tpl).addClass(opts.position).appendTo('body');
  
                  buttons = {
                      prev   : this.list.find('.btnPrev').click( F.prev ),
                      next   : this.list.find('.btnNext').click( F.next ),
                      play   : this.list.find('.btnPlay').click( F.play ),
                      toggle : this.list.find('.btnToggle').click( F.toggle ),
                      close  : this.list.find('.btnClose').click( F.close )
                  }
              }
  
              //Prev
              if (obj.index &gt; 0 || obj.loop) {
                  buttons.prev.removeClass('btnDisabled');
              } else {
                  buttons.prev.addClass('btnDisabled');
              }
  
              //Next / Play
              if (obj.loop || obj.index &lt; obj.group.length - 1) {
                  buttons.next.removeClass('btnDisabled');
                  buttons.play.removeClass('btnDisabled');
  
              } else {
                  buttons.next.addClass('btnDisabled');
                  buttons.play.addClass('btnDisabled');
              }
  
              this.buttons = buttons;
  
              this.onUpdate(opts, obj);
          },
  
          onUpdate: function (opts, obj) {
              var toggle;
  
              if (!this.buttons) {
                  return;
              }
  
              toggle = this.buttons.toggle.removeClass('btnDisabled btnToggleOn');
  
              //Size toggle button
              if (obj.canShrink) {
                  toggle.addClass('btnToggleOn');
  
              } else if (!obj.canExpand) {
                  toggle.addClass('btnDisabled');
              }
          },
  
          beforeClose: function () {
              if (this.list) {
                  this.list.remove();
              }
  
              this.list    = null;
              this.buttons = null;
          }
      };
  
  }(jQuery));
  </code></pre>