SEARCH FOR FLICKR PHOTOS ON IPAD

If you want to learn web programming on ipad (using javascript) then you need to have a html editor app.
As for me, I have installed Koder code editor app to my ipad.

1- If you want to use thousands of beautiful photos from flickr.com then you need to subscribe to it. Then you need to obtain flickr api key. You can googling to know how to do those tasks.

2- Using your ipad, open App Store app. Search for Koder code editor. Install this app to your ipad.
3- Open Koder app, create a folder named for example MY-HTML-JS.
4- Open this folder, create 2 files: index-search.html and copyarea.js.
Now both files are empty.
You do not need to save folders or files, Koder save everything you type in automatically.

When using ipad, it is very difficult to use a finger to select a long text for copying it. By creating file copyaea.js you can make the selecting content of a textarea easier (just tap once on the button COPY).
5- Open this page (http://phanhung20.blogspot.com/2021/), tap the button COPY to copy content of the file index-search.html, return to file index-search.html in Koder, paste the content to this file.
6- Do the same to get the contents of the file copyarea.js.
7- In Koder, open the file index-search.html, find the text PAST YOUR FLICKR API KEY HERE, replace it with your flickr api key.
8- Tap the browse icon (image of an eye) to see how the file index-search.html works.


COPY CODE OF index-search.html




COPY CODE OF copyarea.js




****************************************************
YOU CAN TRY THIS HTML FILE HERE

Search for tags of Flickr photos

Examples for tag: china, jiangsu, hangzhou, kyoto, france, paris, germany, italy, brazil, india, indian temples, thailand, indonesia, europe, asia, australia, flowers, dogs, cats...
Type tag: How many photos:

Please wait until you see 100% or blue number stops increasing
Slideshow duration: Increase duration value if photo slowly appears (one photo with two titles)







END OF TRYING HTML FILE
******************************************************
YOU CAN READ THE ABOVE CODE HERE 
<!DOCTYPE html>
<html>
<meta charset=utf-8>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
body{
font-family:Arial;
font-size:14pt;
/*background-color:#DDDDDD;*/
}
#tit{
font-size:14pt;
}
input[type="button"], button{font-size:16pt}
input[type="text"]{font-size:14pt}
#area1{
width:75%;
height:150px;
}
#result{
width:93%;
height:200px;
overflow:auto;
border:1px solid gray;
}
.us{
text-decoration: none;
}
.imgDiv{
float:left;
border:1px solid green;
background-color:white;
font-size:14pt;
}
#searchterm{
font-size:14pt;
}
#statusPT, #status{
width:450px;
border:1px solid gray;
height:30px;
font-size:14pt;
}
.thumb{
font-size:14pt;
}
#bigIMG{
max-height:630px;
}

#div1 img {max-height:125px; margin:3px; border:1px solid #dedede;}
#titTab td{
border:1px solid gray;
}

#backBut, #nextBut{
width:75px;
}
.normal{
background-color:white;
}

.load{
background-image:url("ajax-loader.gif")  center center no-repeat;
}
#check{
font-size:16pt;
color:blue;
font-weight:bold;
}
#cent{
color:red;
}
#wait{
color:brown;
}
#using{
color:green;
font-weight:bold;
font-size:16pt;
}
select{
font-size:16pt
}
#status{
color:green;
font-weight:bold;
}
</style>
</head>

<body>
<h2 style="margin:8px">Search for tags of Flickr photos</h2>
<div style="width:98%">
  Examples for tag: china, jiangsu, hangzhou, kyoto, france, paris, germany, italy, brazil, india, indian temples, thailand, indonesia, europe, asia, australia, flowers, dogs, cats...
</div>
<b>Type tag:</b>
 <input id="searchterm" value='brazil'>
<b>How many photos:</b>
<select id="combo">
  <option value="1">400</option>
  <option value="2" selected>800</option>
  <option value="3">1200</option>
  <option value="5">2000</option>
  <option value="7">2800</option>
  <option value="9">3600</option>
  <option value="10">4000</option>
</select>
    <button id="start">Search</button>
<span id="status"></span>
<br>
<span id="check"></span>
<br>
<b id="wait" style="font-size:16pt">Please wait until you
see 100% or blue number stops increasing</b>
<br>
<b>Slideshow duration:</b>
<select id="comboDur">
  <option value="4000">4000 ms</option>
  <option value="5000">5000 ms</option>
  <option value="6000" selected>6000 ms</option>
  <option value="7000">7000 ms</option>
  <option value="8000">8000 ms</option>
  <option value="9000">9000 ms</option>
   <option value="10000">10000 ms</option>
</select>
Increase duration value if photo slowly appears (one photo with two titles)
<br><br>
<div id="div1" style="width:95%;height:135px;overflow:auto; border:1px solid gray; text-align:left; padding:5px; background-color:#DDDDDD">
</div>
<br>
<table id="titTab" style="width:95%"><tr><td style="width:70%">
<div id="tit" style="width:100%:height:47px; overflow:auto">
</div>
</td><td style="width:30%;text-align:center">
<button id="slide">AUTO</button>
<button id="backBut"><</button>
<button id="nextBut">></button>
</td></tr>
</table>
<img id="bigIMG" src= '' width:'auto'>
<br>
<textarea id="result" style="width:93%; height:200px;font-size:14pt"></textarea>
<br>
<button onclick="outputCopy('result')">COPY</button>
<br>
<textarea id="area1" style="font-size:14pt">
</textarea>
<br>

<script src="copyarea.js"></script>

