-
Notifications
You must be signed in to change notification settings - Fork 0
/
ImageGrabber.js
85 lines (75 loc) · 2.32 KB
/
ImageGrabber.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
function makeRequest(searchedTerm,resultIndex){
this.APIKey = "AIzaSyC7bgXQ4XRndkzKXSQXwdQwiOIHmZvgfiQ";
this.searchEngineID = "011766833210041731964:07xp0hl30ly";
this.searchedTerm = searchedTerm;
this.resultIndex = resultIndex;
this.full = "https://www.googleapis.com/customsearch/v1?key="+this.APIKey+"&cx="+this.searchEngineID+"&q="+this.searchedTerm+"&filter=1&searchType=image&imgSize=xlarge&safe=medium&fields=items&start=";
}
var getJSON = function(url, successHandler, errorHandler) {
var xhr = typeof XMLHttpRequest != 'undefined'
? new XMLHttpRequest()
: new ActiveXObject('Microsoft.XMLHTTP');
xhr.open('get', url, true);
xhr.responseType = 'json';
xhr.onreadystatechange = function() {
var status;
var data;
if (xhr.readyState == 4) {
status = xhr.status;
if (status == 200) {
successHandler && successHandler(xhr.response);
} else {
errorHandler && errorHandler(status);
}
}
};
xhr.send();
};
window.onload = function(){ // STARTS HERE
var searchBar = document.querySelector("#searchBar");
var searchButton = document.querySelector("#searchButton");
var carousel = document.querySelector("#carousel");
var totalResults;
var newImages = [];
searchBar.onclick = function(){
if(searchBar.value === "Search for..."){
searchBar.value = "";
}
};
searchButton.onclick = function(){
var request = new makeRequest(searchBar.value,"1");
getJSON((request.full+request.resultIndex), function(data) {
totalResults = data.items;
request.resultIndex = "11";
getJSON((request.full+request.resultIndex), function(data) {
totalResults = totalResults.concat(data.items);
doneRetreiving();
}, function(status) {
console.log("Something went wrong");
});
}, function(status) {
console.log("Something went wrong");
});
};
doneRetreiving = function(){
for(var i = 0; i < 20; i++){ // create images
newImages.push(document.createElement('img'));
newImages[i].src = totalResults[i].link;
}
// add images to page
for(var k = 0; k < 20; k++){
carousel.appendChild(newImages[k]);
newImages[k].className = "imageResult";
}
$('#carousel').slick({ // initialize slick
accessibility: false,
autoplay: true,
autoplaySpeed: 2500,
arrows: false,
centerPadding: "0px",
draggable: false,
pauseOnHover: false,
touchMove: false
});
};
};