CODEWITHSUNDEEP
javascriptapiphoto
Vetal
Vetal

Reputation: 11

How to make more photos in Unsplash API?

Can you help me with Unsplash API because i can't make more than 10 photos in page? Help me please. Also if you have some more easy code can you show me please?

Tried:

function SearchPhotos() {
                let clientId = "###";
                let query = document.getElementById("search").value;
                let url = "https://api.unsplash.com/search/photos/?client_id="+clientId+"&query="+query;

                fetch(url)
                .then(function (data) {
                    return data.json();
                })
                .then(function(data){
                    console.log(data);

                    data.results.forEach(photo => {

                        let result = `
                        <a href="#" class="album-item" id="unsplash-img"><div style="background-image: url(${photo.urls.regular}); background-size: cover; height: 100%" onclick="document.getElementById('albumModal1').style.display='none',document.getElementById('backclose').style.display='none'"><img bgsrc="${photo.urls.regular}" src="images/images-blank.png"></div></a>
                        `;

                        $("#result").append(result);


                    });
                });
            }
            var input = document.getElementById("search");

            input.addEventListener("keyup", function(event) {
            if (event.keyCode === 13) {
            event.preventDefault();
            document.getElementById("searchBtn").click();
            }
            });
            $( "#searchBtn" ).click(function() {
                $( "#result" ).empty();
            });

Upvotes: 0

Views: 1845

Answers (1)

hung phan
hung phan

Reputation: 119

You should use

interval = setInterval(searchPhotos, 3000)

to request many times. Each time increasing the page parameter by 1.

clearInterval(interval) when currPage > pageMax.

You can see my similar example of finding hundreds of photos from flickr.com at the following address:

http://phanhung20.blogspot.com/2021/

Title: Search for flickr photos on ipad

IDEA:

currPage ++

"&per_page=30&page=" + currPage

MY CODING

/* Let the user to choose quatity of pages (pageMax) by using select-options tag.

After that he clicks the button SEARCH to call allPage(this) */

clientId = “PASTE YOUR ID HERE”;
currPage = 1;
totalPages = 1;
count = 1;
var pageMax = 5 // 5*30 = 150 photos

function allPage(thi){
thi.setAttribute("disabled", true);
pageMax = $('#combo :selected').attr('value');
interval = setInterval(SearchPhotos, 3000);
}
function SearchPhotos(){
if((currPage <= pageMax) && ( currPage <= totalPages)){
let query =    document.getElementById("search").value;
let url = "https://api.unsplash.com/search/photos/?client_id="+clientId+"&query="+query + "&per_page=30&page=" + currPage;
fetch(url)
       .then(response => {
           return response.json();
       })
       .then(data => {
           totalPages = data.total_pages;
           if(totalPages < pageMax){
               pageMax = totalPages 
           // Reduce waiting time to see 100%
           }
           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); 
// When pageMax = 5, each 3 seconds show 20% (40, 60, 80, 100%)
currPage++
});
}else{
      clearInterval(interval);
}
}

Upvotes: 1

Related Questions