Doesn't work with AJAX ?

flayks commented 10 years ago

Hey there, I use the magic BackgroundCheck plugin for a website where I use a full AJAX navigation. When I go to a photo page (fullscreen image), I do a BackgroundCheck.refresh();, but absolutely nothing happend. My "target" (body) has no "dark" of "light" class. It just works at the first page load only if I am in a photo page but not with AJAX.

My function :

bgcheck: function(el, cond){
    if ($(el).hasClass(cond)){
        BackgroundCheck.init({
            targets: "body",
            images: "#thephoto",
            threshold: 50,
            classes: {
                dark: "dark",
                light: "light"
            }
        });
    }
}

What I run when the page is ready :

plugins.bgcheck("body", "single-photos");

What I do when AJAX is loaded (after the fadeIn effect on the container and the body class load) :

// Re-check background brightness
if (isType("photo/")){
    BackgroundCheck.refresh(); // Doesn't work
}

If you have an idea or something to help… Is it a bug ? or me doing something wrong ? Thank you in advance.

——— Edit :

After a debug:true, I have this information : "Skipping image - http://website.com/wp-content/uploads/DSC_9639-1500x996.jpg - area too small" (it seems to be the old image and the not new one)

kennethcachia commented 10 years ago

Hey,

Hmm not sure. Could you give me a link to this site so I can test it further pls?

flayks commented 10 years ago

Hey! Sorry for the delay. I almost finished my portfolio, I debugged some things but I always have the problem with the BackgroundCheck plugin.

— http://flayks.com/v7/photo/isole-egadi

When you go to a next/previous picture, the debug (console log) says this : "Skipping image - http://blah/image.jpg - area too small". I do a BackgroundCheck.refresh() with the plugin waitForImages, so normally it will runs the function after all the loaded content. I tested without waitForImages, but same. But apparently, the plugin considers that the AJAX loaded background-image is simply not loaded (in this photo "Isole Egadi" the image is DSC_9639, the next "Une descente aux Enfers" is DSC_8443). It only works on the first page load.

I don't know why…

flayks commented 10 years ago

Ok, I found a solution without any plugin (I juste set a class for each photo I use, if it's a dark or light picture), but if you have an idea, I'm curious.

kennethcachia commented 10 years ago

Hey!

I checked your portfolio and noticed the following:

You're initializing BackgroundCheck with targets: #body, which will scan the entire visible portion of the image and add a light/dark class to <body>. I don't think this is what you're after as I'm assuming that you want to change the color of ex: #controls depending on the image portion it's currently on top of. Try the following instead:

BackgroundCheck.init({
  targets: "#controls",
  images: "#thephoto"
});

.detail.photo #controls.background--light a {
  background-color: #000;
}

.detail.photo #controls.background--light p {
  background-color: #000;
  color: #fff;
}

You're replacing the content of #main each time you load a new image and BackgroundCheck no longer has access to the required elements. Try replacing BackgroundCheck.refresh() with:

BackgroundCheck.set('targets', '#controls');
BackgroundCheck.set('images', '#thephoto');

which automatically reprocesses the image.

Hope this helps!

flayks commented 10 years ago

Thank you for the help! I will test your solution. I use the body as target because I also change the color of my SVG logo, so with the body class .light or .dark, I change both logo and controls.

.light #logo path{fill:#fff}
.light #controls a{background:#fff; color:@darkblue}
.dark #logo path{fill:@darkblue}
.dark #controls a{background:@darkblue; color:#fff}

flayks commented 10 years ago

Yay, apparently it works pretty well. Ty :}

kennethcachia commented 10 years ago

Awesome!

re: targeting your SVG Logo - you should also target it on it's own so that it's more accurate. I usually add a .target class to all the elements that I need to check and then use the following:

BackgroundCheck.init({
  targets: '.target'
  ...
});

kennethcachia / background-check

Doesn't work with AJAX ? #12