Yes, ng-click works on images.
Without further code I can't tell you why yours isn't working, but the code you have pasted will call myFunction in the scope of the controller governing that element.
EDIT
You definitely don't need to use jQuery for this, and it's not really thinking about it in an "angular" mindset if you do.
My suggestion is to make a directive to do this. I've created a plunker with a simple example of what it could look like.
Here's a summary:
Note: Because animation is important to you, make sure you include the ng-animate src and include it as a dependency in your app module definition. Use the same version of animate as base angular.
HTML
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="http://code.angularjs.org/1.2.13/angular-animate.js"></script>
Javascript
angular.module("gallery", ['ngAnimate'])
Now Define a template for your directive:
galleryPartial.html
<div class="container">
<img ng-src="{{image.url}}"
alt="{{image.name}}"
ng-repeat="image in images"
class="gallery-image fade-animation"
ng-click="openInNewWindow($index)"
ng-show="nowShowing==$index">
</div>
This template simply says "I want one image for every item listed in the 'images' array from the scope. The src is should be the url property of the image, and the alt text should be the name. When I click an image, run the openInNewWindow function passing the index of that image in the array. Finally, hide images unless the nowShowing variable is set to their index."
Also note the class fade-animation. This could be called anything, but this is the class we'll use to define the animation in CSS later.
Next we write the directive itself. It's pretty simple - it just has to use this template, and then define the openInNewWindow function, as well as iterate nowShowing through the array indexes:
.directive('galleryExample', function($interval, $window){
return {
restrict: 'A',
templateUrl: 'galleryPartial.html',
scope: {
images: '='
},
link: function(scope, element, attributes){
// Initialise the nowshowing variable to show the first image.
scope.nowShowing = 0;
// Set an interval to show the next image every couple of seconds.
$interval(function showNext(){
// Make sure we loop back to the start.
if(scope.nowShowing != scope.images.length - 1){
scope.nowShowing ++;
}
else{
scope.nowShowing = 0;
}
}, 2000);
// Image click behaviour
scope.openInNewWindow = function(index){
$window.open(scope.images[index].url);
}
}
};
})
You will see I have used an isolate scope to make this directive reusable and to keep things separated nicely. You don't have to do this, but it's good practice. The html for the directive must therefore also pass the images you want to put in the gallery, like so:
index.html
<body ng-controller="AppController">
<div gallery-example="" images="imageList"></div>
</body>
So the last bit of javascript we need to write is to populate that images array in the AppController scope. Normally you'd use a service to get a list of images from a server or something, but in this case we'll hard code it:
.controller('AppController', function($scope){
$scope.imageList = [
{
url: 'http://placekitten.com/200/200',
name: 'Kitten 1'
},
{
url: 'http://placekitten.com/201/201',
name: 'Kitten 2'
},
{
url: 'http://placekitten.com/201/202',
name: 'Kitten 3'
},
{
url: 'http://placekitten.com/201/203',
name: 'Kitten 4'
}
]
})
Finally, styling. This will also define the animation (note the use of ng-hide classes etc). I strongly recommend you read up on this here as it is too big a subject to cover in this (already long!) answer:
.fade-animation.ng-hide-add,
.fade-animation.ng-hide-remove {
-webkit-transition:0.5s linear all;
-moz-transition: 0.5s linear all;
-o-transition: 0.5s linear all;
transition:0.5s linear all;
display:block !important;
opacity:1;
}
This is your end result
