During website development there are always pictures which can not be found. In Firefox these pictures are automatically hidden, but for example in Internet Explorer they are marked with a little image with a red “X” in it (which is quite ugly by the way). It's better to show your own “nopic” picture, which suits to your own design and taste. Furthermore, when you have to alter your layout if a picture is not found, you can handle it client side with this jQuery plugin.
What is this good for? ... Well, you can:
- mark the broken images on your site the way you like it
- replace automatically these images to a default “nopic” picture
- define a custom callback function, if a picture is not found
- solve the tasks above with a jQuery plugin with a very small footprint
“Nice...this is very useful! But how can I use it?”
It's pretty simple.
Basic usage: Default “nopic” image is “images/nopic.jpg”
1 | jQuery(".picture").picfix();
|
Default image configuration: With the “altImg” parameter.
1 2 3 | jQuery(".picture").picfix({ altImg: "images/mynopicture.jpg" }); |
Error handling configuration: With the “onerror” parameter.
1 2 3 4 5 | jQuery(".picture").picfix({ onerror: function () { // do something... } }); |
Files:
- jquery.picfix.min.js (~0.53kb)
- jquery.picfix.compressed.js (~0.58kb)
- jquery.picfix.js (~0.79kb)
- usage.js
Download:
Feel free to write me a comment, and if you like this little plugin please contribute my efforts.
