SEARCH FOR UNSPLASH PHOTOS ON IPAD

Javascript is used

How many photos:  
First click NEW SEARCH (0 % is seen). Loading: 0 % 




<!DOCTYPE html>
<html>
<meta charset=uft-8>
    <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
img {
  max-height:620px;
  width:auto;
}
body, select{
font-size:14pt;
}
button{
font-size:16pt;
}
#imgDiv{
border:1px solid gray;
}
</style>
</head>
<body>
<button id="but" onclick="newSearch()">NEW SEARCH</button>
<input type="text" id="search" style="font-size:14pt">
<b>How many photos:</b>
<select id="combo">
   <option value="1">30</option>
   <option value="2">60</option>
   <option value="5" selected>150</option>
   <option value="10">300</option>
   <option value="60">1800</option>
</select>
&nbsp;
<button id="searchBtn" onclick= "allPage(this)">SEARCH</button>
<br>
<div id="progressDiv" style="width:95%;height:28px;text-align:center; font-weight:bold">
First click NEW SEARCH (0 % is seen). Loading:&nbsp;<span style="color:red"><span id="progress">0</span>&nbsp;%</span>
&nbsp;<span style="font-weight:normal">
<button onclick="goNum(0, 1)">FIRST</button>
<button onclick="goBottom()">LAST</button>
</span>
</div>
<br>
<div id="imgDiv" style="overflow:auto;width:95%;height:640px">
</div>
<br>
<script>
currPage = 1;
totalPages = 1;
count = 1;
var pageMax;
clientId = "PASTE YOUR KEY HERE"; 
function newSearch(){
		$('button').removeAttr("disabled");
		clearInterval(interval);
		count = 1;
		currPage = 1;
		$('#progress').html(0);
		$('#search').val('');
		$('#imgDiv').empty();
}
function allPage(thi){
       thi.setAttribute("disabled", true);
       pageMax = $('#combo :selected').attr('value');
	  interval = setInterval(SearchPhotos, 3000);
}
function SearchPhotos(){
       query = document.getElementById("search").value;
       url = "https://api.unsplash.com/search/photos/?client_id="+clientId+"&query="+query + "&per_page=30&page=" + currPage;
	 $.getJSON(url, callBack); 
};
function callBack(data, status) {
  if((currPage <= pageMax) && ( currPage <= totalPages)){
	 totalPages = data.total_pages;
      if(totalPages < pageMax){
			pageMax = totalPages
	   }
        ss1 = '';
        for (let i = 0; i < data.results.length; i++) {
			ss1 +=  '<div>' + count + '- ' + data.results[i].description +
               '</div><img src="' + data.results[i].urls.regular + '"><br>'
			count++;
         } 
			$('#imgDiv').append(ss1);
			cent = (currPage/pageMax)*100;
			cent = Math.round(cent);
 		     $('#progress').html(cent);
			currPage++
   }else{
		clearInterval(interval);
		goBottom();
   }
}
 function goNum(a, b){
	num = $('#imgDiv div').length;
	num1 = Math.round(num*a/b);
	elem = $('#imgDiv div').eq(num1);
	 container = $('#imgDiv');
      container.scrollTop(
      elem.offset().top - container.offset().top + container.scrollTop()  
    );
}
function goBottom(){
		elem = $('#imgDiv div:last');
		container = $("#imgDiv");
		container.scrollTop(
      elem.offset().top - container.offset().top + container.scrollTop()  
    );
}
</script>
</body>
</html>

Popular posts from this blog

PHP JQUERY PROXY DEMO

Image
Proxy script (or proxy program) is a script, wich is located between the user's browser and the "target server". Here I'would like to make a simple demo for PHP-Jquery-script proxy method. So far in my blog I just use YouTube API v.3 and JavaScript-jQuery to find videos. This time I try to use PHP language and jQuery to find videos. We often hear about "Web scraping with PHP," which can be roughly considered to include 9/10 PHP and 1/10 jQuery. Now I want to do it again but with 1/10 PHP and 9/10 jQuery. This page ("php-jquery-proxy.html") is for web scraping using mainly jquery-ajax in combination with only one function from PHP language (get_file_contents function). Using it I can get video ids, video titles from the source code of youtube pages and watch those videos continuously. To use this page you don't need to have Youtube API-3 key but need to download from Internet the XAMPP package...
Read more

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

Previously in March and April 2016 I posted OBSERVE nextPageToken IN YOUTUBE JSON DATA and SEARCH BY KEYWORD - GETTING MAXIMAL NUMBER OF ITEMS. Now those posts were old, some links were broken, They are written for PC and then youtube did not restrict video search by granting quota. Now I update it to suit the quota situation and write for programming on the ipad. <!DOCTYPE html> <html> <meta charset= "utf-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <meta name= "author" content= "pvhung20" > <head> <script src= "https://code.jquery.com/jquery-3.6.0.js" ></script> <style> body { font-family :Arial; font-size : 14pt ; background-color : #003333 ; margin : 0px ; padding : 0px ; margin-bottom : 50px ; color : white ; } button , input , textarea , span { font-size : 14pt ; } textarea { ...
Read more