Skip to content
This repository was archived by the owner on Mar 1, 2022. It is now read-only.

Commit 598fc35

Browse files
author
Rusty Green
committed
1) Updated slideshow and example code.
2) Added timer to slideshow to automatically slide through images.
1 parent 9c5b976 commit 598fc35

File tree

12 files changed

+194
-42
lines changed

12 files changed

+194
-42
lines changed

‎dist/angular-flickr.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/index.html

+5-2
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
<head>
1111
<meta charset="utf-8">
1212
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
13-
<title></title>
14-
<meta name="description" content="">
13+
<title>angular-flickr module</title>
14+
<meta name="description" content="A flickr module for angular js. The module includes support for creating a photo gallery, thumbnail view, and all of the directives/filters/services to support it using the Flickr API.">
1515
<meta name="viewport" content="width=device-width">
1616
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
1717

@@ -31,6 +31,8 @@
3131
<![endif]-->
3232

3333
<!-- ng routes hook -->
34+
<div id="nav" class="navbar" ng-include="'views/navbar.html'"></div>
35+
3436
<div ng-view class="main-view"></div>
3537

3638
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
@@ -52,6 +54,7 @@
5254

5355
<script src="scripts/app.js"></script>
5456
<script src="scripts/controllers/main.js"></script>
57+
<script src="scripts/controllers/nav.js"></script>
5558

5659
<!-- Start of StatCounter Code for Default Guide -->
5760
<script type="text/javascript">

‎example/scripts/app.js

