SEARCH FOR PHOTOS THEN PLAY SLIDESHOW

February 26, 2023

A. SEARCH FOR FLICKR PHOTOS

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
Select mode: More code Full code

(6) (7)

(4)

(5)

<!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; } </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> <audio id="audio" preload="auto" tabindex="0" controls loop> <source src="thousands-of-words.mp3"> </audio> <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)

Wait at least 30 seconds. After that
(11) Tap the Audio button to plat music (12) Then tap PL button to start viewing slideshow

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 ⌄)

SEARCH FOR PHOTOS THEN PLAY SLIDESHOW

A. SEARCH FOR FLICKR PHOTOS

B. VIEW SLIDESHOW

(8) PAST ARRAY HERE

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

D. BUILD HTML FILE AND RUN IT ON YOUR IPAD

Popular posts from this blog

PHP JQUERY PROXY DEMO

WEB PROGRAMMING ON IPAD. Search yt videos by keyword and load js file to play

SEARCH FOR PIXABAY PHOTOS