Monaca Docs
Search…
Flickr Sample
This sample app shows how to retrieve pictures from Flickr and displays them as a slide show.

Demo

Tested Environment
  • Android 11.0
  • iOS 14.3

File Components

File
Description
index.html
The startup page
css/style.css
A stylesheet for the project
js/main.js
A JavaScript file for this project
js/jquery.bxslider.js
A Javascript file for photo sliding animation
images/*.png
Image files used in the project

Required JS/CSS Components

  • jQuery

HTML Explanation

The following HTML body of index.html file is for the title bar, spinner and container for displaying the images.
1
<div id="title-bar">
2
<h2>Monaca Photo Viewer</h2>
3
</div>
4
<div id="loadSpinner"></div>
5
<div id="container"></div>
6
<div id="bottom">
7
<img src="images/logo-monaca.png" width="160">
8
</div>
Copied!

JavaScript Explanation

There are 2 main functions in this sample app which will be explained as follows:

jsonFlickrFeed()

jsonFlickrFeed() is fired when the Flickr API is loaded. The Flickr API is called when the index.html file is loaded. Inside the header of index.html file, there is a line:
1
<script src="http://api.flickr.com/services/feeds/photos_public.gne?format=json" defer></script>
Copied!
This is where the Flickr API is called. In this function, the retrieved photos are then pushed into a local variable images and the photos are display as a slide show by calling displayPicture() function every 1 second. Below is the JavaScript code of this function:
1
var images = [];
2
3
// This function is fired when the Flickr API is loaded.
4
function jsonFlickrFeed(result) {
5
for (var j in result.items) {
6
var img = result.items[j].media.m;
7
images.push(img);
8
}
9
10
// display next photo every 1 second
11
setTimeout(displayPicture, 1000);
12
}
Copied!

displayPicture()

displayPicture() displays the photos stored inside images variable (photos retrieved from Flickr) in a container created by HTML code in index.html file. Below is the JavaScript code of this function:
1
//Display the retrieved photos from Flickr as a slide show
2
function displayPicture() {
3
$("#container").css("visibility", "hidden");
4
var $ul = $("<ul>");
5
6
for(var j in images) {
7
var srcUrl = images[j];
8
li = '<li><img src="' + srcUrl + '" id ="list" width="60%" /></li>';
9
$ul.append($(li));
10
}
11
12
$("#container").append($ul);
13
//Setting for photo sliding animation
14
$ul.bxSlider({
15
auto: true,
16
pager: false,
17
speed: 500,
18
pause: 1800,
19
controls: false,
20
});
21
22
$("#loadSpinner").remove();
23
$("#container img").addClass("shadow");
24
25
setTimeout(function() {
26
$("#container").css("visibility", "visible");
27
}, 1000);
28
}
Copied!
Last modified 4mo ago