DOWNLOAD pixab-15.html

Pixabay API sample demo
Search for pixabay photos to make slideshow

(1) Type in to search, for example: Nature; China; Japan; Kyoto; France; Paris; Scotland;
Germany; Italy; Thailand; Tahiti; India; Mexico; Peru; flowers; castles; Europe; Asia ...
(3) Scroll up to view 70 photos. Tap on a photo you like to select it. Tap it again to deselect.
(4) Tap the "Search" button again to get another 70 photos.
Select more photos. Then again tap "Search" then select the photo.

Usually you only get up to 3*70 = 210 or 4*70 = 280 photos.
Sometimes when you tap “Search” you don't get any photos or only a few provided. (Always make sure your phone (or ipad) is connected to the internet!)
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
SOURCE CODE OF THIS pixab-15.html
OR Download pixab-15.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Pixabay API sample demo</title>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

 <script src="https://www.youtube.com/iframe_api"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

    <style>
body{
	background-color:	#8FBC8F;
	font-size:16px;
	font-family:Arial;
}

  form {
  margin: 1em 0;
  text-align: center;
}

form input[type="text"] {
  width:85%;
  border: none;
  outline: none;
  padding: 5px 0;
  font-size: 1em;
  font-weight: bold;
  border-bottom: 1px solid #aaa;
  margin-bottom:.3em;
}

form input[type="submit"] {
  border: 1px solid #aaa;
  outline: none;
  color: #000;
  background-color: #FA8072;
  font-size:1.1em;
}

#result {
  width: 70%;
  margin: auto;
  padding: .2em;
  height:360px;
  overflow:auto;
  border:1px solid red;
}

.indicator{
  position:absolute;
  z-index: 4;
  top:.1em;
  right:.1em;
  font-size: 1.3em;
  color: magenta; /* aqua; */
}

.cell, .cell1 {
 padding: 1%; 
  position:relative;
  border:2px solid gray;
  display: inline-block;
  height: fit-content;
  width:fit-content;
}

button{
font-size: 1.1em;
margin-bottom:0.3em;
/* border-radius: 20%; */
}

/////////////

#container{
     position: relative;
	width:100%; 
	padding: 0px;
	margin: 0px;
	right:0px; 
}

#slides{
     /* border:1px solid aqua;*/
     background-color: #003333; /* 999 */
	position: relative;
	width:100%; 
	padding: 0px;
	margin: 0px;
	right:0px; 
}

.slide{
	position: absolute;
	max-width: 100%; 
	opacity: 0;
	z-index: 1;
	left:0;
     right:0;
     margin-left: auto;
     margin-right: auto;
     	top:1px; 

	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-o-transition: opacity 1s;
	transition: opacity 1s;
}

.showing{
	opacity: 1;
	z-index: 2;
}

/* Caption text */
.text {
  /* border:1px solid gray;*/
  color: blue; 
  font-family:Arial;
  padding: .2em;
  position: absolute;
  line-height:90%;

  width: 96%;/* 100% */
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  max-height:6em; 
  overflow: hidden;

  text-align: center;
  z-index:50;

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;
}

@media screen and (max-width:700px){
  img{
	max-width: 100%;
	max-height:200px;
	}
	#slides{
	height:200px;
	}
	.slide{
	max-height:200px;
	}
  .text{ font-size: .7em;
     bottom:.4em;
  }
}

@media screen and (min-width:700px){
  img{
	max-width: 100%;
	max-height:700px; /* 660px */
	}
	#slides{
	height:700px;
	}
	.slide{
	max-height:700px;
	}
  .text{
    font-size:1.5em;
    bottom: .5em;
  }
}

.stt{
color:white;
font-weight:bold;
font-family:Arial;
position:absolute;
width:5em;
height:1.2em;
top:0px;
left:0px;
z-index:10;
font-size:.6em;
background-color:#666;
opacity:.3;
padding:3px;
}

#seleArea{
 font-size:.8em
}

@media (min-width: 600px) {
  body{
    font-size: 20px;
  }

  #seleArea{
  font-size: 1em;
  }
}

table td{
 border-collapse: collapse;
border:1px solid gray;
}

h2{
font-family:Times;
font-style:italic;
margin:.1em;
}
    </style>
  </head>
  <body>
  <div align="center">
  <div style="width:70%; overflow:hidden; background-color:#003333; color:white;">
       <h2>Search for pixabay photos to make slideshow</h2>
  </div>
