I am using AngularJS, and I want to add a lightbox for showing images. My lightbox code works like this (I am using shadowbox):
<a href="myimage.jpg" rel="shadowbox">image name</a>
But when I want to use the shadowbox with AngularJS like this:
<a ng-repeat="pic in pics" href="{{pic}}" rel="shadowbox">image name</a>
the shadowbox will be ignored, and it works like a normal link. What is the best way to make this work?
I may have to write a directive, but I'm not familiar with it...
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:
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>
= in the scope by an @, and name in the template by imageName sorry :)Here are two Scenarios :
In first one you are creating the html first and then you make plugin call, Hence it works fine.
But in second case, you are creating elements at runtime but your plugin call already fires.
Hence you need to make the plugin call, once all elements get created.
Hope this may be the solution for your case. :)
