1

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...

4
  • Please post a fiddle/plunk.
    – RaviH
    Jan 24, 2014 at 14:41
  • what is a fiddle/plunk?? Jan 24, 2014 at 14:42
  • jsfiddle.net / plnkr.co
    – RaviH
    Jan 24, 2014 at 14:43
  • I can't do that... how would I add external libs to jsfiddle?? I would have to write my app from scratch again to make it work there! thanx anyways Jan 24, 2014 at 14:48

2 Answers 2

5

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:

  1. Setup a directive for Shadowbox
  2. 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>
6
  • thanks so much... I think this is the right way. Sadly, it won't work. I tried showing an alert('test'); in the link function, and it does not get called :S And the <a ng-click="openShadowbox()">{{name}}</a> shows literally "{{name}}" in the browser! Jan 24, 2014 at 15:33
  • This is just a prototype of a directive that shows you how to access the Shadowbox object inside it. You have to make some modifications to it, depending on your needs :) Jan 24, 2014 at 15:42
  • I know, but somehow I am not getting it to work :S thank you anyways! Jan 24, 2014 at 15:49
  • Ah, replace the = in the scope by an @, and name in the template by imageName sorry :) Jan 24, 2014 at 15:53
  • the function gets called now!! but somehow the {{name}} in the template does not get binded.. any idea why? Jan 24, 2014 at 16:00
-1

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. :)

1
  • I understand, but the question is how to do that! the shadowbox libs requires a Shadowbox.init(); call. I think this call is done before angularJS has finished injecting the DOM. How can I make this call only after angularjs is ready? Jan 24, 2014 at 14:58

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.