<script>
$(document).ready(function(){
	$('#wait, #using').hide();
});
var pageMax;
var url = "https://api.flickr.com/services/rest/";
var key = "PASTE YOUR FLICKR API HERE";
var perPage = 400;
var currentPage = 1
var totalPhotos;
var totalPages;
var extras = "url_m, url_n, url_z, url_c, url_l, url_o";
var reqParams;
var interval;

 function startSearch(){
    reqParams = {
            "api_key": key,
            "method": "flickr.photos.search",
            "tags": $("#searchterm").val(),
            "extras": extras,
            "per_page": perPage,
            "page": currentPage,
            "format": "json",
            "nojsoncallback": 1
        };
  $.getJSON(url, reqParams, callBack); 
};

function callBack(data, status) {
jsonSt = JSON.stringify(data, null, 2);
$('#area1').val(jsonSt); 
    var photoObj = data.photos;
    totalPhotos = photoObj.total;
    totalPages = photoObj.pages;
    listPhotos(photoObj.photo);
}

pid = []; tit = [];

function listPhotos(photoArray) {
       if ((currentPage <= pageMax) && (currentPage <= totalPages)){
        var directLink = "";
        var link = "";
        var title = "";
        var output = "";
        for (var i = 0; i < photoArray.length; i++) {
            directLink= getLargestSize(photoArray[i]);
           pid.push(directLink);
           title = photoArray[i].title ? photoArray[i].title : "";
           title = title.replace(/'/g,"\\'");
		 title = title.replace(/"/g,'\\"');
            tit.push(title);
            output += '<li>' + directLink + '<br>\nTitle: ' + title +'</li>\n'
        }
        oldTxt = $('#result').val();
        $("#result").val(oldTxt + output);
          $("#status").html("Loading: " + '<span style="color:red">' + currentPage + '/' + pageMax+  ' </span>');

        currentPage++;
    } else {
        clearInterval(interval);
        $("#status").html("Loaded " + pid.length + " from " + totalPhotos);
        hgShow();
    }
}

function getLargestSize(photo) {
    var output = photo.url_o;
    if (output === undefined) output = photo.url_l;
    if (output === undefined) output = photo.url_c;
    if (output === undefined) output = photo.url_z;
    if (output === undefined) output = photo.url_n;
    if (output === undefined) output = photo.url_m;
    return output;
}

$("#start").click(function () {
    $(this).prop('disabled', true);
    pid = [];
    tit = [];
    pageMax = $('#combo :selected').attr('value');
    $("#status").html("Loading...");
    $("#result").html("");
    
    currentPage = 1;
    interval = setInterval(startSearch, 3000);
});

curNum = 0;

function changeImg(sour, tit, ii){
     curNum = ii;
	$('#bigIMG').attr('src', sour);
	$('#tit').html((ii + 1) +'- ' + tit);
};

function hgShow(){
$('#wait').show();
	len = pid.length;
	for(i=0; i<len;i++){
		pp = pid[i];
		nn = pp.lastIndexOf('_');
		p1 = pp.substring(0, nn) + '.jpg';
		// alert(p1);
		i1 = i + 1;
		pi = pid[i];
		if(pi.search('_o.jpg') > 0){
		pi= pi.replace('_o.jpg', '_b.jpg');
		}
		if(pi.search('_o.png') > 0){
		pi = pi.replace('_o.png', '_b.jpg');
		}
            ss = '<a href="#" onclick="changeImg(\'' + pi + '\', \'' + tit[i] + '\', ' + i + ');return false"><img src="' + p1 + '"></a>';
            $('#div1').append(ss);
        } // for
        loadCheck();
	}
	
	function nextIMG(){
		if(curNum < (pid.length - 1)){
		curNum++;
		n = curNum;
		num = '<span class="spNum">' + n + '- </span>';
		$('#bigIMG').attr('src', pid[n])
	     $('#bigIMG').on("load", function(){
	     tt = tit[n].replace(/\\'/g, "'");
	     $('#tit').html(num + tt);
	     });
		}else{
		alert('Tap <');
		}
	}
			
	$('#nextBut').on("click", function(){
		nextIMG();
	});
		
	$('#backBut').on("click", function(){
		if(curNum > 0){
		curNum--
		n = curNum;
		num = '<span class="spNum">' + n + '- </span>';
			$('#tit').html(num + tit[n]);
		$('#bigIMG').attr('src', pid[n]);
		}else{
		alert('Tap >');
		}
	});

function outputCopy(place){
	str = $('#' + place).val();
	str1 = '<html>\n<ol>\n' + str + '</ol>\n</html>';
	$('#' + place).val(str1);
	copy(place);
}

function loadCheck(){
$('#start').prop("disabled", false);
var imagesLoaded = 0
var totallImages = pid.length;
$("#div1 img").on("load", function (event) {
imagesLoaded++
percent = Math.round((imagesLoaded*100) / totallImages);
$('#check').html('<span id="cent">' + percent + '%</span> ' +
imagesLoaded + ' loaded');
if (imagesLoaded == totallImages){
allImagesLoaded() }
});
}

function allImagesLoaded() { 
     $('#wait').html('Now you can MANUALLY tap thumbnail or tap the buttons next/back (>/&lt;) to see each photo<br>' +
'Or tap any photo then tap AUTO button to view slideshow');
} 

playing = true;

  $('#slide').on("click", function(){
    duration = $('#comboDur  :selected').attr('value');
    if(playing){
    $(this).html('MANU');
    playing = false;
    setInt = setInterval(function(){
    		nextIMG();
	}, 
      duration)
  }else{
     $(this).html('AUTO');
	playing = true;
	clearInterval(setInt);
	}
});
</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

DOWNLOAD pixab-15.html

Image
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 ... (2) Tap this button (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  Select All B. All no - yes yes  Deselect All (5) Tap this button Load photos 1 Copy the below code Wa
Read more