Cacher is the code snippet organizer for pro developers

//------- SOUNDCLOUD CUSTOM WIDGET ---//
SC.initialize({  client_id: '[YOUR_CLIENT_ID]' }); 

// Get the SoundCloud UserId from the username 
var userName="[SOUNDCLOUD_USERNAME]";
var userTracks = [];
var soundcloudId = [SOUNDCLOUD_USER_ID]; // found using the .resolve() method of the Soundcloud API
getTracks(soundcloudId);

function getTracks(myId) {
  var totalPlays=0;
    SC.get("/users/"+myId+"/tracks", function(getTracks) {
      for (var track in getTracks) { //add track data to js obj
        var title = getTracks[track].title,
            playback_count = getTracks[track].playback_count,
            created_at = getTracks[track].created_at,
            permalink_url = getTracks[track].permalink_url,
            description = getTracks[track].description,
            uri = getTracks[track].uri;

        userTracks.push({
          track: track,
          trackTitle: title,
          playbackCount: playback_count,
          createdAt: moment(created_at, 'YYYY-MM-DD HH:mm:ss Z').format("YYYYMMDD-HHmmss"),
          createdFormat: moment(created_at, 'YYYY-MM-DD HH:mm:ss Z').format("MMM DD YYYY"),
          permalinkUrl: permalink_url,
          description: description,
          uri: uri
        });

        makeMusicSquare(track);
        makeMusicModal(track);
      }

  //-------- SOUNDCLOUD GRID ----------//
    var $showMore = $('#showMore');
    $container = $('#worksGrid');

    // Instantiate MixItup with a limit of 6 items
    $container.mixItUp({
      load: {
        sort: "created-at:desc"
      },
      pagination: {
        limit: 6
      },
      callbacks: {
        onMixLoad: function(state) {
          // On load, check if there are at least 6 targets
          var total = state.$targets.length;
          if (total > 5) {
            // If so, show the button (button is 
            // hidden by default in CSS):
            $showMore.addClass('visible');
          }
        }
      }
    });
    // Bind a click handler to the show more button
    $showMore.on('click', function() {
      if (!$showMore.hasClass('show-more')) {
        // If the button does not have the class 'show-more', 
        // add it, remove pagination limit, and set button text
        $showMore.addClass('show-more').text('Show Less');
        $container.mixItUp('paginate', {
          limit: 0
        });
      } else {
        // Else, remove show-more class, reset pagination 
        // limit, and set button text
        $showMore.removeClass('show-more').text('Show More');
        $container.mixItUp('paginate', {
          limit: 6
        });
      }
    });

  //------- MAGNIFIC POPUP ---//
    $('.music-modal').magnificPopup({
      type:'inline',
      fixedContentPos: false,
      removalDelay: 100,
      closeBtnInside: true,
      preloader: false,
      mainClass: 'mfp-fade'
    });

    $(document).on('click', '.popup-modal-dismiss', function (e) {
      e.preventDefault();
      $.magnificPopup.close();
    });

    $('.image-popup-no-margins').magnificPopup({
      type: 'image',
      closeOnContentClick: true,
      closeBtnInside: false,
      fixedContentPos: true,
      mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
      image: {
        verticalFit: true
      },
      zoom: {
        enabled: true,
        duration: 300 // don't foget to change the duration also in CSS
      }
    });

    $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
      disableOn: 700,
      type: 'iframe',
      mainClass: 'mfp-fade',
      removalDelay: 160,
      preloader: false,
      fixedContentPos: false
    });
  });

};  

var makeMusicSquare = function(track) {
  // create the worksItem element
  var worksItem = $('<div>', {
    'class': 'col-md-4 col-sm-4 col-xs-12 worksItem',
    attr: {
      'data-playback-count': userTracks[track].playbackCount,
      'data-created-at': userTracks[track].createdAt,
      'data-title': userTracks[track].trackTitle,
      'data-trackID': track,
      'style': 'display: inline-block;'
    }
  });

  var itemTitleWrapper = $('<div>')
    .addClass('itemTitleWrapper')
    .append('<img src="assets/images/works/p0.png" alt=""><p class="itemTitle">'+userTracks[track].trackTitle+'</p>')
    .appendTo(worksItem);
  var capContent = $('<div>')
    .addClass('capContent')
    .append('<h3>'+userTracks[track].trackTitle+'</h3><p>'+userTracks[track].createdFormat+'</p><a class="capPreview music-modal" href="#music-modal'+track+'">Listen</a>');
  var itemCaption = $('<div>')
    .addClass('itemCaption')
    .append(capContent)
    .appendTo(worksItem);

  // if even, then bg is white; if odd, then bg is #151515
  if (track % 2 == 0) {
    $(worksItem)
      .attr('style', 'display: inline-block; background: #fff; color: #000;')
      .addClass('blackText');
  } else {
    $(worksItem)
      .attr('style', 'display: inline-block; background: #151515; color: #fff;')
      .addClass('whiteText');
  }

  // append element to .worksGrid with playback-count, created-at
  $('#worksGrid').append(worksItem);
};

var makeMusicModal = function(track) {
  var musicModal = $('<div>')
    .addClass('mfp-hide modal-box')
    .attr('id', 'music-modal'+track)
    .data('widgetLoaded', false);
  var modalContent = '<div class="modal-box-content"><h2>'+userTracks[track].trackTitle+'</h2><p>'+userTracks[track].description+'<br>'+userTracks[track].createdFormat+'</p></div>';
  $(musicModal).append(modalContent);
  $('#sectionMusic').append(musicModal);
};

//------- SOUNDCLOUD WIDGET LOADER ---//
$('#sectionMusic').on('click', '.music-modal', function(){
  var track = $(this).closest('.worksItem').data().trackid;
  if ($('#music-modal'+track).data().widgetLoaded === false) {
    var widget = '<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url='+encodeURI(userTracks[track].uri)+'&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>';
    $('#music-modal'+track).data('widgetLoaded', true).prepend(widget);
  }
});