Flickr
Last updated
Last updated
This sample app shows how to retrieve pictures from Flickr and displays them as a slide show.
Import Flickr Sample to your Monaca Account
Tested Environment
Android 11.0
iOS 14.3
jQuery
The following HTML body of index.html
file is for the title bar, spinner and container for displaying the images.
There are 2 main functions in this sample app which will be explained as follows:
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:
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:
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:
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