# 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);
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://en.docs.monaca.io/sampleapp/samples/flickr.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.