Move 'toggle size' button fancybox

Question

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.

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?

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.

If you look at my website (unfinished but I've uploaded it to help) you can see the issue on gallery one.

Shereewalker.com

Any help would be very much appreciated.

Here is my css

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

And my javascript

    jQuery(document).ready(function ($) {
   $(".fancybox").fancybox({
    prevEffect  : 'none',
        nextEffect  : 'none',

       // API options
       helpers : {
                title   : {
                type: 'outside'
                            },

           buttons: {},
           thumbs: {
            width   : 10,
                height  : 10

           }
       }
   }); // fancybox
}); // ready

And even more javascript

(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        : '<div id="fancybox-buttons"><ul><li><a class="btnToggle" title="Toggle size" href="javascript:;"></a></li></ul></div>'
        },

        list : null,
        buttons: null,

        beforeLoad: function (opts, obj) {
            //Remove self if gallery do not have at least two items

            if (opts.skipSingle && obj.group.length < 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 > 0 || obj.loop) {
                buttons.prev.removeClass('btnDisabled');
            } else {
                buttons.prev.addClass('btnDisabled');
            }

            //Next / Play
            if (obj.loop || obj.index < 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));

Answer 1

If you want to move the toggle button only, you actually need to clone it rather than moving it.

Based on this answer https://stackoverflow.com/a/17888534/1055987, we could tweak it into this :

CSS

/* hide the actual buttons helper */
 #fancybox-buttons {
    display: none;
}
/* position the clone : notice the class "clone" */
 .clone {
    position: absolute;
    top: 5px;
    right: 0;
}
.btnToggle.clone {
    background-position: 3px -60px;
    border-left: 1px solid #111;
    border-right: 1px solid #3e3e3e;
    width: 35px;
    height: 35px;
    background-image: url("{your path}/helpers/fancybox_buttons.png");
    background-color: #333;
}
.clone.btnToggleOn {
    background-position: -27px -60px;
}

Then the jQuery code :

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        helpers: {
            title: {
                type: 'inside'
            },
            buttons: {} // we need this to clone
        },
        afterLoad: function () {
            // make sure we have a title
            this.title = this.title ? this.title : " ";
        },
        afterShow: function () {
            // wait for the buttons helper
            setTimeout(function () {
                $("#fancybox-buttons")
                .find(".btnToggle")
                .clone(true, true) // clone with data and events
                .addClass("clone") // add class "clone"
                .appendTo(".fancybox-title") // append it to the title
                .fadeIn(); // show it nicely
            }, 100); //setTimeout
        }, // afterShow
        onUpdate: function () {
            var toggle = $(".btnToggle.clone").removeClass('btnDisabled btnToggleOn');
            if (this.canShrink) {
                toggle.addClass('btnToggleOn');
            } else if (!this.canExpand) {
                toggle.addClass('btnDisabled');
            }
        }
    }); // fancybox
}); // ready

See JSFIDDLE