I think that shadowbox processes the DOM only once and will not register AngularJS' DOM modifications.
The normal way is to write a wrapper directive which instantiates Shadowbox. I suggest you to call Shadowbox directly instead of using the auto-setup with the rel="shadowbox"
attribute. Basically there are two steps:
- Setup a directive for Shadowbox
- Register a function in the directive's scope that will be called when clicking on the link. Read the Shadowbox documentation and API documentation on how to do that.
Directive prototype:
angular.module('yourModuleName') // you can use your own name here
.directive('shadowbox', function() {
return {
// here you can style the link/thumbnail/etc.
template: '<a ng-click="openShadowbox()">{{imageName}}</a>',
scope: {
imageName: '@name',
imageUrl: '@url'
},
link: function (scope, element, attrs) {
// the function that is called from the template:
scope.openShadowbox = function () {
// see Shadowbox documentation on what to write here.
// Example from the documentation:
Shadowbox.open({
content: '<div id="welcome-msg">Welcome to my website!</div>',
player: "html",
title: "Welcome",
height: 350,
width: 350
});
};
}
};
});
Usage:
<a shadowbox name="image name" url="image url"></a>