TEST SLIDESHOW AND COPY CODE (flickr-search-build.html)

1 / 6
2 / 6
3 / 6
4 / 6
Hangzhou's West Lake (西湖)
5 / 6
6 / 6
Suzhou
The “Lingering Garden” (留园 Liú Yuán)
DSC_7046
IMGP4976
62969-Hangzhou
63106-Hangzhou
63103-Hangzhou
63097-Hangzhou
62927-Hangzhou
Hangzhou Xihu
🇨🇳 西湖 / West Lake / Западното езеро
62963-Hangzhou
Summer Palace on a sunny day
Liechtenstein Summer Palace, Alserbachstraße, Josefstadt, Vienna, Austria
Summer Palace Boat
Kūnmíng Shore
Summer Palace
Photo 206
Cixi's Boat
COPY SOURCE CODE of flick-search-build.html


<!DOCTYPE html>
<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>

<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{
font-family:Arial;
font-size:14pt;
}

input[type="button"], button{font-size:16pt}
input[type="text"]{font-size:14pt}

#headSt, #tailSt{
width:75%;
height:200px;
font-size:14pt;
display:none;
}

#searchterm{
font-size:14pt;
}

#status{
border:1px solid gray;
font-size:14pt;
 display: inline-block;
  width: 680px;
  height: 83px;
  padding-top:8px;
  color:green;
  font-weight:bold;
  text-align:left;
  padding-left:10px;
  margin-bottom:6px;
}

#wait{
color:brown;
}

select{
font-size:16pt;
}

.indicator{
  position:absolute;
  z-index: 4;
  top:5px;
  right:11px;
  font-size: 25pt;
  color: magenta; /* aqua; */
}

.cell, .cell1 {
 padding: 5px;
margin:6px;
 position:relative; 
border:1px solid #ccc;
/* display: block;
overflow: auto; */
  height: fit-content;
  width:fit-content;
}

#imgDiv img{
max-width: 100%; /* 1013px; */
max-height:240px;
}

.mode{
color:blue;
font-weight:normal;
}
</style>
</head>

<body>
<div align="center">
<h1 style="margin:8px; color:green;font-family:Time;">Search for tags of Flickr photos</h1>
<div style="width:98%">
  Examples for tag: china, jiangsu, hangzhou, kyoto, france, paris, germany, italy, brazil, <br>
india, indian temples, thailand, indonesia, europe, asia, australia, flowers, dogs, cats...
</div>
(1)<b>Type tag:</b>
 <input id="searchterm" value='Kyoto' size="50">
<br>
(2)<b>From the page:</b>
<select id="comboFrom">
  <option value="1" selected>1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
</select>
  
(3)<b>How many photos in a page:
<select id="combo">
  <option value="30" selected>30</option>
  <option value="50" >50</option>
  <option value="100" >100</option>
</select>
<br>
<b id="wait" style="font-size:14pt">When you are new to this webpage, just leave<br> “From the page” as 1 and “How many photos” as 30</b>
<br>
<label for="mode">Select mode: </label>
<input type="radio" name="modeS" value="more" checked="checked">
<span class="mode">More code</span></input>
<input type="radio" name="modeS" value="full" >
<span class="mode">Full code</span></input>
<br><br>
(6)<button onclick = "makeDiv()">Make code</button>
(7)<button onclick= "copy('seleArea')">Copy the below code</button>
<br><br>
<textarea id="seleArea" style="width:80%; height:150px; font-size:14pt" readonly>
 </textarea>
<br>
<div id="status"></div>
<br>
(4)<button style="margin-top:8px;" id="start">Search</button>
<br>
<div id="imgDiv" style="overflow:auto;width:95%;height:640px; border:1px solid red; text-align:center; background-color:#003333; color:white">
</div>
<br>

<textarea id="headSt" readonly>

<!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: 18pt; /* 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{
	height:600px;
}

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


</textarea>

<br>

<textarea id="tailSt" readonly>

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

</div>
<br>
<audio id="audio" preload="auto" tabindex="0" controls loop>
  <source src="thousands-of-words.mp3">
</audio>
<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); 
}
</script>
</body>
</html> 
</textarea>
<br>
<script>
$(document).ready(function(){
//
});

var url = "https://api.flickr.com/services/rest/";

// PLEASE USE THIS KEY to test for a while
// YOU SHOULD GET AND USE YOUR OWN KEY

var key = "6eb6ad8de50d27e9496ea05fb9e73413";
var perPage = 50;
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;

num = 10000;

$("#start").click(function () {
     // $(this).prop('disabled', true);
	if(num == 10000){
     		currentPage = Number($('#comboFrom :selected').attr('value'));
	}else{
    		currentPage = num;
	}
    //alert('Page ' + currentPage);
    perPage = Number($('#combo :selected').attr('value'));
    
    $('#status').html('Page: ' + currentPage + '; ' +
						 'Photos per page: ' + perPage + '. ' +
						'<span style="color:red">' +
						'Please wait until the photos are loaded</span>'+
		'<br>(5) After that, tap on image to select it (magenta check mark is seen). <br>Tap it again if you want to deselect it');
/*
    $("#result").html(""); */
    
    // interval = setInterval(startSearch, 3000);
    startSearch()
});

 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) {
    var photoObj = data.photos;
    /* totalPhotos = photoObj.total;
    totalPages = photoObj.pages; */
    listPhotos(photoObj.photo);
}

count = 1;

function listPhotos(photoArray) {
	   ss1 = '';
	   len =photoArray.length 
        for (let i = 0; i < len; i++) {
               src = getLargestSize(photoArray[i]);
			ss1 +=  '<div class="cell1" id="pt' + count + '" onclick = \'' +
			'toggleChoice(this)\'>' +
'<div class="indicator"></div>' +
               '<img src="' + 
			src + '">' +
               '<div class="desc">' + count + '- ' + photoArray[i].title +
               '</div></div>'
			count++;
         } 
			$('#imgDiv').append(ss1);
	    num = currentPage + 1;
}

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

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(){
     var radios = document.getElementsByName('modeS');
     length = radios.length;
	for (var i = 0; i < length; i++) {
    		if (radios[i].checked) {
        		// do whatever you want with the checked radio
        		modeV = radios[i].value;
        // only one radio can be logically checked, don't check the rest
        		break;
    		}
  	}

	len = yes.length;
	st = '';
	for(i=0; i<len; i++){
		sour = $('#' + yes[i]).find('img').attr('src');
		des =  $('#' + yes[i]).find('.desc').html();
		xx = des.indexOf('-') + 1;
		des1 = des.substring(xx);
		st += '<div class="mySlides fade">\n' +
  '<div class="numbertext"></div>\n' +
  '<img src="' + sour + '">\n' +
  '<div class="text">' + des1 + '</div>\n' +
  '</div>\n\n';
	}
	if(modeV == "more"){
		res = st
	}else{
		hSt = $('#headSt').val();
		tSt  = $('#tailSt').val();
		res = hSt + st + tSt;
	}
	$('#seleArea').val(res);
}

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();
}
</script>
</body>
</html>
Open the below page, where you can search for photos and make a slideshow
https://phanhung20.blogspot.com/2023/02/build-slideshow-with-search-for-flickr.html
JAVASSCRIPT ON IPAD (to see the list click ← then click ≡ and ⌄)

TEST SLIDESHOW AND COPY CODE (flickr-search-build.html)

COPY SOURCE CODE of flick-search-build.html

Popular posts from this blog

PHP JQUERY PROXY DEMO

SEARCH FOR PIXABAY PHOTOS

DOWNLOAD pixab-15.html
