jQuery function with fancybox - I’m having refresh problem

Asked

Viewed 1,082 times

3

When opening or closing the fancybox (I’m a programmer php but beginner in Javascript with jquery), my page gives a refresh and goes back to the top of the content losing the focus of the place that the content was at fancybox. The action can be seen here (http://santins.com.br/_z/holcim) by clicking on any link that opens the fancybox and the code I’m 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

2 answers

2

I solved the problem with the following code:

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

2


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

A solution is at the time the person clicks, before displaying their fancybox, you store in a context variable the position of the scroll and when closing, you apply the navigation pro scroll that saved, taking the person back to the original position.

First let’s 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 get out of fancybox has to return to the stored value, so in your settings, you have to 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 don’t know how your code was written and I don’t know how to isolate the context for this case. But I don’t recommend using global variables.

Another more generic way is also possible, instead of adding the click event to the anchors, is to use the onStart Handler fancybox, theoretically it is called before applying its effect that will eliminate the scrollTop, 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);
        },
        // ...
    });
});

This way it is possible to use context variable without exposing any global variable.

  • 1

    Could you help me do this Gabriel?

  • Here’s a solution that should help you @marcosvinicius

  • Forgive my ignorance in not knowing if I should put something in these 3 dots (...) ...

  • the three dots is just to illustrate that this code snippet is between your code, can be before or after. Try to put after the autoSize and before the nextClick without including the ... of course, because they are properties of a literal object that you are passing as parameter of the method fancybox.

Browser other questions tagged javascript jquery fancybox

You are not signed in. Login or sign up in order to post.