CODEWITHSUNDEEP
jqueryjsonangularjscolorbox
CodeCore
CodeCore

Reputation: 89

AngularJS, JSON & JQuery Colorbox Issue

I am not able to get colorbox working as expected (image opens in overlay) when using angularjs / json to populate the data. I have tried various solutions including the order of the javascript, etc. Any thoughts?

index.html File: 

<!doctype html>
<html lang="en" ng-app="portfolioApp" ng-controller="PortfolioCtrl">
<meta charset="UTF-8">
<title>JQUERY COlORBOX & ANGULARJS JSON</title>

<link href='//cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/example1/colorbox.css' rel='stylesheet' type='text/css'>

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<script src="controllers.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/jquery.colorbox.js"></script>

<script>
$(document).ready(function(){
$(".portfolio-gallery").colorbox({rel:'portfolio-gallery', slideshow:true});
});
</script>

</head>

<body>


<div ng-repeat="portfolio in portfolios" class="{{portfolio.sideclass}}">

    <a class="portfolio-gallery" ng-href="{{portfolio.url}}" title="{{portfolio.title}}">
        <img ng-src="{{portfolio.urlthumb}}" width="180px" height="160px" alt="{{portfolio.title}}">
    </a>

</div>


</body>
</html>

controllers.js File:

'use strict';

/* Controllers */

var portfolioApp = angular.module('portfolioApp', []);

portfolioApp.controller('PortfolioCtrl', ['$scope', '$http', function($scope, $http) {
$http.get('portfolio.json').success(function(data) {
$scope.portfolios = data;
});

}]);

portfolio.json File:

[
{
    "sideclass": "lsidebar", 
    "title": "Revolt Theory Design", 
    "url": "revolt_theory_vertical.jpg", 
    "urlthumb": "revolt_theory_vertical_tn.png"
}, 
{
    "sideclass": "rsidebar", 
    "title": "Macro Elements Business Card", 
    "url": "macro_elements_card.jpg", 
    "urlthumb": "macro_elements_card_tn.png"
}
]

Upvotes: 1

Views: 696

Answers (2)

CodeCore
CodeCore

Reputation: 89

I wasn't able to get it to work using $evalAsync, but was able to use $timeout:

'use strict';

/* Controllers */

var portfolioApp = angular.module('portfolioApp', []);

portfolioApp.controller('PortfolioCtrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {
$http.get('portfolio.json').success(function(data) {
$scope.portfolios = data;

$timeout(function() {
    $(".portfolio-gallery").colorbox({rel:"portfolio-gallery", slideshow:true})
}, 100);

});
}]);

Please share if there's a better solution

Upvotes: 1

Brent Washburne
Brent Washburne

Reputation: 13158

I'm not sure, but I think the problem is that the document.ready() function is run before the data has arrived. Until your portfolio-gallery has been populated, the $(".portfolio-gallery").colorbox() call does nothing.

I haven't tried this yet, but try using $evalAsync() as described in this SO answer: Call jquery plugin in directive only after data is renderer in DOM:

$http.get('portfolio.json').success(function(data) {
    $scope.portfolios = data;
    $evalAsync('$(".portfolio-gallery").colorbox({rel:'portfolio-gallery', slideshow:true})');
});

...and remove the <script> block from index.html.

Upvotes: 0

Related Questions