Angular directive for thumbnail hover previews.

thumbnail-directive.js

'use strict';

app.directive('thumbnail', function($interval){
  return {
    restrict: 'E',
    scope: {
      thumbs: '&thumbs',
      speed: '&speed'
    },
    template: '<div class="thumbnail"><img ng-src="assets/images/thumbnails/{{thumb}}"/></div>',
    link: function(scope, element, attrs){
      scope.thumb = scope.thumbs[0];
      var timerId = 0,
          thumbIndex = 0;
  
      var updateImage = function(){
        if (thumbIndex === scope.thumbs.length -1) {
          thumbIndex = 0;
        }
        scope.thumb = scope.thumbs[++thumbIndex];
      };
  
      var startTimer = function(){
        return $interval(updateImage, scope.speed);
      };
  
      var stopTimer = function(id){
        $interval.cancel(id);
      };
  
      element.on('mouseover', function(){
        timerId = startTimer();
      });
  
      element.on('mouseout', function(){
        stopTimer(timerId);
      });
    }
  };
});