AJAX

Uses Album API

by rlinares

HTML

<span class="button">Find</span>
<img id ="loading" src="http://www.milibrodecocina.es/img/loading.gif" style="display:none; width:30px;height:30px" />
<ul id="albums">
</ul>

CSS

.button
{
    background: blue;
    color: white;
    cursor: pointer;
}

JavaScript

$('.button').click(function() {
    $('#loading').show();
    $(this).hide();
    $.ajax({
        url: "http://api-v3.deezer.com/1.0/search/album/?q=folk&index=1&nb_items=10&output=json",
        success: function(json) {
            $('#loading').hide();
            console.log("Results: " + json.search.total_results);
            if (json.search.total_results > 0) {
                $.each(json.search.albums.album, function(index, item) {
                    $('ul').append('<li> <img src="' + item.image + '"/>' + item.name + '</li>');
                });
            }
            else {
                $('ul').append('<li>No results found</li>');
            }
        }
    }).error(function(xhr, ajaxOptions, thrownError) {
        $('#loading').hide();
        $(this).show();
        console.log("error:" + xhr.status);
    });
});

var origpic;
var klik;
var inputval;
var newpic;
var origbnazev;
var cesta = "/ajaxobrazek.php";
$("input[name='barva']").hover(function() { 
    klik = 0;
    inputval = $(this).val();
    origbnazev = $("#bnazev").text();
    origpic = $("#kocarekimg").attr("src");
    $.post(cesta, {dodavatel_id : "<?php echo $row['dodavatel_id']?>", barva_cislo : inputval},     

    function(data){
        $("#kocarekimg").attr("src","/images/maly-"+data+".jpg");
     });
    $.post("/ajaxbarva.php", {barva_cislo : inputval}, function(data){
            $("#bnazev").text(data);
        });

    },function(){ 
    if (klik == 0) {
    $("#bnazev").text(origbnazev);  
    $("#kocarekimg").attr("src",origpic);}  
    });  

    $("input[name='barva']").click(function() { 
    klik = 1;

    $.post(cesta, {dodavatel_id : "<?php echo $row['dodavatel_id']?>", barva_cislo : inputval}, 

    function(data){
     $("#kocarekimg").attr("src","/images/maly-"+data+".jpg");
     origpic = "/images/maly-"+data+".jpg";
     }); 

     });

    //thumbnails
   $(".imgtn").hover(function() { 
    origpic = $("#kocarekimg").attr("src");
    newpic =...