Build slideshow with search for Flickr photos

February 18, 2023

Here is the file flickr-search-build.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 30
Select mode: More code Full code

(6) (7)

(4)

<!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{ height:600px; } /* 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>
Open the below page to copy SOURCE CODE of "flickr-search-build.html"
https://phanhung20.blogspot.com/2023/02/test-slideshow-and-copy-code-flickr.html

Open the below page to see a slideshow created by using this page
https://phanhung20.blogspot.com/2023/02/example-of-using-build-slideshow-with.html

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

Build slideshow with search for Flickr photos

Here is the file flickr-search-build.html

Popular posts from this blog

PHP JQUERY PROXY DEMO

SEARCH FOR PIXABAY PHOTOS

DOWNLOAD pixab-15.html