API udostępnione zostało przez domenę openclipart.org.

Jest to serwis dający dostęp do biblioteki clipart z możliwością nielimitowanego komercyjnego zastosowania zawartości. Rozwiązanie zostało przygotowane specjalnie dla osób chcących dać możliwość swoim użytkownikom dostępu do nieograniczonego zasobu clipart'ów z możliwością zastosowania ich w dowolny sposób.

Funkcjonalności :

• szukanie obrazków z biblioteki serwisu openclipa.org
• szukanie obrazków po kategorii
• sortowanie wyników
• zmiana ilości wyświetlanych obrazów na stronie

Załącznik z łatka zawiera przykład wykorzystania oraz bibliotekę. Trywialny przykład wykorzystania przygotowanej biblioteki dla 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()">