Permalink
Browse files

First version.

  • Loading branch information...
1 parent b5c0d67 commit a54a7713de2e8274b9aa4ea8400c38b7d9cc0d61 @fblee fblee committed Mar 12, 2013
Showing with 76 additions and 1 deletion.
  1. +19 −0 LICENSE.MIT
  2. +21 −1 README.md
  3. +36 −0 jquery.imagefallback.js
View
@@ -0,0 +1,19 @@
+Copyright (c) 2013 The Rapportive Team <lee@rapportive.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
View
@@ -1,4 +1,24 @@
jquery-imagefallback
====================
-Encapsulate fallback behavior when images fail to load.
+Encapsulate fallback behavior when images fail to load. Works with Zepto.js as well. :)
+
+Call $('.foo').fallback on an image selector to fallback to another image if the
+main image fails to load.
+
+Usage
+=====
+
+There are two ways to use it.
+
+1. Specify a fallback image URL
+```javascript
+$('img.photo').fallback('http://google.com/fallback.jpg')
+```
+
+2. Specify a callback function:
+```
+$('.photo-container > img').fallback(function () {
+ $('.photo-container').hide();
+}).attr('src', 'http://my.photosite.com/image1.jpg');
+```
View
@@ -0,0 +1,36 @@
+/*global window*/
+/*
+ * jQuery.imagefallback.js © 2013 MIT — The Rapportive Team <lee@rapportive.com>
+ * https://github.com/rapportive-oss/jquery-imagefallback
+ *
+ * Call this function on an image selector to fallback to another image if the
+ * main image fails to load.
+ *
+ * There are two ways to use it.
+ *
+ * 1. Specify a fallback image URL
+ * $('img.photo').fallback('http://google.com/fallback.jpg')
+ *
+ * 2. Specify a callback function:
+ * $('.photo-container > img').fallback(function () {
+ * $('.photo-container').hide();
+ * }).attr('src', 'http://my.photosite.com/image1.jpg');
+ */
+(function ($) {
+ $.fn.fallback = function (fallback) {
+ return this.each(function () {
+ var $this = $(this);
+ $this.bind('error.image-fallback', function () {
+ $this.unbind('error.image-fallback, load.image-fallback');
+ if ($.isFunction(fallback)) {
+ fallback.apply($this);
+ } else {
+ $this.attr('src', fallback);
+ }
+ })
+ .bind('load.image-fallback', function () {
+ $this.unbind('.image-fallback');
+ });
+ });
+ };
+}(window.jQuery || window.Zepto));

0 comments on commit a54a771

Please sign in to comment.