Angular - set html img width and height dynamically

Question

I would like to use a jQuery BeforeAndAfter plugin in my angularJS app. But I have a several images with different dimensions. I have tried to set width and height dynamically but it is not working. Like this:

        <div id="container">
            <img id="imgMY" ng-src="{{photo.source}}" alt="photo" width="{{photo.width}}" height="{{photo.height}}"/>
            <img id="imgM2" ng-src="{{photo.source}}" alt="photo" width="{{photo.width}}" height="{{photo.height}}"/>
        </div>
    ...
<script type="text/javascript">
    $(function(){
        $('#container').beforeAfter({
        animateIntro : true,
            introDelay : 1000,
            introDuration : 500,
            showFullLinks : false,
            dividerColor  : '#1481E3'
    });
    });
</script>

It works only when I have those attributes hardcoded. How can I figure it out?

oleh.meleshko · Accepted Answer · 2016-01-11 18:23:29Z

2

Use ng-style directive.

Example: <img ... ng-style="{ width : photo.width, height : photo.height }" />

angular.module('test', [])
  .controller('TestController', ['$scope', '$document', '$timeout',
    function($scope, $document, $timeout) {
      $scope.photo = {
        link: 'https://pbs.twimg.com/profile_images/2149314222/square.png',
        link2 : 'http://cdn-prod.portlandwebworks.com/sites/default/files/angular-3.jpg',
        style: {
          width: '300px',
          height: '200px'
        }
      };
      
      $timeout(function() {
        $('#container').beforeAfter({
          animateIntro: true,
          introDelay: 1000,
          introDuration: 500,
          showFullLinks: false,
          dividerColor: '#1481E3'
        });
      });     
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="http://www.catchmyfame.com/jquery/beforeafter/js/jquery-ui-1.8.13.custom.min.js"></script>
<script src="http://www.catchmyfame.com/jquery/beforeafter/js/jquery.beforeafter-1.4.min.js"></script>
<div ng-app="test">
  <div id="container" ng-controller="TestController">
    <img ng-src="{{ photo.link }}" ng-style="photo.style" />
    <img ng-src="{{ photo.link2 }}" ng-style="photo.style" />
  </div>
</div>

FYI (updated): it works without pre-loaded images, but plugin catched width and height from these images.

edited Jan 11, 2016 at 18:23

answered Jan 10, 2016 at 21:05

oleh.meleshko

4,8052 gold badges30 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Rembrandt Over a year ago

It is not work too :( when I dont have width and height hardcoded images are not visible.

oleh.meleshko Over a year ago

@Rembrandt do you have photo.width installed previously? Did you try to use it like photo.width + 'px'?

Rembrandt Over a year ago

What do you mean by "installed previously"? I have access to photo.link so I should have to the width and height. I also tried now like this: ng-style="{ 'width' : width, 'height' : height }" and in the controller i have hardcoded for test $scope.width = '500px'; $scope.height = '500px'; ...

Rembrandt Over a year ago

I have just found out that the jquery BeforeAndAfter plugin makes that bug. When I turn it off Your solution works well. But I wanted to use that plugin and I have no idea how to do it now... I have edited first post also a little.

oleh.meleshko Over a year ago

@Rembrandt try it now ;)

|

Collectives™ on Stack Overflow

Angular - set html img width and height dynamically

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related