EXAMPLE OF USING Build slideshow with search for photos

Here is the file "flickr-slideshow-flowers.hlml"
created by using "flickr-search-build.html"

A Little Pink

Mixed Petals

“Hope can be a powerful force. Maybe there’s no actual magic in it, but when you know what you hope for most and hold it like a light within you, you can make things happen, almost like magic.” _ Laini Taylor

Bougainvillea and mountains, Agia Galini, Crete, Greece.

DSC_4138

DSC_4072

DSC09092

DSC09147

DSC07934

SOURCE CODE OF THIS PAGE (flickr-slideshow-flowers.html)


<!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: 1em; /* 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:200px; /* 600px */
    max-width:100%;
}

/* 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>


<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://live.staticflickr.com/65535/52695564428_34ffcd5231_b.jpg">
<div class="text"> A Little Pink</div>
</div>

<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://live.staticflickr.com/65535/52694947486_31f3a2ba64_b.jpg">
<div class="text"> Mixed Petals</div>
</div>

<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://live.staticflickr.com/65535/52694549091_35d624b47b_o.jpg">
<div class="text"> “Hope can be a powerful force. Maybe there’s no actual magic in it, but when you know what you hope for most and hold it like a light within you, you can make things happen, almost like magic.” _ Laini Taylor</div>
</div>

<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://live.staticflickr.com/65535/52694807729_20d4f58b28_b.jpg">
<div class="text"> Bougainvillea and mountains, Agia Galini, Crete, Greece.</div>
</div>

<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://live.staticflickr.com/65535/52695001898_b616b4de6d_o.jpg">
<div class="text"> DSC_4138</div>
</div>

<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://live.staticflickr.com/65535/52693996367_b85248ba07_o.jpg">
<div class="text"> DSC_4072</div>
</div>

<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://live.staticflickr.com/65535/52665362797_b74d868dbb_b.jpg">
<div class="text"> DSC09092</div>
</div>

<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://live.staticflickr.com/65535/52666148159_ebf83cab6e_b.jpg">
<div class="text"> DSC09147</div>
</div>

<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://live.staticflickr.com/65535/52651551289_c91746a332_b.jpg">
<div class="text"> DSC07934</div>
</div>


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

</div>
<br>
<audio id="audio" preload="auto" tabindex="0" controls loop>
  <source src="https://pvhung20.000webhostapp.com/thousands-of-words.mp3">
</audio>
<br>

<h3 style="margin-bottom:8px">
SOURCE CODE OF THIS PAGE (flickr-slideshow-flowers.html)</h3>
<button onclick="copy('codeArea')" style="font-size:1em">
Copy code to clipboard</button>
<br><br>

<textarea id="codeArea" style="width:90%; height:200px; font-size: .8em">
<!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: .5em; /* 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:200px; /* 600px */
    max-width:100%;
}

/* 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>


<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://live.staticflickr.com/65535/52695564428_34ffcd5231_b.jpg">
<div class="text"> A Little Pink</div>
</div>

<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://live.staticflickr.com/65535/52694947486_31f3a2ba64_b.jpg">
<div class="text"> Mixed Petals</div>
</div>

<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://live.staticflickr.com/65535/52694549091_35d624b47b_o.jpg">
<div class="text"> “Hope can be a powerful force. Maybe there’s no actual magic in it, but when you know what you hope for most and hold it like a light within you, you can make things happen, almost like magic.” _ Laini Taylor</div>
</div>

<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://live.staticflickr.com/65535/52694807729_20d4f58b28_b.jpg">
<div class="text"> Bougainvillea and mountains, Agia Galini, Crete, Greece.</div>
</div>

<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://live.staticflickr.com/65535/52695001898_b616b4de6d_o.jpg">
<div class="text"> DSC_4138</div>
</div>

<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://live.staticflickr.com/65535/52693996367_b85248ba07_o.jpg">
<div class="text"> DSC_4072</div>
</div>

<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://live.staticflickr.com/65535/52665362797_b74d868dbb_b.jpg">
<div class="text"> DSC09092</div>
</div>

<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://live.staticflickr.com/65535/52666148159_ebf83cab6e_b.jpg">
<div class="text"> DSC09147</div>
</div>

<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://live.staticflickr.com/65535/52651551289_c91746a332_b.jpg">
<div class="text"> DSC07934</div>
</div>

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

</div>
<br>
<audio id="audio" preload="auto" tabindex="0" controls loop>
  <source src="https://pvhung20.000webhostapp.com/thousands-of-words.mp3">
</audio>
<br>
<h3 style="margin-bottom:8px">
SOURCE CODE OF THIS PAGE (flickr-slideshow-flowers.html)</h3>
<button onclick="copy('codeArea')" style="font-size:14pt">
Copy code to clipboard</button>
<br><br>
<textarea id="codeArea" style="width:600px; height:200px">

</textarea>
<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); 
}

////////
var copy = function(elementId) {
	var input = document.getElementById(elementId);
	var isiOSDevice = navigator.userAgent.match(/ipad|iphone/i);
	if (isiOSDevice) {
		var editable = input.contentEditable;
		var readOnly = input.readOnly;
		input.contentEditable = true;
		input.readOnly = false;
		var range = document.createRange();
		range.selectNodeContents(input);
		var selection = window.getSelection();
		selection.removeAllRanges();
		selection.addRange(range);
		input.setSelectionRange(0, 999999);
		input.contentEditable = editable;
		input.readOnly = readOnly;
	} else {
	 	input.select();
	}
	document.execCommand('copy'); 
    input.blur();
	alert('copied to the clipboard'); 
	
}
</script>
</body>
</html>

Open the below page, where you can make a slideshow like the one here
https://phanhung20.blogspot.com/2023/02/build-slideshow-with-search-for-flickr.html

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

EXAMPLE OF USING Build slideshow with search for photos

Here is the file "flickr-slideshow-flowers.hlml"
created by using "flickr-search-build.html"

SOURCE CODE OF THIS PAGE (flickr-slideshow-flowers.html)

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

EXAMPLE OF USING Build slideshow with search for photos

Here is the file "flickr-slideshow-flowers.hlml"created by using "flickr-search-build.html"

SOURCE CODE OF THIS PAGE (flickr-slideshow-flowers.html)

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

Here is the file "flickr-slideshow-flowers.hlml"
created by using "flickr-search-build.html"