> For the complete documentation index, see [llms.txt](https://en.docs.monaca.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://en.docs.monaca.io/sampleapp/samples/flickr.md).

# Flickr

This sample app shows how to retrieve pictures from Flickr and displays them as a slide show.

## Demo

[**Import Flickr Sample to your Monaca Account**](https://monaca.mobi/ja/directimport?pid=64081c89e78885022468f94f)

**Tested Environment**

* Android 11.0
* iOS 14.3

![](/files/-MfartYaWYjGzhoVY3gP)

## File Components

![](/files/-Mfas0EI_CRUaGBCOIu7)

| 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.

```markup
<div id="title-bar">
    <h2>Monaca Photo Viewer</h2>
</div>
<div id="loadSpinner"></div>
<div id="container"></div>
<div id="bottom">
  <img src="images/logo-monaca.png" width="160">
</div>
```

## 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:

```markup
<script src="http://api.flickr.com/services/feeds/photos_public.gne?format=json" defer></script>
```

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:

```javascript
var images = [];

// This function is fired when the Flickr API is loaded.
function jsonFlickrFeed(result) {
  for (var j in result.items) {
    var img = result.items[j].media.m;
    images.push(img);
  }

  // display next photo every 1 second
  setTimeout(displayPicture, 1000);
}
```

### 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:

```javascript
//Display the retrieved photos from Flickr as a slide show
function displayPicture() {
  $("#container").css("visibility", "hidden");
  var $ul = $("<ul>");

  for(var j in images) {
    var srcUrl = images[j];
    li = '<li><img src="' + srcUrl + '" id ="list" width="60%"  /></li>';
    $ul.append($(li));
  }

  $("#container").append($ul);
  //Setting for photo sliding animation
  $ul.bxSlider({
    auto: true,
    pager: false,
    speed: 500,
    pause: 1800,
    controls: false,
  });

  $("#loadSpinner").remove();
  $("#container img").addClass("shadow");

  setTimeout(function() {
    $("#container").css("visibility", "visible");
  }, 1000);
}
```