Permalink
Browse files

Adding dirty readme

  • Loading branch information...
1 parent 8b71784 commit 6c3914ce8ca6a7c05db2018a2701f2afeadc007b @jakearchibald committed Dec 4, 2011
Showing with 48 additions and 0 deletions.
  1. +48 −0 README.md
View
@@ -0,0 +1,48 @@
+# An experiment in clientside responsive imagery
+
+I'm trying to come up with a solution which:
+
+* Shows content without js
+* Entirely clientside
+* Keeps the media queries in CSS
+* Fast enough to work on resize
+
+However, this solution is dirty as hell, but it works.
+
+# Usage
+
+First, surround your image, or set of images with some dirty-magic script elements:
+
+ <script class="responsive-gallery">document.write('<' + '!--')</script><noscript>
+ <a href="http://www.flickr.com/photos/major_clanger/3690964841/">
+ <img src="http://farm3.staticflickr.com/2624/3690964841_3f157fa6ba_t.jpg" alt="">
+ </a>
+ </noscript><!---->
+
+Dirty isn't it? Anyway, then include responsiveGallery.js, and initialise your gallery:
+
+ responsiveGallery({
+ scriptClass: 'responsive-gallery',
+ testClass: 'responsive-test',
+ initialSuffix: '_t.jpg',
+ suffixes: {
+ '1': '_t.jpg',
+ '2': '_m.jpg',
+ '3': '.jpg'
+ }
+ });
+
+This will create a test element on the page with class "responsive-test". When that element has a width of 1px, your images will have a suffix of "_t.jpg", when it has a width of 2px, your images will have a suffix of "_m.jpg". As you can see, you can change those to whatever you want.
+
+Then in your CSS:
+
+ .responsive-test {
+ width: 1px;
+ }
+ @media all and (min-width: 640px) {
+ .responsive-test {
+ width: 2px;
+ }
+ }
+
+Ohh it's so dirty. Yum yum.

0 comments on commit 6c3914c

Please sign in to comment.