CODEWITHSUNDEEP
javascripthtmlangularjsanimationgif
user5588594
user5588594

Reputation:

Activate .gif on mouseover in AngularJS with ng-repeat

I've seen a lot of answers to this question using jQuery. Like this: Stop a gif animation onload, on mouseover start the activation and Animating a gif on hover. But I'm looking for a way to do it with angular. I'm thinking it should be the same idea as when doing it in jQuery. I want to do exactly what the person who asked the question in the first link wanted to do, but in angular:

  1. On page load => Animations for all gifs are stopped

  2. On mouseover => Animations starts for that one gif

  3. On mouseout => Animation stops again for that gif

Here's what I have in my HTML:

<img class="projectGif" src="{{project.gifUrl}}" ng-mouseover="animation(project)">

The "project" object that I'm passing into the animation function is an object I'm getting earlier in my code from ng-repeat="project in projects". Then in my JavaScript: 

$scope.animation = function(project) {
    //not sure what to do here
};

I looked around on the angular documentation page for something similar to the jQuery $(this).attr(), and found stuff like $attr, and $set, and I thought maybe I could just use those to set the src in my img tag to the pathway for my img. So like $set('src', 'project.imgUrl') but I get an error in my console that says $set is not defined.

So my main question is, how do I use angular to make it so that my web page starts with a static .gif (or img etc) and then on hover, have the static .gif change to an animated .gif?

Upvotes: 0

Views: 2153

Answers (2)

forivall
forivall

Reputation: 9901

Using the technique from Animating a gif on hover, create a directive to which you provide both the url for the static gif and the animated gif, and then make it toggle between the two images on mouseover.

You can also use the technique describe in Extending Angular Directive

Once you've created the directive, your html could look something like

<img ng-src="{{project.staticUrl}}" custom-src-on-mouseover="{{project.gifUrl}}">

Upvotes: 0

georgeawg
georgeawg

Reputation: 48968

In pure HTML

<img  ng-repeat="project in vm.projects"
      ng-src="{{project.gifUrl}}"
      ng-init="project.gifUrl=project.staticUrl"
      ng-mouseover="project.gifUrl=project.dynamicUrl"
      ng-mouseleave="project.gifUrl=project.staticUrl">

Or a mixed solution:

HTML

<div ng-controller="myController as vm">
    <img ng-repeat="project in vm.projects"
         ng-src="{{project.gifUrl}}"
         ng-init="project.gifUrl=project.staticUrl"
         ng-mouseover="vm.setDynamic($index)"
         ng-mouseleave="vm.setStatic($index)">
</div>

JS

var vm = this;
vm.setDynamic = function(index) { 
    vm.projects[index].gifUrl = vm.projects[index].dynamicUrl; 
};
vm.setStatic  = function(index) { 
    vm.projects[index].gifUrl = vm.projects[index].staticUrl; 
};

Notice that I am using the $index special property of the ng-repeat directive. For more information on ng-repeat and $index, see the AngularJS ngRepeat API Docs

Upvotes: 2

Related Questions