img-middle-responsive

img-middle-responsive - 0.1.4

img-middle-responsive - Directive to display an image with reactive centered alignment, both vertically and horizontally.

Installation

• Download the latest release: v0.1.4
• Clone the repository: git clone https://github.com/teorossi82/img-middle-responsive.git
• Install with Bower: bower install img-middle-responsive

Requirements

The plugin requires

• jQuery 1.9.0+
• Angularjs 1.4.0+

Quick-help for usage

• Inject into your module the imgMiddleResponsiveMdl dependency:

angular.module('myApp',['imgMiddleResponsiveMdl']);

• Create an object with the information to pass to the directive:

var url = "https://assets-cdn.github.com/images/modules/open_graph/github-octocat.png"; //url image to visualize
var defaultUrl = "http://placehold.it/200x150"; //url image to visualize if master image is not found
var imgMiddleRespOptions = {
    container:{
        maxWidth:"150px", //maxWidth of image container
        maxHeight:"150px" //maxHeight of image container
    }
}
var clicked = function(){ //function to trigger on click
    alert('clicked');
}

• Put the directive in your html:

<img-middle-responsive img-url="{{url}}" default-url="{{defaultUrl}}" options="imgMiddleRespOptions" click-action="clicked()"></img-middle-responsive>

Copyright and license

Copyright @2016 Matteo Rossi, under [MIT license]