<br>
    <div id="result"></div>

<br>
(1) Type in to search, for example: Nature; China; Japan; Kyoto; France; Paris; Scotland; <br>
Germany; Italy; Thailand; Tahiti; India; Mexico; Peru; flowers; castles; Europe; Asia ...
<br>

   <form name="search">
   <input name="key" type="text" placeholder="Please enter a text for search">
     <br>
     (2)  Tap this button <input name="btn" type="submit" value="Search">
    </form>

<div style="width:70%; text-align:left; padding:.3em; border:1px solid gray">
(3) Scroll up to view 70 photos.  Tap on a photo you like to select it.  Tap it again to deselect.<br>
  (4) Tap the "Search" button again to get another 70 photos.
  <br>Select more photos.  Then again tap "Search" then select the photo.<br><br>

Usually you only get up to 3*70 = 210 or 4*70 = 280 photos.<br>
  Sometimes when you tap “Search” you don't get any photos or only a few provided.  (Always make sure your phone (or ipad) is connected to the internet!)
</div>
<br>
<b>METHODS OF SELECTING</b><br>
<div style="padding:4px; width:35%;text-align:left; overflow:hidden; border:1px solid gray">
A. All yes - no no 
<button onclick="selectAll()">Select All</button><br>
B. All no - yes yes 
<button onclick="deSelectAll()">Deselect All</button>
</div>
<br>
<textarea id="seleArea" style="width:80%; height:120px; ">

</textarea>
<br>

(5)  Tap this button <button onclick= "arrayInit('seleArea')">Load photos 1</button>
<button onclick= "copy('seleArea')">Copy the below code</button>

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

 <div id="player"></div>
 <br>
    <div style="width:85%;height:180px;overflow:auto;background-color:white">
  <table style="width:100%"><tbody id='tbody2'></tbody></table>
  </div>
 <br>
7) Then tap "Slide" button to start viewing slideshow<br>

<button id="playBut" onclick="setIntv(this)">Slide</button>
<button onclick="toView('slides')">Scroll to view</button>

<div class="container">

<div id="slides">
<div id="stt"></div>
</div>

</div>  <!-- container -->

<br><br>
   </div>
    
    <script>

pNum = '1';
'use strict';

document.search.btn.addEventListener('click', function(e) {
  e.preventDefault(); 

 if (!navigator.onLine) {
	alert('Check connection to internet !')
	return
}
  
  fetch( createURL(document.search.key.value) )
  .then( function( data ) {
    return data.json();  
  })
  .then( function( json ) {
    
    createImage( json );
    pNum++;
  })
})

function createURL( value ) {
  var API_KEY = '7126297-c5a1bdd21b4ba1a7d9969984b';
  var baseUrl = 'https://pixabay.com/api/?key=' + API_KEY;
  var keyword = '&q=' + encodeURIComponent( value );
  var option = '&orientation=horizontal&per_page=70&page=' +      pNum;
  var URL = baseUrl + keyword + option;
  return URL;
}

count =1;

function createImage( json ) {
        // var result = document.getElementById('result');
	   ss1 = '';
	   len =  json.hits.length 
        for (let i = 0; i < len; i++) {
               src =  json.hits[i].previewURL; 
// json.hits[i].largeImageURL => alt
			ss1 +=  '<div class="cell1" id="pt' + count + '" onclick = \'' +
			'toggleChoice(this)\'>' +
'<div class="indicator"></div>' +
               '<img src="' + 
			src + '" alt="' + json.hits[i].largeImageURL + '">' +
           '</div>'
			count++;
         } 
			$('#result').append(ss1);
	    // num = currentPage + 1;
}

yes = [];
no = [];

function toggleChoice(thi){
       var selindex = yes.indexOf(thi.id);
       var nolindex = no.indexOf(thi.id);
       if(selindex ==  -1){  var nolindex = no.indexOf(thi.id);
	thi.firstElementChild.innerHTML = '<i class="fas fa-check-circle"></i>';
	    yes.push(thi.id);
  	}
	else{
    // currently no -> deselect
    yes.splice(selindex, 1);
    thi.firstElementChild.innerHTML = '';
     }
     ss = yes.join(', ');
     $('#seleArea').val(ss);
}

