iTunesApp Demo

https://github.com/sinky/iTunesApp.js

HTML

<h1>iTunesApp</h1>

<div data-itunesid="571240327">An App</div>
<div data-itunesid="723142770">A Description</div>
<div data-itunesid="721606556">...</div>
<div data-itunesid="945320815"></div>
<div data-itunesid="846177978"></div>

CSS

.iTunesApp {
  overflow: auto;
  margin-bottom: 1em;
}

.iTunesApp .iTunesApp-head {
  overflow: auto;
  margin-bottom: 5px;
}

.iTunesApp .iTunesApp-name {
  display: block;
}

.iTunesApp .iTunesApp-icon {
  float:left;
  margin-right: 5px;
}

.iTunesApp .iTunesApp-icon img {
  max-width: 50px;
  height: auto;
}

.iTunesApp .iTunesApp-price:before {
  content: " - ";
}

.iTunesApp .iTunesApp-preview {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.iTunesApp .iTunesApp-preview img {
  max-width: 150px;
  vertical-align: middle;
}

.iTunesApp .iTunesApp-preview a + a,
.iTunesApp .iTunesApp-preview img + img {
  margin-left: 5px;
}

JavaScript

(function($) {
  
  var iTunesApp_tpl = '' +
  '<div>' +
  '  <div class="iTunesApp-head">' +
  '    <span class="iTunesApp-icon"></span>' +
  '    <span class="iTunesApp-name"></span>' +
  '    von <span class="iTunesApp-artist"></span>' +
  '    <span class="iTunesApp-price"></span>' +
  '  </div>' +
  '  <div class="iTunesApp-preview"></div>' +
  '</div>';

  $('[data-itunesid]').each(function(i, elm) {
    var $this = $(this);
    var id = $this.attr('data-itunesid');
    iTunesApp_getItunesData(id, function(data) {
      var $that = $this;
      iTunesApp_UpdateLayout($that, data);
    });
  });

  function iTunesApp_getItunesData(appID, callback) {
    console.log('iTunesApp_getItunesData', appID);
    $.getJSON('https://itunes.apple.com/de/lookup?callback=?&id='+appID, function( data ) {
      if(data.resultCount == 0) { return false; }
      console.log('iTunesApp_getItunesDataResult', data.results[0]);
      callback(data.results[0]);
    });
  }

  function iTunesApp_UpdateLayout($that, app){
    if(!app) { return false; }
   
    $that.empty().addClass('iTunesApp');
    
    var $entry = $(iTunesApp_tpl).appendTo($that);
    
    $entry.find('.iTunesApp-name').text(app.trackName);

    var $itunesLink = $('<a class="link itunes"/>').attr('href', app.trackViewUrl).attr('target', '_blank');
    $entry.find('.iTunesApp-name').wrapInner($itunesLink);
    $entry.find('.iTunesApp-icon').wrap($itunesLink);
    
    $entry.find('.iTunesApp-artist').text(app.artistName);
    
    if(app.sellerUrl) {
      var $webLink = $('<a class="link web"/>').attr('href', app.sellerUrl).attr('target', '_blank');
      $entry.find('.iTunesApp-artist').wrapInner($webLink);
    }
    
    var $icon = $('<img />').attr('src', app.artworkUrl100);
    $entry.find('.iTunesApp-icon').append($icon);

    $entry.find('.iTunesApp-price').text(app.formattedPrice);
    
    $.each(app.screenshotUrls, function(i, screenshotUrl){
      var $previewImage = $('<img/>').attr('src',...