CODEWITHSUNDEEP
jquerycssfancybox-2
martincarlin87
martincarlin87

Reputation: 11052

jQuery: Center fancybox in viewport

I am currently using fancybox version 2 to display my images when a thumbnail is clicked but I can't seem to get the fancybox to sit in the middle of the viewport, vertically speaking, since horizontally it's fine.

I've tried quite a few things and this is the latest:

CSS

.fancybox-wrap { 
    position: fixed !important;
    top: 50px !important;
}

jQuery

jQuery(document).ready(function() {
    $(".fancybox-wrap").css("position", "absolute");

    // fancybox initialisation etc

});


$(window).scroll(function() {
    $('.fancybox-wrap').css('top', $(this).scrollTop() + "50px");
});

Does anyone have any ideas?

Upvotes: 3

Views: 15904

Answers (3)

Marina Zubkova
Marina Zubkova

Reputation: 95

The only thing you need to do is add to website css

html, body {height: 100%;}

And fancybox will position image at the screen center instead of page center.

Upvotes: 4

Sreedhar
Sreedhar

Reputation: 141

$(window).bind('resize', function() {
    var top = ($(window).height() / 2) - ($(".fancybox-wrap").outerHeight() / 2);
    var left = ($(window).width() / 2) - ($(".fancybox-wrap").outerWidth() / 2);
    $(".fancybox-wrap").css({ top: top, left: left});
}).trigger('resize');

http://jsfiddle.net/aGhxK/23/

Upvotes: 3

Vitor Ussui
Vitor Ussui

Reputation: 78

This sets left and top using position: absolute dinamically:

http://jsfiddle.net/aGhxK/1/

Upvotes: 0

Related Questions