Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
100644 37 lines (25 sloc) 2.002 kb
8d0ec96 Readme Added
Jack Franklin authored
1 #ResponsiveImages
2 Designed to make using images in responsive sites even easier.
4 ##What it Does
5 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.
7 ##How to use it
0538d08 @jackfranklin Readme updates
8 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:
10 ```
11 <script src="path/to/responsiveimages.js"></script>
12 ```
14 You need to pass in a couple of things when you call the function:
16 ```javascript
17 responsiveImage("img", {
18 "320" : "iPhone.jpg",
19 "768" : "iPad.jpg",
20 "1024" : "Average.jpg",
21 "else" : "HUGE.jpg"
22 }, true);
23 ```
8d0ec96 Readme Added
Jack Franklin authored
0d5b316 Updating README to reflect code changes
Jack Franklin authored
26 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**.
8d0ec96 Readme Added
Jack Franklin authored
28 ##Suggestions?
29 Feel free to work this, report issues, shout at me for breaking things, etc. Or you can grab me on Twitter as @Jack_Franklin.
d142684 Updating Readme
Jack Franklin authored
0d5b316 Updating README to reflect code changes
Jack Franklin authored
31 ##Live Demo
2967982 Markdown error
Jack Franklin authored
32 [There is a live demo here.](
ec0aa6c @jackfranklin Adding comments & updating readme
35 ##Written in CoffeeScript
0538d08 @jackfranklin Readme updates
36 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.
Something went wrong with that request. Please try again.