CODEWITHSUNDEEP
jqueryfancybox
Thomas Antonini
Thomas Antonini

Reputation: 1

Jquery Fancybox 2 Buttons Helper Position

I know that you can pass information to the fancybox function so customize certain settings, one of them being Top or Bottom for the buttons helper. I also know that you can change the exact position of the buttons by altering the CSS file. However, is there a way to have the buttons automatically adjust to the height of the picture, so that it is always right above the picture.

Upvotes: 0

Views: 1724

Answers (2)

CalleKhan
CalleKhan

Reputation: 1618

I'm solving this for me with an additional little helper.

$('a.lightbox').fancybox({
    closeBtn: false,
    helpers: {
        title: {type: 'float'},
        buttons: {
            skipSingle: true
        },
        custom: {}
    }
});

$.fancybox.helpers.custom = {
    defaults: {
        position: 'top',
        space: 0
    },
    onUpdate: function(opts, obj) {
        this.setPosition(opts, obj);
    },
    afterShow: function(opts, obj) {
        this.setPosition(opts, obj);
    },
    setPosition: function(opts, obj) {
        // default position
        var top = '20';
        var offset = $('.fancybox-wrap').offset();
        if (opts.position === 'top') {
            top = (offset.top - ($('#fancybox-buttons').height() + opts.space));
        } else if (opts.position === 'bottom') {
            top = (offset.top + $('.fancybox-wrap').height() + opts.space);
        }
        $('#fancybox-buttons').css({top: top + 'px', position: 'absolute'});
    }
};

It is possible to set the position (top / bottom) of the controls and a space.

Cause I get in trouble with the position() function and css position 'fixed' on mobile devices, I'm using the offset() function and set the css position to 'absolute'

HTH

Claus

Upvotes: 1

caramba
caramba

Reputation: 22480

you could edit this "top" in #fancybox-left-ico, #fancybox-right-ico {top:50%;} or change it to {top:-20px;} or what ever you like in /js/fancybox-1.3.4/jquery.fancybox-1.3.4.css on line 153 which looks like this: 

#fancybox-left-ico, #fancybox-right-ico {
    cursor: pointer;
    display: block;
    height: 30px;
    left: -9999px;
    margin-top: -15px;
    position: absolute;
    top: 50%;                   /* this line is what you want to change */
    width: 30px;
    z-index: 1102;
}

EDIT FOR OLDER FANCY

edits you can do in the following file: http://www.thomasantonini.webuda.com/fancybox/helpers/jquery.fancybox-buttons.css?v=1.0.5

first at line 8: this will moce up the fancybox buttons with the player option

#fancybox-buttons.top {
    top: 0;
}

next change at line 146: this changes the click right (next) arrow

.fancybox-next span {
    background-position: 0 -72px;
    right: 0;
    top: -15px;
}

and at line 141: changes the prev arrow

.fancybox-prev span {
    background-position: 0 -36px;
    left: 10px;
    top: -15px;
}

with those arrows changes they are on the same height as the close button. Is this what you where looking for?

Upvotes: 0

Related Questions