Permalink
Browse files

Readme updates

  • Loading branch information...
jackfranklin committed Sep 17, 2012
1 parent ec0aa6c commit 0538d08daec259c77c3786ea3c932fe72b267977
Showing with 17 additions and 12 deletions.
  1. +17 −12 README.md
View
@@ -5,14 +5,23 @@ Designed to make using images in responsive sites even easier.
Allows you to load in a different image based on the browser view port. If someone is looking at your site on an iPhone, they don't want to load in the full image. This little bit of code aims to solve it.
##How to use it
-It's pretty easy to use on your page. If you download this repository, there's a fully working demo in demo.html. After you've included the script in your page, you need to pass in a couple of things when you call the function:
+It's pretty easy to use on your page. If you download this repository, there's a fully working demo in demo.html. After you've included the script in your page:
+
+```
+<script src="path/to/responsiveimages.js"></script>
+```
+
+You need to pass in a couple of things when you call the function:
+
+```javascript
+responsiveImage("img", {
+ "320" : "iPhone.jpg",
+ "768" : "iPad.jpg",
+ "1024" : "Average.jpg",
+ "else" : "HUGE.jpg"
+}, true);
+```
- responsiveImage("img", {
- "320" : "iPhone.jpg",
- "768" : "iPad.jpg",
- "1024" : "Average.jpg",
- "else" : "HUGE.jpg"
- }, true);
The first thing you pass in is an id, which should be an id of the image you wish to conditionally load. After that all you need to do is pass in an object of sizes and the relevant images, with URLs relative to the page. The function will check if the current browser viewport is less than or equal to the specified widths and load in the correct image. If the viewport is larger than any of the defined widths, it will load in whichever image is specified by the `else` key, so don't forget to define this! The widths do not have to be defined in any order, but **"else" MUST be last!"**. Finally, you pass in either `true` or `false`, which defines if the code should run itself again when the window resizes or not. If you do not pass in this variable, it **defaults to false**.
@@ -22,10 +31,6 @@ Feel free to work this, report issues, shout at me for breaking things, etc. Or
##Live Demo
[There is a live demo here.](http://jackfranklin.org/responsive-images)
-##Blog Post
-[I blogged about it](http://jackfranklin.co.uk/responsive-images)
##Written in CoffeeScript
-If you want to fork & improve, remember you need to edit the
-CoffeeScript version. I only improve the .js version in this repository
-so it's easier to implement the script, no compiling needed.
+If you want to fork & improve, remember you need to edit the CoffeeScript version. I only includre the .js version in this repository so it's easier to implement the script, no compiling needed.

0 comments on commit 0538d08

Please sign in to comment.