https://github.com/c0bra/angular-responsive-images

Angular responsive images
https://github.com/c0bra/angular-responsive-images

Last synced: 7 days ago
JSON representation

Angular responsive images

• Host: GitHub
• URL: https://github.com/c0bra/angular-responsive-images
• Owner: c0bra
• Created: 2013-06-03T17:34:09.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2014-11-14T22:04:26.000Z (almost 10 years ago)
• Last Synced: 2024-10-10T12:50:43.903Z (24 days ago)
• Language: JavaScript
• Homepage: http://c0bra.github.io/angular-responsive-images/
• Size: 507 KB
• Stars: 63
• Watchers: 8
• Forks: 8
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Angular Responsive Images

Angular directive for handling responsive images.

# Requirements

* [AngularJS](http://angularjs.org)

* Paul Irish's [matchMedia() polyfill](https://github.com/paulirish/matchMedia.js/) if you want to support older browsers

# Install

    bower install angular-responsive-images

# Usage

The `bh-src-responsive` directive takes an array of arrays. The inner arrays each have two elements, the first being the media query and the second being the href of the image to load if that media query matches. The *last* matcing media query gets used so order your array from smallest to largest.

Also you can use a default small image for `src=""` as that will always get loaded, and can prevent weird page reflows when we alter the `src` after your angular app is loaded.

```javascript

// In your script file, inject the ngResponsiveImages module

var app = angular.module('yourModule', ['bhResponsiveImages']);

```

```html



```

## Events

Changes to the viewport that causes your media queries to either suddenly match or no longer match (i.e. from browser resizing, orientation change, etc), will trigger updates to the source.  Because these event handlers can be fired concurrently, running through the media query set happens within a zero-second `$timeout`. That way when you have three media queryies and maximize your browser from small to large, the image source doesn't get set to the last matching media query 3 separate times.

# Media Query Presets

Here are some useful presets that you can use, which were stolen from [Foundation](http://foundation.zurb.com/docs/components/interchange.html).

  

    

      Name

      Media Query

    

  

    

      default

      only screen and (min-width: 1px)

    

    

      small

      only screen and (min-width: 768px)

    

    

      medium

      only screen and (min-width: 1280px)

    

    

      large

      only screen and (min-width: 1440px)

    

    

      landscape

      only screen and (orientation: landscape)

    

    

      portrait

      only screen and (orientation: portrait)

    

    

      retina

      

        only screen and (-webkit-min-device-pixel-ratio: 2),

        


        only screen and (min--moz-device-pixel-ratio: 2),

        


        only screen and (-o-min-device-pixel-ratio: 2/1),

        


        only screen and (min-device-pixel-ratio: 2),

        


        only screen and (min-resolution: 192dpi),

        


        only screen and (min-resolution: 2dppx)

      

    

  

## Example

```html



```

# Testing

It's difficult to test different viewport sizes, or at least difficult enough that I can't figure it out. So right now I dynamically get the `window` `innerWidth` and `innerHeight` properties to know what the testing browser has, then my tests run off that.

The test tasks a pretty simple:

    grunt test # Lint, build from source, and run the test suite

    grunt debug # Start a watch for the files. Re-lint, re-build, and run tests when the source files change;

                # re-lint and run tests when the test spec files change.

You can also pass a --browsers option to these tasks (the default browser is PhantomJS):

    grunt debug --browsers=Chrome,Firefox,PhantomJS,IE # Automatically run the test suite in all 4 browsers

# Todo

* Handle updates bh-src-responsive bound values...

* Add handling of ng-src

* Add pretty auto-generated gh-pages branch with examples of the same code in a bunch of different iframes``

# Acknowledgements

The idea for this directive came from Foundation's [interchange](http://foundation.zurb.com/docs/components/interchange.html) attribute. Also their media query preset were mercilessly stolen.