function makeDiv(){
	len = yes.length;
	st = 'imgArr = [\n';
	for(i=0; i<len; i++){
		sour = $('#' + yes[i]).find('img').attr('alt');
		// alert(sour);
		st += '"' + sour + '",\n\n'
	}
	aa = st.lastIndexOf(',')
	st1 = st.substring(0,aa) + '\n];';
	$('#seleArea').val(st1);
}

function selectAll() {
    document.querySelectorAll(".cell1")
       .forEach(function(el) {
		  if(el.querySelector('.indicator').innerHTML == ''){
       			el.click();
            }
    });
}

function deSelectAll() {
    document.querySelectorAll(".cell1")
       .forEach(function(el) {
		  if(el.querySelector('.indicator').innerHTML != ''){
       			el.click();
            }
    });
}

/////////////////////// SLIDESHOW

dur = 3000;
stt = 0;

var currentSlide = 0;

function nextSlide(){
	goToSlide(currentSlide+1);
}

function previousSlide(){
	goToSlide(currentSlide-1);
}

function goToSlide(n){
slides = document.querySelectorAll('#slides .slide');
// alert('n = ' + n + '\n' + 'currentSlide = ' + currentSlide);
	slides[currentSlide].className = 'slide';
	
	currentSlide = (n+slides.length)%slides.length;
	slides[currentSlide].className = 'slide showing';
}

var playing = true;

function arrayInit(area){
     makeDiv();
     alert('OK 1');
	const script = document.createElement("script");
	const str = $('#' + area).val();
	script.text = str
	document.body.appendChild(script);
	alert('OK 2');
	init();
}

  function init(){
	len = imgArr.length
	ss = '<div class="slide showing"><img src="'
	+ getSrc(imgArr[0]) + '">' +
	  '<div class="text">' + 
		getAlt(imgArr[0])
               + '</div>' 
		+ '<div class="stt">1' + ' / ' + len 
               + '</div></div>'
	
	for(i=1; i<len ; i++){
		ss +=  '<div class="slide"><img src="' + 
		getSrc(imgArr[i])+ '">' +
	     '<div class="text">' + 
		getAlt(imgArr[i])
               + '</div>' 
		+ '<div class="stt">' + (i + 1) + ' / ' + len 
               + '</div></div>'
	}
	$('#slides').append(ss);
	
	// document.getElementById("slides").innerHTML = ss;
   }

function getSrc(st){
     if(st.search('#>') > 0){
		arr = st.split('#>');
		return arr[0]
	}else{
		return st
	}
}

function getAlt(st){
      if(st.search('#>') > 0){
		arr = st.split('#>');
		return arr[1]
	}else{
		return ''
	}
}

function setIntv(thi){
       slideInterval = setInterval(nextSlide,dur);
      /*  thi.style.display = "none"; */
}

function toView(ide){
	document.getElementById(ide).scrollIntoView();
}

function toBegin(thi){
	goToSlide(0);
}

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'); 
	alert('copied to the clipboard'); 
	input.blur();
}

