Comments (6)
Please check the demo http://gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/ to see how to use the preloader. It's really simple 😄
from jquery.blackandwhite.
Thanks Gianluca!
Though I'm still struggling to see how i can accomplish this on a wordpress install?
My code looks pretty similar to the one on the demo page:
$(window).load(function(){
$('.bw-thumb').BlackAndWhite({
hoverEffect : true, // default true
// set the path to BnWWorker.js for a superfast implementation
webworkerPath : false,
// for the images with a fluid width and height
responsive:true,
// to invert the hover effect
invertHoverEffect: false,
speed: { //this property could also be just speed: value for both fadeIn and fadeOut
fadeIn: 200, // 200ms for fadeIn animations
fadeOut: 800 // 800ms for fadeOut animations
},
onImageReady:function(img){
$(img).parent().animate({
opacity:1
});
}
});
});
I see that you apply css opcaity:0 to the list anchors with the preloader giff as a background image to the list items but cannot see how these are being pre-loaded during the window load?
from jquery.blackandwhite.
sorry I can't get what is the problem.. could you try to explain what you are trying to achieve?
from jquery.blackandwhite.
I'm trying to prevent the coloured images from displaying before the black and white ones. At present they load as the page is still loading scripts so I need a way to hide the colour images until the b&w ones are rendered.
Is this possible?
On 17 Dec 2013, at 20:12, Gianluca Guarini [email protected] wrote:
sorry I can't get what is the problem.. could you try to explain what you are trying to achieve?
—
Reply to this email directly or view it on GitHub.
from jquery.blackandwhite.
.post-thumb a img {
opacity:0;
filter:alpha(opacity=0);
}
Try to put the following javascript code outside of the $(window).on('load',...) callback
$('.bw-thumb').BlackAndWhite({
hoverEffect : true, // default true
// set the path to BnWWorker.js for a superfast implementation
webworkerPath : false,
// for the images with a fluid width and height
responsive:true,
// to invert the hover effect
invertHoverEffect: false,
speed: { //this property could also be just speed: value for both fadeIn and fadeOut
fadeIn: 200, // 200ms for fadeIn animations
fadeOut: 800 // 800ms for fadeOut animations
},
onImageReady:function(img){
$(img).animate({
opacity:1
});
}
});
from jquery.blackandwhite.
Many thanks Gianluca, this helped fix the issue. I also hadn't noticed a problem with my markup where only one of the images was wrapped in in anchor tag. All working now. Grazie!
Marco
from jquery.blackandwhite.
Related Issues (20)
- It does not work in chrome HOT 4
- no brightness control HOT 1
- image pre-loading with google font or font-face HOT 4
- canvas.drawImage error in Firefox 29.0.1 HOT 2
- Ajax load HOT 2
- Apply BW plugin for infinite scrolling HOT 1
- Problems in chrome HOT 3
- No chance to click on image link HOT 2
- Firefox 35.0 update prevents filters HOT 2
- Chrome can't load images HOT 2
- Disable via jQuery selector? HOT 1
- Use with CDN HOT 1
- It doesn't work well on <= IE8,how fix?
- Brighter bw image
- Only displaying color version HOT 9
- TypeError: $.browser is undefined HOT 14
- webworkerPath HOT 4
- BnWWorker.js:4 Uncaught TypeError: Cannot read property 'data' of undefined at onmessage
- New jQuery lib error
- Uncaught TypeError: Cannot read property 'complete' of undefined
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 jquery.blackandwhite.