jQuery function with fancybox - I'm having refresh problem

Question

jQuery function with fancybox - I'm having refresh problem

Navigation

#1 by (2 votes)
#2 by (2 votes)

3

When you open or close fancybox (I am a programmer php but starting at Javascript with jquery ), in> refresh and back to the top of the content losing the focus of the place that the content was when it triggered fancybox . The action can be seen here ( link ) by clicking on any link that opens the fancybox and the code I am using is this:

$(document).ready(function ($) {
    $('.fancybox').fancybox({
        closeClick: true,
        padding: 0,
        width: 800,
        height: 'auto',
        arrows: true,
        autoSize: false,
        nextClick: true,
            'ajax': {
            dataFilter: function (data) {
                return $(data).find('#primary')[0];
            }
        }
    });
});

javascript jquery fancybox

asked by anonymous 17.02.2014 / 12:23

2 answers

2

I solved the problem with the following code:

$('.fancybox').fancybox({
  padding: 0,
  helpers: {
    overlay: {
      locked: false
    }
  }
});

01.04.2014 / 16:26

How to Turn Wi-Fi on / off on Android? Encapsulating the properties file in a class is a good practice?

score 2 · Accepted Answer

Looking at your site, as there is no position reference using the address bar more specifically the hash area of window.location what happens is that when you enter your fancybox it ends up deleting the scrollbar, taking the value to 0.

A solution is when a person clicks, before displaying their fancybox , you store in a context variable the position of scroll and when you close, you apply the scrolling pro navigation you saved, leading to person back to the original position.

First we get the buttons that have fancybox and give a function to store the value of scrollTop when clicked:

window.lastScrollTop = $(window).scrollTop(); // Vai iniciar em zero;
// Quando clicar no fancybox vamos salvar um novo valor
$('a.fancybox').on('click', function () {
    window.lastScrollTop = $(window).scrollTop();
});

Now when you exit fancybox has to return to the stored value, then in your settings, you must add onClosed handler .

$(document).ready(function ($) {
    $('.fancybox').fancybox({
        // ...
        onClosed: function () {
            // Ao fechar leva de volta a posição armazenada anterior do scrollTop
            $(window).scrollTop(window.lastScrollTop);
        },
        // ...
    });
});

I used a global variable lastScrollTop because I do not know how your code was written and I do not know how to isolate the context for this case. But I do not recommend using global variables.

Another more generic way is also possible, instead of adding the click event to the anchors, is to use the fancybox% handler , it is theoretically called before applying its effect that will eliminate the onStart , would look like this:

$(document).ready(function ($) {
    var lastScrollTop;
    $('.fancybox').fancybox({
        // ...
        onStart: function () {
            // Armazenando o scrollTop antes de iniciar o processo scrollTop
            lastScrollTop = $(window).scrollTop();
        },
        onClosed: function () {
            // Ao fechar leva de volta a posição armazenada anterior do scrollTop
            $(window).scrollTop(lastScrollTop);
        },
        // ...
    });
});

In this way it is possible to use a context variable not exposing any global variables.