Initial commit

.gitignore

@@ -0,0 +1,2 @@
+.project
+node_modules

Gruntfile.js

@@ -0,0 +1,40 @@
+module.exports = function(grunt) {
+
+  // Project configuration.
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'), 
+    jshint: {
+      all: [
+          "Gruntfile.js", 
+          //"src/**/*.js"
+      ], 
+      options: {
+        jshintrc: '.jshintrc'
+      }
+    },
+    copy: {
+      build: {
+        src: 'src/jquery.imageformat.js',
+        dest: 'build/jquery.imageformat.js'
+      }
+    }, 
+    uglify: {
+      options: {
+        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
+      },
+      build: {
+        src: 'src/jquery.imageformat.js',
+        dest: 'build/jquery.imageformat.min.js'
+      }
+    }
+  });
+
+  // load tasks
+  grunt.loadNpmTasks('grunt-contrib-copy');
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+
+  grunt.registerTask('build', ['copy', 'uglify']);
+  grunt.registerTask('default', ['build']);
+
+};

README.md

@@ -1,4 +1,66 @@
 jquery-imageformat
 ==================
 
-This plugin let's you dynamically assign different formats to lazy loaded images dependent on screen resolution
+> This plugin let's you dynamically assign different urls to lazy loaded images dependent on screen resolution
+
+Basic Usage
+-----------
+
+Define image-urls for different formats:
+```html
+<img class="lazy" 
+  data-src-large="images/1200px-ESO-VLT-Laser-phot-33a-07.jpg"
+  data-src-medium="images/640px-ESO-VLT-Laser-phot-33a-07.jpg" 
+  data-src-small="images/218px-ESO-VLT-Laser-phot-33a-07.jpg"/>
+```
+
+You may choose from the following predefined resolutions:
+<table>
+  <tr>
+    <th>small</th>
+    <th>medium</th>
+    <th>large</th>
+    <th>big</th>
+  </tr>
+  <tr>
+    <td>320x520</td>
+    <td>768x1024</td>
+    <td>1680x1050</td>
+    <td>1920x1050</td>
+  </tr>
+</table>
+
+Call the plugin-method on the element:
+```js
+$(function() {
+  $('img.lazy').imageformat();
+});
+```
+
+Advanced Usage
+--------------
+
+### Using a custom attribute
+
+```js
+$(function() {
+  $('img.lazy').imageformat({
+    attribute: 'data-original'
+  }).lazyload();
+});
+```
+
+### Register a custom format
+
+```js
+$.fn.imageformat.setImageFormat('my-format', 1280, 990);
+```
+
+
+### Options
+
+#### options.attribute
+Type: `String`
+Default value: `src`
+
+Name of the attribute the client format's corresponding url is copied to.

build/jquery.imageformat.js

@@ -0,0 +1,131 @@
+(function ( $, window) {
+
+  var pluginName = 'imageformat';
+
+  var formats = {
+    'small': {width: 320, height: 520}, 
+    'medium': {width: 768, height: 1024}, 
+    'large': {width: 1680, height: 1050}, 
+    'big': {width: 1920, height: 1080}
+  };
+
+  var defaults = {
+    attribute: 'src'
+  };
+
+  var pixelResolution = (function() {
+  if (!window.devicePixelRatio || navigator.userAgent.toLowerCase().indexOf("android") != -1) {
+    return {
+      width: screen.width, 
+      height: screen.height
+    };
+  }
+  return {
+    width: screen.width * window.devicePixelRatio,  
+    height: screen.height * window.devicePixelRatio
+  };
+  })();
+
+  function getUserFormat() {
+
+    // convert to array
+    var array = $.map(formats, function(value, index) {
+      var obj = {
+        name: index, width: value.width, height: value.height
+      };
+      return [obj];
+    });
+
+    // sort based on dimensions
+    array.sort(function(a, b) {
+      if (a.width > b.width && a.height > b.height) {
+        return 1;
+      } else if (a.width > b.width && a.height > b.height) {
+        return -1;
+      } else return 0;
+    });
+
+
+    var pw = Math.min(pixelResolution.width, pixelResolution.height);
+    var ph = Math.max(pixelResolution.width, pixelResolution.height);
+
+    // iterate to match format
+    for (var i = 0; i < array.length; i++) {
+      var f = array[i];
+
+      var fw = Math.min(f.width, f.height);
+      var fh = Math.max(f.width, f.height);
+      if (fw <= pw && fh <= fh) {
+        userFormat = f.name;
+      }
+    }
+
+    return userFormat;
+  }
+
+  var userFormat = getUserFormat();
+
+
+
+  var pluginMethod = function(element, options) {
+
+    var $element = $(element);
+
+    if (userFormat) {
+
+      var data = $element.data();
+      for (var i = 0; i < element.attributes.length; i++) {
+        var attrNode = element.attributes[i];
+        var attrName = attrNode.nodeName;
+        var attrValue = attrNode.nodeValue;
+        if (attrName.indexOf('data-src') == 0) {
+          var f = attrName.substr('data-src'.length + 1);
+          if (f == userFormat) {
+            element.setAttribute(options.attribute, attrValue);
+          }
+          if (attrName != options.attribute) {
+            element.removeAttribute(attrName);
+            i--;
+          }
+
+        }
+      }
+
+    }
+  };
+
+
+
+
+  // register plugin
+
+  $.fn[pluginName] = function(options) {
+
+      options = $.extend({}, defaults, options);
+
+      return this.each(function() {
+
+          pluginMethod(this, options);
+
+          return $(this);
+
+    });
+
+  };
+
+  $.fn[pluginName].CLIENT_FORMAT = userFormat;
+
+
+  $.fn[pluginName].setImageFormat = function(name, width, height) {
+    formats[name] = {
+      width: width, height: height
+    };
+    userFormat = getUserFormat();
+  };
+
+  $.fn[pluginName].removeImageFormat = function(name, width, height) {
+    delete formats[name];
+    userFormat = getUserFormat();
+  };
+
+})( jQuery, window );

package.json

@@ -0,0 +1,10 @@
+{
+  "name": "jquery-imageformat",
+  "version": "0.1.0",
+  "devDependencies": {
+    "grunt": "~0.4.2",
+    "grunt-contrib-jshint": "~0.6.3",
+    "grunt-contrib-copy": "", 
+    "grunt-contrib-uglify": "~0.2.2"
+  }
+}

samples/index.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+  <head>
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1">
+
+    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
+
+    <script src="../src/jquery.imageformat.js"></script>
+
+    <script>
+      $(function() {
+        $('img.lazy').imageformat({
+          attribute: 'data-original'
+        }).lazyload();
+      });
+    </script>
+
+    <style>
+
+      img.lazy {
+        width: 100%;
+      }
+
+    </style>
+
+  </head>
+  <body>
+    <div class="container">
+      <div class="page-header">
+        <h1>jquery-imageformat</h1>
+        <p>This plugin let's you dynamically assign different urls to lazy loaded images dependent on screen resolution</p>
+      </div>
+    </div>
+
+
+    <div class="container">
+
+      <p>
+        Format: <code id="imageformat"><script>
+          $('#imageformat').html($.fn.imageformat.CLIENT_FORMAT);
+        </script></code>
+      </p>
+
+      <img class="lazy" 
+        data-src-large="images/1200px-ESO-VLT-Laser-phot-33a-07.jpg"
+        data-src-medium="images/640px-ESO-VLT-Laser-phot-33a-07.jpg" 
+        data-src-small="images/218px-ESO-VLT-Laser-phot-33a-07.jpg"/>
+
+    </div>
+
+
+  </body>
+</html>