Skip to content

Instantly share code, notes, and snippets.

@davidecavaliere
Created February 16, 2014 16:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save davidecavaliere/9036620 to your computer and use it in GitHub Desktop.
Save davidecavaliere/9036620 to your computer and use it in GitHub Desktop.
AngularJS directive to add a overlay on a thumbnail image
directive('ngThumbnail', function($timeout){
return {
replace : true,
restrict : 'E',
templateUrl : 'js/templates/ngThumbnail.html',
//transclude : true,
scope : {
targetHref : '=',
imageSrc : '@',
id : '@',
effect : '&',
title : '@',
description : '@'
},
link : function(scope, elm, attrs) {
var folder = scope.targetHref;
scope.targetProject =
'#/project/'+folder.parent.replace(' ', '-')+
'/'+folder.friendlyUrl;
var hover = elm.find('.hover');
/*
* hide the hover
*/
hover.hide();
hover.css({
position : 'absolute',
top : elm.position().top,
left : elm.position().left,
//width : elm.find('img').width(),
//height : elm.find('img').height()
});
/*
* jquery animations
*/
elm.hover(function(){
log.debug("hover in");
var hover = elm.find('.hover');
hover.width(elm.find('img').width()-10);
hover.height(elm.find('img').height()-10);
elm.find('.hover').slideDown();//show('slow');
}, function() {
log.debug("hover out");
elm.find('.hover').slideUp();//hide('slow');
});
},
controller : function($scope, $location) {
$scope.goToProject = function() {
debugger;
var folder = $scope.targetHref;
var parent = folder.parent.replace(' ', '-');
$location.url('#/project/'+ parent + '/' + folder.friendlyUrl);
};
}
}
})
<div>
<a
href="targetProject"
class="hcaption"
ng-click="goToProject()"
>
<img id="img_{{id}}" src="{{imageSrc}}"
class="thumbnail img-responsive">
</a>
<div id="hover_{{id}}" class="hover">
<h2>{{title}}</h2>
<p class="lead">
{{description}}
</p>
<a href="{{targetProject}}" class="btn btn-default">View</a>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment