Initial commit

.gitignore

@@ -0,0 +1,3 @@
+article.md
+article.html
+img/cache/*

README.md

@@ -0,0 +1,47 @@
+Crispy resize
+=============
+Crispy resize is a responsive images plugin that uses PHP-GD and ajax to lazy load the correct image size for the display width.
+
+### Requirements:
+
+* A Server
+* PHP
+* GD
+* jQuery
+* [smartresize](http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/)
+
+How to use
+----------
+
+Add the resize-class.php in php/lib/ to your php libs folder.
+Add resize.php in the root to your web root.
+
+Set your potential image display sizes in the array at the top of resize.php and the path to the cache folder.
+
+Include the resize.js plugin in /js/ on your page.
+
+Set the breakpoints at which you want to refresh the image in resize.js (or resize.coffee if you want to compile the plugin.)
+
+Replace your `<img>` tags with the following html:
+
+	<div data-src="[put your image src here]" data-alt="crispy" class="img-wrap js-crispy">
+        <noscript><img src="[put your image src here]" alt="Crispy"></noscript>
+    </div>
+
+Add some CSS to size your img-wrap element and make sure the image within it fills it.
+
+	.img-wrap {
+	  display: inline-block;
+	  width: 10em;
+	}
+	.img-wrap img {
+	  max-width: 100%;
+	  display: block;
+	  width: 100%;
+	}
+
+Done!
+
+
+
+

coffee/resize.coffee

@@ -0,0 +1,149 @@
+###
+    Resize plugin.
+    Grabs appropriately sized image from the server, with noscript fallback and error handling
+    Author: Gavyn McKenzie @ Etch Apps
+    Requires: jQuery, smartresize
+
+    - Find the images in the dom
+    - Get their size and src
+    - Post them to the server
+    - Populate the image tags on reply
+###
+
+crispy = 
+    els: ".js-crispy"
+    images: []
+    breakpoints: [
+        "32em"
+        "48em"
+        "62em"
+        "76em"
+    ]
+    debugMode: true
+
+    # Console debugging
+    debug: (vars...) ->
+        if @debugMode and console?
+            if console.log.apply? then  console.log.apply(console, vars) else console.log vars
+
+    # Init crispy resize
+    init: () ->
+        @debug "Initialising crispy"
+        @currentBreakpoint = @getCurrentBreakpoint()
+
+        @gather()
+
+        @bind()
+
+    # Bind resize events
+    bind: () ->
+
+        $(window).smartresize =>
+            @refreshImages()
+
+    # Returns window width in em values
+    windowWidth: () ->
+        return $(window).width()/Number($("body").css("font-size"))
+
+    # Return the current breakpoint
+    getCurrentBreakpoint: () ->
+        bp = @breakpoints[0]
+
+        # for each breakpoint, test if window width is wider than that
+        for breakpoint in @breakpoints then do (breakpoint) =>
+            if window.matchMedia and window.matchMedia("all and (min-width: "+breakpoint+")").matches
+                bp = breakpoint
+
+        @debug bp
+        return bp
+
+    # Test if the breakpoint has changed
+    testBreakpointChange: () ->
+        bp = @getCurrentBreakpoint()
+        if @currentBreakpoint == bp
+            return false
+        else
+            @currentBreakpoint = bp
+            return true
+
+    # Refresh the images if the breakpoint has changed
+    refreshImages: () ->
+        if @testBreakpointChange()
+            @debug "Breakpoint change"
+            @gather()
+
+    # gather the images from the DOM
+    gather: () ->
+        els = $(@els)
+
+        @debug els.length, "images found"
+
+        # Reset images array
+        @images = []
+
+        @add el for el in els
+
+        @grabFromServer()
+
+    # Adds images and dimensions to @images array
+    add: (image) ->
+        image = $ image
+        @images.push
+            src: image.attr("data-src")
+            width: image.width()
+
+    # Build the url post params
+    buildQuery: () ->
+        addText = (img,text) =>
+            text += "image[]="+img.src+"&width[]="+img.width+"&";
+
+        data = ""
+
+        data = addText img, data for img in @images
+
+        # Remove the last &
+        data = data.slice(0,-1)
+
+    # Grab the image paths from the server
+    grabFromServer: () ->
+        @debug "Grabbing images from server"
+
+        data = @buildQuery()
+
+        $.ajax
+            type: "POST"
+            url: "resize.php"
+            data: data
+            success: (data) =>
+                # Received array of new img srcs
+                # Load the images into the DOM
+
+                @loadImage(image) for image in data
+                true
+
+    # Load images into DOM
+    loadImage: (image) ->
+        @debug "Loading image"
+        # Get the image to replace
+        el = $ "[data-src='"+image.og_src+"']"
+
+        img = $ "<img />"
+
+        img.attr("src",image.src).attr("alt", el.attr("data-alt"))
+
+        if el.children("img").length
+            @debug "Already have an img"
+            el.children("img").attr "src", image.src
+        else
+            img.load => 
+                @debug "Adding img to page"
+                el.append img
+
+                # Set as loaded
+                el.addClass('img-loaded')
+
+# Initialise crispy on doc ready
+$(document).ready ->
+    $(".wrap").removeClass("no-js").addClass("js")
+    crispy.init()
+

css/style.css

@@ -0,0 +1,31 @@
+html {
+  font-size: 62.5%;
+}
+body {
+  text-align: center;
+}
+.img-wrap {
+  display: inline-block;
+  width: 10em;
+  margin: 0.66em;
+}
+.img-wrap img {
+  max-width: 100%;
+  display: block;
+  width: 100%;
+}
+@media screen and (min-width: 48em) {
+  .img-wrap {
+    width: 15em;
+  }
+}
+@media screen and (min-width: 62em) {
+  .img-wrap {
+    width: 20em;
+  }
+}
+@media screen and (min-width: 76em) {
+  .img-wrap {
+    width: 24em;
+  }
+}

index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Crispy Resize</title>
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+  </head>
+  <body>
+    <div class="wrap">
+      <div data-src="img/lounge.JPG" data-alt="crispy" class="img-wrap js-crispy">
+        <noscript><img src="img/lounge.JPG" alt="Crispy"></noscript>
+      </div>
+      <div data-src="img/screen.JPG" data-alt="crispy" class="img-wrap js-crispy">
+        <noscript><img src="img/screen.JPG" alt="Crispy"></noscript>
+      </div>
+      <div data-src="img/table-rug.JPG" data-alt="crispy" class="img-wrap js-crispy">
+        <noscript><img src="img/table-rug.JPG" alt="Crispy"></noscript>
+      </div>
+    </div>
+    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
+    <script type="text/javascript" src="js/min/smartresize.min.js">	</script>
+    <script type="text/javascript" src="js/resize.js"></script>
+  </body>
+</html>

jade/index.jade

@@ -0,0 +1,24 @@
+doctype 5
+html
+	head
+		title Crispy Resize
+
+		link(rel="stylesheet",type="text/css",href="css/style.css")
+
+	body
+		.wrap
+			.img-wrap.js-crispy(data-src="img/lounge.JPG",data-alt="crispy")
+				noscript
+					img(src="img/lounge.JPG",alt="Crispy")
+
+			.img-wrap.js-crispy(data-src="img/screen.JPG",data-alt="crispy")
+				noscript
+					img(src="img/screen.JPG",alt="Crispy")
+
+			.img-wrap.js-crispy(data-src="img/table-rug.JPG",data-alt="crispy")
+				noscript
+					img(src="img/table-rug.JPG",alt="Crispy")
+
+		script(type="text/javascript",src="js/jquery-1.10.2.min.js")
+		script(type="text/javascript",src="js/min/smartresize.min.js")	
+		script(type="text/javascript",src="js/resize.js")