How to AutoRun Colorbox with Angular Js

Question

Here is my app:

Part of my app:

var app = angular.module("app", ["ngRoute",
"ngAnimate"]);

app.config(function($routeProvider) { 
$routeProvider.

when("/inicio", {

templateUrl: "inicio.html",
  controller: "inicioCtrl",
  animate: "slideLeft"
}).
otherwise({
  redirectTo: "/inicio"
});
});

app.controller("ViewCtrl", function($scope) {

});

app.directive('colorbox', function() {
return {   
restrict: 'AC',    
link: function (scope, element, attrs) {        
  $(element).colorbox(attrs.colorbox);     
}
};  
});

As you see i have tried setting the directive but i dont know why it does not work...I researched a lot and tried unsuccessfully ways to...

thanks in advace

score 0 · Accepted Answer · edited May 23 '17 at 11:43

I think the main reason why your plunker is not working is because you haven't included the required js files. Angular, jQuery & colorbox and also app.js was missing.

The directive for the colorbox looks like this:

app.directive('colorbox', function() {
    return {   
        restrict: 'A',    
        link: function (scope, element, attrs) {        
        $(element).colorbox(scope.$eval(attrs.colorbox));     
    }
};

Also this Stackoverflow question was useful to solve your problem.

You can find the updated plunker here.

The code looks still pretty messy, because your code indentations are not correct. Please use it correctly, because it improves readability. Anyway it is working now and auto opens your colorbox with the AngularJS directive.

thanks for your quick answer... i know that the required files was not included and sorry for that, it is just that i dont want to include the whole code 'cause It is very long for the bootstrap...the plunker was just to show you the basic....i alrready solve the problem, the issue was that i dont write correctly this line:
and also the order of the required files 'cause the angular was last and when i put it the first it solve the issue at all. — Sergio Quintero, Jan 24 '15 at 22:21

Igor Lino · Answer 2 · 2015-06-09T08:17:59.933

-1

No need to implement the directive yourself.

There are free MIT open source angular directives (and one service) for colorbox are available at: https://github.com/igorlino/angular-colorbox There is some amount of documentation and a demo example page.

It can be used as an attribute (with options available) or as tag (with options and also ability bind callbacks supported by colorbox).

Using your code, an code example how to use it

JAVASCRIPT
//inject dependency to the angular-colorbox
var app = angular.module("app", ["ngRoute", "ngAnimate", "colorbox"]);

HTML
<img id="cb_01" src="path_to_image" colorboxable="{opacity:0.5, open: true}">

HTML
<img id="cb_03" src="path_to_image" >
<colorbox box-for="#cb_03"  options="{href:'images/large/image1.jpg', opacity:0.5, open: true, title:'A title' }" />


HTML GALLERY
<img class="gal01" src="path_to_image" >
<img class="gal01" src="path_to_image2" > 
<colorbox box-for=".gal01"  options="{open: true, title:'A colorbox gallery' }" />

Disclaimer: i'm the maintainer of that MIT open source project.

edited Jun 09 '15 at 08:17

answered Jun 08 '15 at 23:27

Igor Lino

532
7
10

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – rink.attendant.6 Jun 09 '15 at 03:29
You are right, github projects can disappear. (hopefully not, they are there to help others) – Igor Lino Jun 09 '15 at 07:56
@IgorLino hey, i want to use an url in iframe, i succeed using jquery. I didn't find in angularjs colorbox. can you guide me – Lokesh Sanapalli Aug 20 '16 at 04:56
iframes are encapsulated, so you won't have any access to it. think of it like a browser inside a browser – Igor Lino Aug 24 '16 at 08:35

How to AutoRun Colorbox with Angular Js

2 Answers2