+38-19
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,43 @@
1-
'use strict';
1+
(function () {
2+
'use strict';
23

3-
angular.module('flickrApp', ['flickr'])
4-
.config(function ($routeProvider, $httpProvider) {
5-
delete $httpProvider.defaults.headers.common['X-Requested-With'];
6-
$httpProvider.defaults.useXDomain = true;
4+
var navs = [
5+
{
6+
title: 'Photoset Panel', path: '/photoset/panel', templateUrl: 'views/photoset/panel.html', controller: 'MainCtrl'
7+
},
8+
{
9+
title: 'Photoset Explorer', path: '/photoset/explorer', templateUrl: 'views/photoset/explorer.html', controller: 'MainCtrl'
10+
},
11+
{
12+
title: 'Photoset Slideshow', path: '/photoset/slideshow', templateUrl: 'views/photoset/slideshow.html', controller: 'MainCtrl'
13+
}
14+
];
715

8-
$routeProvider
9-
.when('/', {
10-
templateUrl: 'views/main.html',
11-
controller: 'MainCtrl'
12-
})
13-
.otherwise({
14-
redirectTo: '/'
16+
angular.module('flickrApp', ['flickr'])
17+
.config(function ($routeProvider, $httpProvider) {
18+
delete $httpProvider.defaults.headers.common['X-Requested-With'];
19+
$httpProvider.defaults.useXDomain = true;
20+
21+
angular.forEach(navs, function (nav) {
22+
$routeProvider.when(nav.path, nav);
1523
});
16-
})
1724

18-
.value('flickrConfig', {
19-
user_id: '99179128@N07',
20-
api_key: '006d5ace5a1ec6e87d501a2753da1bc7'
21-
})
25+
$routeProvider
26+
.otherwise({
27+
redirectTo: navs[0].path
28+
});
29+
})
30+
31+
.value('navConfig', navs)
32+
33+
.value('flickrConfig', {
34+
user_id: '99179128@N07',
35+
api_key: '006d5ace5a1ec6e87d501a2753da1bc7'
36+
})
2237

23-
.run(function ($rootScope) {
24-
});
38+
.run(function ($rootScope, $location) {
39+
$rootScope.active = function (path) {
40+
return $location.path() === path ? 'active' : '';
41+
};
42+
});
43+
})();

‎example/scripts/controllers/nav.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
'use strict';
2+
3+
angular.module('flickrApp')
4+
.controller('NavCtrl', function ($scope, navConfig) {
5+
$scope.navs = navConfig;
6+
});

‎example/styles/css/app.css

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
html{
1+
html {
22
border-top: 6px solid #999;
3-
border-bottom: 12px solid #999;
43
background-color: #ddd;
54
}
65

7-
body{
8-
border-top: 4px solid #ddd;
6+
body {
7+
border-bottom: 12px solid #999;
98
margin-bottom: 300px;
109
background-color: #fff;
1110
}
1211

13-
.main-view{
14-
box-shadow: inset 1px 1px 20px #999;
12+
.main-view {
13+
/*box-shadow: inset 1px 1px 20px #999;*/
1514
}

‎example/views/navbar.html

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<ul class="nav navbar-nav" ng-controller="NavCtrl">
2+
<li ng-repeat="nav in navs" ng-class="{active:active('{{nav.path}}')}">
3+
<a href="#{{nav.path}}">{{nav.title}}</a>
4+
</li>
5+
</ul>

‎example/views/photoset/explorer.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class="container">
2+
<h1>Photoset Explorer <small>Coming Soon...</small></h1>
3+
</div>

‎example/views/main.html ‎example/views/photoset/panel.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<div class="container">
2-
<h1>Angular Flickr <small>an angularjs module that extends the flickr API</small></h1>
2+
<h1>Angular Flickr <small>photoset panel directive</small></h1>
33

44
<photoset-panel panel-title="Flickr Photo Sets"></photoset-panel>
55

66
<div class="alert" style="border-left: 5px solid #f1e7bc; margin-top: 20px;">
77
<button type="button" class="close" data-dismiss="alert">&times;</button>
8-
<strong>Angular Flickr</strong> This demo page is an example of using the <a href="https://github.com/rustygreen/angular-flickr/">angular-flickr project</a>. The flick gallery below if the result of the following code:
8+
<strong>Angular Flickr</strong> This demo page is an example of using the <a href="https://github.com/rustygreen/angular-flickr/">angular-flickr module</a>. The flick gallery below if the result of the following code:
99
<code>
1010
<pre>module('myApp').value('flickrConfig', {
1111
user_id: '99179128@N07',

‎example/views/photoset/slideshow.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<div class="container">
2+
<h1>Angular Flickr <small>photoset slideshow directive</small></h1>
3+
4+
<photoset-slideshow set-id="72157634909050908" size="large"></photoset-slideshow>
5+
6+
<div class="alert" style="border-left: 5px solid #f1e7bc; margin-top: 20px;">
7+
<button type="button" class="close" data-dismiss="alert">&times;</button>
8+
<strong>Angular Flickr</strong> This demo page is an example of using the <a href="https://github.com/rustygreen/angular-flickr/">angular-flickr module</a>. The flick gallery below if the result of the following code:
9+
<code>
10+
<pre>module('myApp').value('flickrConfig', {
11+
user_id: '99179128@N07',
12+
api_key: '006d5ace5a1ec6e87d501a2753da1bc7'
13+
})</pre>
14+
<pre>&lt;div <span style=' color: Blue;'>class</span>=<span style=' color: Maroon;'>"container"</span>&gt;
15+
&lt;photoset-slideshow set-id=&quot;72157634909050908&quot; size=&quot;large&quot;&gt;&lt;/photoset-slideshow&gt;
16+
&lt;/div&gt;</pre>
17+
</code>
18+
19+
Check out the <a href="https://github.com/rustygreen/angular-flickr/">GitHub project</a> for more details.
20+
</div>
21+
</div>

‎modules/directives/photoset/photosetPanel.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,12 @@ angular.module('flickr.directives')
44
.directive('photosetPanel', function (flickrLoading) {
55
return {
66
scope: {
7-
panelTitle: '@'
7+
panelTitle: '@',
8+
panelClass: '@'
89
},
910
restrict: 'EA',
1011
replace: true,
11-
template: '<div class="panel">' +
12+
template: '<div class="panel {{panelClass}}">' +
1213
'<div class="panel-heading">' +
1314
'<div class="panel-title">{{panelTitle}} <loading-balls class="pull-right"></loading-balls></div>' +
1415
'</div>' +
@@ -23,7 +24,7 @@ angular.module('flickr.directives')
2324
'</div>' +
2425

2526
'<div class="col-lg-9">' +
26-
'<photoset-slideshow photo="photo"></photoset-slideshow>' +
27+
'<photoset-slideshow photo="photo" photo-class="thumbnail"></photoset-slideshow>' +
2728
'</div>' +
2829
'</div>' +
2930
'</div>',

‎modules/directives/photoset/photosetSlideshow.js

+92-8
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,29 @@
11
'use strict';
22

33
angular.module('flickr.directives')
4-
.directive('photosetSlideshow', function ($rootScope) {
4+
.directive('photosetSlideshow', function ($rootScope, $timeout, Photoset) {
55
return {
66
scope: {
77
photo: '=',
88
next: '&',
99
previous: '&',
10+
size: '@',
11+
interval: '@',
12+
setId: '@',
13+
outerClass: '@',
1014
photoClass: '@'
1115
},
1216
restrict: 'EA',
1317
replace: true,
14-
template: '<div class="carousel slide {{photoClass}}" ng-show="photo">' +
15-
'<div class="carousel-inner">' +
18+
template: '<div class="carousel slide {{outerClass}}" ng-show="$photo">' +
19+
'<div class="carousel-inner text-center">' +
1620

17-
'<div class="thumbnail item active">' +
18-
'<img ng-src="{{photo.large}}" src="" alt="" />' +
21+
'<div class="{{photoClass}} item active">' +
22+
'<img ng-src="{{$photo[$size]}}" src="" alt="" />' +
1923
'</div>' +
2024

21-
'<div ng-show="photo.title" class="carousel-caption">' +
22-
'{{photo.title}}' +
25+
'<div ng-show="$photo.title" class="carousel-caption">' +
26+
'{{$photo.title}}' +
2327
'</div>' +
2428
'</div>' +
2529

@@ -31,8 +35,80 @@ angular.module('flickr.directives')
3135
'</a>' +
3236
'</div>',
3337

34-
link: function (scope) {
38+
link: function (scope, element, attr) {
39+
var set, timer;
40+
41+
scope.$size = scope.size || 'large';
42+
43+
var currentPhotoIndex = function () {
44+
var index = -1;
45+
46+
if (set && scope.$photo) {
47+
angular.forEach(set.photo, function (img, i) {
48+
if (img.id === scope.$photo.id) {
49+
index = i;
50+
}
51+
});
52+
}
53+
54+
return index;
55+
};
56+
57+
var selectPhotoByIndex = function (index) {
58+
if (!set || !set.photo || !set.photo.length) {
59+
return;
60+
}
61+
62+
if (index >= set.photo.length) {
63+
index = 0;
64+
} else if (index < 0) {
65+
index = set.photo.length - 1;
66+
}
67+
68+
scope.$photo = set.photo[index]
69+
};
70+
71+
attr.$observe('setId', function (value) {
72+
if (!value) {
73+
return;
74+
}
75+
76+
set = Photoset.get({ photoset_id: value}, function (photoset) {
77+
if (photoset.photo && photoset.photo.length) {
78+
scope.$photo = photoset.photo[0]
79+
}
80+
});
81+
});
82+
83+
var stop = function () {
84+
if (timer) {
85+
$timeout.cancel(timer);
86+
}
87+
};
88+
89+
var run = function () {
90+
stop();
91+
92+
if (!attr.interval) {
93+
return;
94+
}
95+
96+
timer = $timeout(function () {
97+
console.log('Setting timer', attr.interval);
98+
scope.$next();
99+
run();
100+
}, attr.interval);
101+
};
102+
103+
attr.$observe('interval', function(value){
104+
if (value){
105+
run();
106+
}
107+
});
108+
35109
scope.$next = function () {
110+
selectPhotoByIndex(currentPhotoIndex() + 1);
111+
36112
if (scope.next) {
37113
scope.next();
38114
}
@@ -42,13 +118,21 @@ angular.module('flickr.directives')
42118
};
43119

44120
scope.$previous = function () {
121+
selectPhotoByIndex(currentPhotoIndex() - 1);
122+
45123
if (scope.previous) {
46124
scope.previous();
47125
}
48126

49127
//$rootScope.$emit('photoset.photo.request.previous');
50128
$rootScope.$broadcast('photoset.photo.request.previous');
51129
};
130+
131+
scope.$watch('photo', function (value, oldValue) {
132+
if (value && value !== oldValue) {
133+
scope.$photo = value;
134+
}
135+
});
52136
}
53137
};
54138
});

‎modules/services/PhotoSet.js

+12-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ angular.module('flickr.services')
77
params: {
88
common: {
99
format: 'json', // Optional.
10-
api_key: flickrConfig.api_key || '006d5ace5a1ec6e87d501a2753da1bc7',
10+
api_key: flickrConfig.api_key || flickrConfig.apiKey || '006d5ace5a1ec6e87d501a2753da1bc7',
1111
jsoncallback: 'JSON_CALLBACK'
1212
},
1313
get: {
@@ -34,6 +34,17 @@ angular.module('flickr.services')
3434
params: config.params.get,
3535
callback: config.params.jsoncallback,
3636
transformResponse: function (data) {
37+
if (!data || !data.photoset || !data.photoset.photo) {
38+
return;
39+
}
40+
41+
// TODO: Add the next/previous functionality here.
42+
// data.photoset.next = function(){
43+
// };
44+
//
45+
// data.photoset.previous = function(){
46+
// };
47+
3748
angular.forEach(data.photoset.photo, function (photo) {
3849
var url = 'http://farm' + photo.farm + '.staticflickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret;
3950
angular.extend(photo, {

0 commit comments

Comments
 (0)