Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
An experiment in client-side responsive imagery
JavaScript
Tree: 8c9982d915

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
css
experiments
js
README.md
index.html

README.md

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, (here's an example)[http://jakearchibald.github.com/responsive-gallery/].

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.

Something went wrong with that request. Please try again.