patch to download

Openclipart API

The API has been made by the openclipart.org. Website gives access to the clipart library with unlimited commercial use of the content.

The solution has been prepared especially for developers who want to give their users access to an unlimited resource of clipart with the possibility of applying them in any way.

Functionalities :

  • looking for pictures from the openclipa.org library
  • looking for pictures by category
  • sorting results
  • change the number of images displayed on the page


Attachment contains an example of use and a library.

A trivial example of using the prepared library for the Openclipart API.

 

JavaScript



    var openclipartLibraryAPI = new OpenclipartLibraryAPI(),
            jq = jQuery.noConflict();

    $/*
        funkcja listuje odpowiedz
    $*/
    function listResponse(resp){
        jq('#searchResults').html("Wyniki : "+resp.info.results);
        jq("#currentPage").val(resp.info.current_page);
      jq('#maxPage').val(resp.info.pages);
      jq('#statusPages').html("Strona : "+resp.info.current_page+"/"+resp.info.pages);
        jq.each( resp.payload, function( i, item ) {
      var img = document.createElement('img');
      img.height = 250;
      img.style = "padding:10px";
      img.title = item.title;
            img.src = item.svg.png_thumb;
            document.getElementById('imagediv').appendChild(img);
    });
      if( resp.info.current_page < resp.info.pages ){
          jq('#nextPageOpenclipart').show();
      }else{
          jq('#nextPageOpenclipart').hide();
      }
    }
            
    $/*
        funkcja pobiera i przekazuje parametry do sendRequest
    $*/
    function searchTerm() {
        var query = jq("#searchterm").val()+jq("#categoryValue").val(),
                pageNumber = 1,
                amountPerPage = jq('#displayValue').val(),
                sort = jq('#sortValue').val(),
                callbackFunction = listResponse;
                
        jq("#imagediv").empty();
        openclipartLibraryAPI.sendRequest(callbackFunction, query, pageNumber, amountPerPage, sort)
    }

    function displayValue(){
        if( jq("#imagediv > img").length != 0 ){
            var query = jq("#searchterm").val()+jq("#categoryValue").val(),
                    pageNumber = jq('#currentPage').val(),
                    amountPerPage = jq('#displayValue').val(),
                    sort = jq('#sortValue').val(),
                    callbackFunction = listResponse;
                
            jq("#imagediv").empty();
            openclipartLibraryAPI.sendRequest(callbackFunction, query, pageNumber, amountPerPage, sort)            
        }
    }
    
    function sortValue(){
        if( jq("#imagediv > img").length != 0 ){
            var query = jq("#searchterm").val()+jq("#categoryValue").val(),
                    pageNumber = jq('#currentPage').val(),
                    amountPerPage = jq('#displayValue').val(),
                    sort = jq('#sortValue').val(),
                    callbackFunction = listResponse;
                
            jq("#imagediv").empty();
            openclipartLibraryAPI.sendRequest(callbackFunction, query, pageNumber, amountPerPage, sort)            
        }
    }
    
    function nextPage(){
        if(parseInt(jq('#currentPage').val()) < parseInt(jq('#maxPage').val())){
            var query = jq("#searchterm").val()+jq("#categoryValue").val(),
                    pageNumber = parseInt(jq('#currentPage').val())+1,
                    amountPerPage = jq('#displayValue').val(),
                    sort = jq('#sortValue').val(),
                    callbackFunction = listResponse;
                
            openclipartLibraryAPI.sendRequest(callbackFunction, query, pageNumber, amountPerPage, sort)                        
        }
    }
    
    function categoryValue(){
        if( jq("#currentPage").val() == 1 ){
            var query = jq("#searchterm").val()+jq("#categoryValue").val(),
                    pageNumber = jq('#currentPage').val(),
                    amountPerPage = jq('#displayValue').val(),
                    sort = jq('#sortValue').val(),
                    callbackFunction = listResponse;
            
            jq("#imagediv").empty();
            openclipartLibraryAPI.sendRequest(callbackFunction, query, pageNumber, amountPerPage, sort)                        
        }
    }
    
    function clearPage(){
        jq('#imagediv').empty();
        jq('#searchterm').val("");
      jq('#searchResults').html("");
      jq('#statusPages').html("")
      jq('#categoryValue').val("")
      jq("#currentPage").val(-1)
      jq("#maxPage").val(-1)
    }

HTML


<input type="hidden" id="currentPage" value="-1" />
<input type="hidden" id="maxPage" value="-1" />
<input type="text" id="searchterm" style="inline-block" />
<input type="button" id="submitSearchterm" value="Szukaj" style="inline-block" onclick="searchTerm()" />
$//container na droplista z liczbą wyświetleń
Wyświetlaj
<select id="displayValue" onchange="displayValue();">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
$//container na droplista z sortowaniem
Sortuj
<select id="sortValue" onchange="sortValue();">
<option value="downloads">Pobrania</option>
<option value="date">Data</option>
<option value="favorites">Polubienia</option>
</select>
$//container na droplista z kategorie
Kategorie
<select id="categoryValue" onchange="categoryValue();">
<option value="">Wybierz</option>
<option value="+border">Ramki</option>
<option value="+kids">Dziecięce</option>
<option value="+emoticon">Emotki</option>
<option value="+travel">Podróżnicze</option>
<option value="+school">Szkolne</option>
<option value="+decoration">Dekoracje</option>
<option value="+occasion">Na specjalne okazje</option>
<option value="+party">Imprezowe</option>
<option value="+love">Miłosne</option>
<option value="+holidays">Świąteczne</option>
<option value="+flowers">Kwiaty</option>
<option value="+animals">Zwierzęta</option>
<option value="+sketch">Szkice</option>
<option value="+ribbons">Wstążki</option>
<option value="+shapes">Kształty</option>
<option value="+icon">Ikony</option>
</select>
$//status pages
<a id="statusPages"></a>
$//wyniki
<a id="searchResults"></a>
<input type="button" id="clearButton" value="Wyczyść" style="inline-block" onclick="clearPage()" />
$//container na zdjeca
<div id="imagediv"></div>
<input type="button" style="display:none" id="nextPageOpenclipart" value="Więcej" onclick="nextPage()">

 




Return