Angular - jQuery justified gallery
HTML
<script src="https://code.angularjs.org/1.2.9/angular.js"></script>
<script src="http://kleiberweb.de/fiddle/jquery.justifiedGallery.js"></script>
<div>
<div id="slideshow_wrap" ng-app="testApp" ng-controller="Ctrl">
<div justified id="justified">
<a ng-repeat="dir in dirs.data" ng-href="{{dir.image.original.ur}}" repeat-done>
<img ng-src="{{dir.image.original.url}}" alt="{{dir.id}}"/>
</a>
</div>
</div>
</div>
<script>
</script>
CSS
@-webkit-keyframes justified-gallery-show-caption-animation {
from {
opacity: 0;
}
to {
opacity: 0.7;
}
}
@-moz-keyframes justified-gallery-show-caption-animation {
from {
opacity: 0;
}
to {
opacity: 0.7;
}
}
@-o-keyframes justified-gallery-show-caption-animation {
from {
opacity: 0;
}
to {
opacity: 0.7;
}
}
@keyframes justified-gallery-show-caption-animation {
from {
opacity: 0;
}
to {
opacity: 0.7;
}
}
@-webkit-keyframes justified-gallery-show-entry-animation {
from {
opacity: 0;
}
to {
opacity: 1.0;
}
}
@-moz-keyframes justified-gallery-show-entry-animation {
from {
opacity: 0;
}
to {
opacity: 1.0;
}
}
@-o-keyframes justified-gallery-show-entry-animation {
from {
opacity: 0;
}
to {
opacity: 1.0;
}
}
@keyframes justified-gallery-show-entry-animation {
from {
opacity: 0;
}
to {
opacity: 1.0;
}
}
.justified-gallery {
width: 100%;
position: relative;
overflow: hidden;
}
.justified-gallery > a, .justified-gallery > div {
position: absolute;
display: inline-block;
overflow: hidden;
opacity: 0;
filter: alpha(opacity=0);
/* IE8 or Earlier */
}
.justified-gallery > a > img, .justified-gallery > div > img {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
border: none;
}
.justified-gallery > a > .caption, .justified-gallery > div > .caption {
display: none;
position: absolute;
bottom: 0;
padding: 5px;
background-color: #000000;
left: 0;
right: 0;
margin: 0;
color: white;
font-size: 12px;
font-weight: 300;
font-family: sans-serif;
}
.justified-gallery > a > .caption.caption-visible, .justified-gallery > div > .caption.caption-visible {
display: initial;
opacity: 0.7;
filter:...
JavaScript
var app = angular.module('testApp', []);
app.directive('justified', ['$timeout', function ($timeout) {
return {
restrict: 'AE',
link: function (scope, el, attrs) {
scope.$watch('$last', function (n, o) {
if (n) {
$timeout(function () { $(el[0]).justifiedGallery({margins: 2,rowHeight: 20,lastRow: "nojustify",captions:false,captionsColor: "#d6d1c7",cssAnimation: true,captionsAnimationDuration: 500,imagesAnimationDuration: 300,captionsVisibleOpacity: 0.7}); });
}
});
}
};
}]);
app.directive('repeatDone', [function () {
return {
restrict: 'A',
link: function (scope, element, iAttrs) {
var parentScope = element.parent().scope();
if (scope.$last){
parentScope.$last = true;
}
}
};
}]);
function Ctrl($scope) {
$scope.dirs = {
"data": [
{
"image": {
"original": {
"url": "https://i.pinimg.com/originals/74/19/cc/7419ccd55d05346ea2d8b667729a5ba1.jpg",
"width": 1080,
"height": 1080
}
},
"counts": {
"saves": 13,
"comments": 0
},
"id": "353814114470721797"
},
{
"image": {
"original": {
"url": "https://i.pinimg.com/originals/11/ab/a5/11aba5625ae34301549c69d3adeb6881.jpg",
"width": 719,
"height": 1280
}
},
"counts": {
"saves": 7,
"comments": 0
},
"id": "353814114470721785"
},
{
"image": {
"original": {
"url": "https://i.pinimg.com/originals/eb/ac/9a/ebac9a4d11aedc850fcd1f885210fd7d.jpg",
"width": 1024,
"height": 1024
}
},
"counts": {
"saves": 1,
"comments": 0
},
"id": "353814114470707203"
},
{
"image": {
"original": {
"url":...