JSONP - SOCIAL iteration

JSONP - SOCIAL iteration Andrew Pougher

by Andrew Pougher

HTML

<div class="container">
    <div class="row">
        
<h1>Prophy Pins</h1>

        <div id="pins"></div>
    </div>
</div>

CSS

body {
    background:#f8f8f2
}
.thumbnail {
    max-width:237px
}
.product {
    box-shadow:1px 4px 4px #eee
}

JavaScript

/*
This is development by Andrew Pougher and demonstrates JSONP. 
For information about this work please email me.
(c) 2015
*/

var pint = "https://api.pinterest.com/v3/pidgets/users/prophyperfect/pins/";
$.ajax({
    type: "GET",
    url: pint,
    dataType: 'jsonp',
    async: true,
    //data: {"u": userid, "p": pass}, // not required right now AP
    success: function (json) {
        var pins = json.data.pins;
        $.each(pins, function () {
            var pic = this.images["237x"].url;

            var html = '<div class="col-sm-6 col-md-4"><div class="thumbnail product"><img src="' + pic + '" alt="..."><div class="caption"><h3>Thumbnail label</h3><p>' + this.description + '</p><p><a href="#" class="btn btn-primary" role="button">Customize</a> <a href="http://www.andrewpougher.co.uk" class="btn btn-default buyit" role="button">Buy</a></p></div></div></div>'


            $(html).appendTo("#pins");
        });


        // $('#pins').append(pins); // pins[0].description
    },
    error: function (XHR, textStatus, errorThrown) {
        alert("error: " + textStatus);
        alert("error: " + errorThrown);
    }
})



// Caching the link jquery object
var $myLink = $('a.buyit');

// Set the links properties
$myLink.prop({
    href: pint,
    title: pint
}).click(function (e) {
    e.preventDefault();
    window.open(this.href, '_blank');
});