Coder Social home page Coder Social logo

trgpwild / angular-responsive-images Goto Github PK

View Code? Open in Web Editor NEW

This project forked from c0bra/angular-responsive-images

0.0 1.0 0.0 519 KB

Angular responsive images

Home Page: http://c0bra.github.io/angular-responsive-images/

JavaScript 100.00%

angular-responsive-images's Introduction

Angular Responsive Images

Angular directive for handling responsive images.

Requirements

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.

// In your script file, inject the ngResponsiveImages module
var app = angular.module('yourModule', ['bhResponsiveImages']);
<!-- Use the bh-src-responsive directive to set up your queries and sources -->
<img src="small_image.jpg" bh-src-responsive="[ [ '(min-width: 960px)', 'larger_image.jpg' ], [ '(min-width: 1700px)', 'much_larger_image.jpg' ] ]" />

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.

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

<img src="blah.jpg" bh-src-responsive="[ [ 'retina', 'big_retina_image.jpg' ] ]" />

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 attribute. Also their media query preset were mercilessly stolen.

angular-responsive-images's People

Contributors

c0bra avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.