SEARCH FOR UNSPLASH PHOTOS ON IPAD
Javascript is used
How many photos:
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> <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: <span style="color:red"><span id="progress">0</span> %</span> <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>
