FINAL-71c-flickr.html

A. SEARCH FOR FLICKR PHOTOS

Instead of trying this page, you can try it out by clicking to open the following page
https://pvhung20.000webhostapp.com/f3-make-array.html
http://www.responsinator.com/?url=https://pvhung20.000webhostapp.com/f1-photo-music.html
https://pvhung20.000webhostapp.com/f1-photo-music.html
https://pvhung20.000webhostapp.com/p95-photo-music.html
https://pvhung20.000webhostapp.com/F90-unsp-pixab.html
https://pvhung20.000webhostapp.com/FINAL-75-flickr-search.html
https://pvhung20.000webhostapp.com/FINAL-72-no-audio-flickr.html
***********************************************************************

Examples for tag: china, jiangsu, hangzhou, kyoto, france, paris, germany, italy, brazil,
india, indian temples, thailand, indonesia, europe, asia, australia, flowers, dogs, cats...

(1)Type tag:

(2)From the page: (3)How many photos in a page:
When you are new to this webpage, just leave
“From the page” as 1 and “How many photos” as 100
(4)

(5)

Select mode: More code Full code

(6b)

METHODS OF SELECTING

A. All yes - no no
B. All no - yes yes

(5) Tap this button
Wait at least 30 seconds. After that
(6) Tap any blue title of a video in the table below to listen to music

7) Then tap "Slide" button to start viewing slideshow


<!DOCTYPE html>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
* {box-sizing: border-box;}

body {font-family: Verdana, sans-serif;}

.mySlides {
display: none;
}

img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 99%; /* 1000px; */
  position: relative;
  margin: auto;
  background-color:#003333;
  overflow:hidden;
}

/* Caption text */
.text {
  color: blue; /* #f2f2f2; */
  font-size: 18pt; /* 15px; */
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;

text-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white;

}

/* Number text (1/3 etc) */
.numbertext {
  color: white;
  font-size: 12pt;
  padding: 8px 12px;
  position: absolute;
  top: 0px;

font-weight:bold;
font-family: Arial, sans-serif;
background-color: rgba(0, 0, 0, 0.2);
  right: 0px;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 2s /* 1.5s; */
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

img{
	max-height:240px;
	max-width:320px;
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

.hide{
display:none;
}
  
  .cell1 img{max-height:150px;}
</style>
</head>
<body onload="showSlides()">
<div align="center">

<div class="slideshow-container">

<p class="hide">
END OF PART 1</p>


<p class="hide">
BEGIN OF PART 3</p>

</div>
<br>

</div>

<script>
let slideIndex = 0;

function showSlides() {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;

  if (slideIndex > slides.length) {slideIndex = 1}    
  slides[slideIndex-1].style.display = "block";  
  slides[slideIndex-1].getElementsByClassName('numbertext')[0].innerHTML = slideIndex + ' / ' +  slides.length;
 setTimeout(showSlides, 6000); 
}
</script>
</body>
</html>

B. VIEW SLIDESHOW

(8) PAST ARRAY HERE

(9 If the below area is not empty) (10)

C. BUILD HTML FILE AND RUN IT ON YOUR MOBILE PHONE

(under contruction)

D. BUILD HTML FILE AND RUN IT ON YOUR IPAD

(under contruction)

JAVASSCRIPT ON IPAD (to see the list click ← then click ≡ and ⌄)