EXAMPLE OF USING Build slideshow with search for photos

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

1 / 9

A Little Pink

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

EXAMPLE ON MODIFYING HTML5 MEDIAELEMENT.JS PLAYER

COPY SOURCE CODE FOR ytvideo-search.html

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

EXAMPLE ON MODIFYING HTML5 MEDIAELEMENT.JS PLAYER

COPY SOURCE CODE FOR ytvideo-search.html

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