Comments (7)
kennethcachia
commented on May 31, 2024
Hey,
Hmm not sure. Could you give me a link to this site so I can test it further pls?
from background-check.
flayks
commented on May 31, 2024
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…
from background-check.
flayks
commented on May 31, 2024
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.
from background-check.
kennethcachia
commented on May 31, 2024
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:#controlsdepending 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
#maineach time you load a new image and BackgroundCheck no longer has access to the required elements. Try replacingBackgroundCheck.refresh()with:
BackgroundCheck.set('targets', '#controls');
BackgroundCheck.set('images', '#thephoto');which automatically reprocesses the image.
Hope this helps!
from background-check.
flayks
commented on May 31, 2024
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}
from background-check.
flayks
commented on May 31, 2024
Yay, apparently it works pretty well.
Ty :}
from background-check.
kennethcachia
commented on May 31, 2024
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'
...
});from background-check.
Related Issues (20)
- Images not being targeted in FF53
- Unable to get image data from canvas because the canvas has been tainted by cross-origin data. HOT 2
- Target: Check not only image but any background?
- Using with FullPage.js HOT 1
- HTML-Element containing image with overflow:hidden; - invisibility of image is ignored
- is there a way to detect after? HOT 1
- Classes not added to element HOT 1
- cross origin not working.
- Finding image, but not sorting HOT 1
- Cross origin demo not working HOT 1
- Owl carousel not working with background-check
- Error: Area too small but image is there
- Uncaught [object HTMLDivElement] is not a target HOT 1
- Janky Colour Swapping HOT 2
- Edit color sensibility
- Doesn't seem to work HOT 2
- Not able to detect specific area of image
- The canvas has been tainted by cross-origin data. HOT 7
- Nested/Child elements with classname HOT 2
- For God's sake - update it!
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from background-check.