Make your Own Image Search Engine Using Json And Jquery

Image Search Engine Using Json And Jquery

If you are a jquery lover then this image search engine might me a useful gift for you. In this post I have told that, How can you make your own image search engine using jquery and a single HTML page. The project doesn’t have much more stuff. There are hardly two files in this project. One jquery file, one HTML page and some image files to give an attractive look to your image search engine . Basically The image search engine is based on google search ajax api which gives the data in JSON format. Just have a look at the files that I have given below and start making your own Image Search Engine.

Your Image Search Engine Will Look Like Below

Make your Own Image Search Engine Using Json And Jquery

Make the basic mark up style sheet for the Image Search Engine

body{
font-family:arial;
font-size:12px;
}
#container{
width:720px;
height:auto;
margin:auto;
padding:5px;
}
#ad_720x90{
width:720px;
height:90px;
border:1px solid #ff0000;
}
#logo_div{
text-align:center;
width:600px;
padding-bottom:20px;
height:45px;
margin:auto;
}
#search_div{
padding:10px;
margin:auto;
width:350px;
height:40px;
background:url(images/search.png) no-repeat;
}
#query{
width:275px;
height:28px;
margin-left:10px;
border:none;
background:none;
}
#submit_btn{
background:url(images/search_btn.png) no-repeat;
width:27px;
height:25px;
border:none;
margin-left:10px;
cursor:pointer;
}
#resultsDiv{
width:552px;
margin:auto;
height:auto;
border:1px dashed #8F8F8D;
border-radius:5px;
padding:10px;
text-align:center;
}

.imageResult{
float:left;
margin:5px;
width:120px;
height:120px;
border:4px solid #DEDEDE;
}
.imageResult:hover{
border:4px solid #CFDF79;
cursor:pointer;
}
#more_results{
width:120px;
height:32px;
background:url('images/more.png') no-repeat;
cursor:pointer;
margin:15px auto;
}

.result_container{
margin-bottom:5px;
-moz-box-shadow:0 1px 0 #798e9c;
-webkit-box-shadow:0 1px 0 #798e9c;5
}
.clear{
clear:both;
}
span.notFound{
color:#BE330E;
text-align:center;
}

Now Make The Javascript File

$(document).ready(function(){
//define by default paramteres for google image search api
var config = {
type        : 'images',
append        : false,
perPage        : 8,            // A maximum of 8 is allowed by Google
page        : 0                // The start page
}

//focus the cursor in search text box on page ready
$('#query').focus();

//this function will be called when the form will be submitted
$('#searchImages').submit(function(){
googleImageSearch();
return false;
});

//main function to search the images through google api
function googleImageSearch(parameters){
//extend function to use the above config parameters with some other params
parameters = $.extend({},config,parameters);
parameters.term = parameters.term || $('#query').val();

// URL of Google's AJAX search API
var apiURL = 'http://ajax.googleapis.com/ajax/services/search/'+parameters.type+'?v=1.0&callback=?';
var resultsDiv = $('#resultsDiv');

// call a request to api to get the json data
$.getJSON(apiURL,{q:parameters.term,rsz:parameters.perPage,start:parameters.page*parameters.perPage},function(r){

var results = r.responseData.results;
$('#more_results').remove();

//if any number of results were returned
if(results.length){

// If results were returned, add them to a result_container div,
// after which append them to the #resultsDiv:

var result_container = $('<div>',{className:'result_container'});
for(var i=0;i<results.length;i++){
// Creating a new result object and firing its toString method:
result_container.append(new result(results[i]) + '');
}

if(!parameters.append){
//make empty the resultsDiv div if new search query is executed
resultsDiv.html('');
}

result_container.append('<div></div>').hide().appendTo(resultsDiv)
.fadeIn('slow');

//cursor is returned by google ajax search api
var cursor = r.responseData.cursor;

//if api returns more results then show the more result button else no
if( +cursor.estimatedResultCount > (parameters.page+1)*parameters.perPage){
$('<div>',{id:'more_results'}).appendTo(resultsDiv).click(function(){
googleImageSearch({append:true,page:parameters.page+1});
$(this).fadeOut();
});
}
}
else {

// No results were found for this search.

resultsDiv.empty();
$('<span>',{className:'notFound',html:'<strong>Zero results were found for your query</strong>'}).hide().appendTo(resultsDiv).fadeIn();
}
});
}

function result(r){

//the ajax search api returns imageResult class and generating markup by .toString() method.
//reformat the results
var array = new Array;

array = [
'<div>',
'<a target="_blank" href="',r.unescapedUrl,'" title="',r.titleNoFormatting,'" style="width:120px;height:120px;">',
'<img src="',r.tbUrl,'" width="120" height="120" /></a>',
'<div></div>',
'</div>'
];

// The toString method.
this.toString = function(){
return array.join('');
}
}

});

And Then Make The Final HTML Page

<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>Google Custom Image Search Engine Using Jquery And PHP</title>
<!-- Javascripts -->

<script src="jquery-1.8.1.min.js" type="text/javascript" language="javascript"></script>
<script src="scripts.js" type="text/javascript" language="javascript"></script>
<!-- css files -->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body style="font-family:arial;">

<div id="container">
<div style="clear:both;"></div>
<br>

<div id="logo_div">
<img src="images/logo.jpg"/>
</div>
<br/>
<div id="search_div">
<form method="post" name=""searchImages"" id="searchImages">
<input type="text" name="query" id="query">
<input type="submit" value="" id="submit_btn">
</form>
</div>

<br/>
<div id="resultsDiv">
<strong>Enter a search query and then hit Enter button</strong>
</div>
</div>
</body>
</html>

Any suggestion will be appreciated.

Make your Own Image Search Engine Using Json And Jquery

One Response to “Make your Own Image Search Engine Using Json And Jquery”
  1. Alex says:

    Hi , well done , and how do i tweak it … to make image appear with no searchbox