////////////////////////  PLAY VIDEO

 var vvsum = 0; 
 
 function readJS(){
    vst1 = vst.replace(/@$/,'');
    arr = vst1.split('@');
    mmm = '';
   
    for(i=0;i<arr.length;i++){
        if(i%2 == 0){
            if(arr[i+1].search(/^#/g) == -1){
                mmm = 'playVid(this)'
                sst1 = '<b>'+vvsum+
                '</b>: <a class="titCL" href="#" onclick="'+mmm+';return false">'+ 
                arr[i]+'</a>';
                sst2 = '<span class="vidCL">'+ arr[i+1]+'</span>';
            }else{
                mmm = 'playPid(this)'
                sst1 = '<b style="color:red">'+vvsum+
                '</b>: <a class="titCL" href="#" onclick="'+mmm+';return false">'+ 
                arr[i]+'</a>';
                sst2 = '<span class="vidCL">'+ arr[i+1]+'</span>';
            }
            sst3 = '<tr style="background-color:white">'+
            '<td width="80"><img width="80" height="60" '+
            'src="http://img.youtube.com/vi/'+ arr[i+1]+'/default.jpg"></td>'+
            '<td>'+ sst1 + '<br>'+ sst2 + '</td><td style="width:25px">'+
            '<button class="ruBut" onclick="removeUndo(this)" style="width:100%">'+
            '1</button></td></tr>';
            document.getElementById('tbody2').innerHTML += sst3
            vvsum++;  
        }
    }    
}

  var tag = document.createElement('script');
  tag.src = "http://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
  normalW = '200';
  normalH = '113';
  clientH = document.body.clientHeight;
  bigScreen = false;
  var player;
  startvid = 'VH8UzK_v6yI';
  
  function onYouTubePlayerAPIReady(){  
        player = new YT.Player('player', {
            width: normalW,
            height:normalH,
            videoId: startvid,
            playerVars: 
            { 'autoplay':0, 'rel':0, 'showsearch':0, 'controls':1,'autohide':0},
            events: {
                'onStateChange': onPlayerStateChange,
                'onError': onPlayerError        
            }
        });    
  }
  
 function onPlayerError(error){
          nextVid();
      }
      
  function onPlayerStateChange(event){
      if (event.data == 0){
           playerState = 'ended';
           nextVid();
      }
    }

/* LOOP
   onStateChange: 
    function(e) {
        if (e.data === YT.PlayerState.ENDED) {
            player.playVideo(); 
        }
    }

https://developers.google.com/youtube/iframe_api_reference

loadVideoById({'videoId': 'bHQqvYy5KYo',
               'startSeconds': 5,
               'endSeconds': 60});

hg: nhiều progress bar
https://phanhung20.blogspot.com/2016/02/video-player-with-multiline-progress-bar.html

 function  playVidStart(a,b,c){
     player.loadVideoById({
          videoId:a,
          startSeconds:b,
          endSeconds:c
     });
 } 

*/

  par = {};
  
   function playVid(obj){
      par = obj.parentNode;
      // showTit();
      if(player.getPlayerState() == 1){
          
      }
      ob = par.getElementsByClassName('vidCL');
      vidSt = ob[0].innerHTML;
      var ss = vidSt.search('#');
      if(ss == -1){
          player.loadVideoById(vidSt, "large");
      }else{
          if(vidSt.search(':') != -1){
               vidSt =  formatConvert(vidSt);
          }
          var ar = vidSt.split('#');
          var a1 = parseInt(ar[1].replace('s=',''));
          var a2 = parseInt(ar[2].replace('e=',''));
          seEnd = a2;
          seMode = true;
          playVidStart(ar[0], a1, a2)
      }
 }
 
 function playYoutube() {
      player.playVideo();
 }
        
 function pauseYoutube() {
      player.pauseVideo();
 }
        
 function stopYoutube() {
      player.seekTo(0, true);
      player.stopVideo();
 }
 
  function nextVid(){
      var ob = par.parentNode.parentNode.getElementsByClassName('vidCL');
      var max = ob.length;
      var nextIndex = par.parentNode.rowIndex + 1
      if(nextIndex == max){nextIndex = 0}
      var id = ob[nextIndex].innerHTML;
      if(id.search(/^#/) == -1){  
          playVid(ob[nextIndex])
      }else{
          playPid(ob[nextIndex])
      }
 }
        
   function initV(){
      readJS();
 }

$(document ).ready(function(){
	initV();
});
 
 function removeUndo(ob){
      var butVal = ob.innerHTML;
      if(butVal == '1'){
          ob.innerHTML = '0';
          ob.parentNode.style.backgroundColor = "#CCCCCC"
      }else{
          ob.innerHTML = '1'; 
          ob.parentNode.style.backgroundColor = "white"
      }
 }
 
 function scrollToElement(elem, add){ 
      var top = $("#"+ elem).position().top;
      $(window).scrollTop( top - add);
 }

vst = '';

vst += "Organo Melodico" +
"@19WAs_llN80@";

vst += "Musica Elegante" +
"@z7ki0mqw0pc@";

vst += "Anniversary  Song" +
"@Ysv0_whyyQ8@";

vst += "Frank Pourcel" +
"@uMZmQaPoQFI@";

vst += "Italy/Napoli (Walking tour:Santa Lucia) Part 3"+     
"@G8RQZ_RmR_U@";

vst += "Frank Chacksfield - Come Back To Sorrento"+
"@MasOYWdgfa8@";
 
</script>
  </body>
</html>
JAVASSCRIPT ON IPAD (to see the list click ← then click ≡ and ⌄)

DOWNLOAD pixab-15.html

Search for pixabay photos to make slideshow

Popular posts from this blog

PHP JQUERY PROXY DEMO

SEARCH FOR PIXABAY PHOTOS
