Le bloc de jQuery empêche la page de s'afficher

Question

J'essaie d'afficher une liste de vidéos YouTube d'une playlist sur ma page. Je peux obtenir les vidéos à afficher très bien. J'essaye d'ajouter "trier" par le nom ou la date de la vidéo, mais quand j'ajoute le code, la page ne rend pas les vidéos du tout.

Voici le HTML:

<div class="hg-portfolio-sortable"> 
<div id="sorting" class="fixclear"> <span class="sortTitle">Sort By: </span> 

    <ul id="sortBy" class="option-set " data-option-key="sortBy" data-default=""> 
     <li><a href="#sortBy=name" data-option-value="name">Name</a> 
     </li> 
     <li><a href="#sortBy=date" data-option-value="date">Date</a> 
     </li> 
    </ul> <span class="sortTitle">Direction: </span> 

    <ul id="sort-direction" class="option-set " data-option-key="sortAscending"> 
     <li><a href="#sortAscending=true" data-option-value="true">ASC</a> 
     </li> 
     <li><a href="#sortAscending=false" data-option-value="false">DESC</a> 
     </li> 
    </ul> 
</div> 
<ul id="portfolio-nav" class="fixclear"> 
    <li class="current"><a href="#" data-filter="*">All</a> 
    </li> 
    <li><a href="#" data-filter=".websites">Websites</a> 
    </li> 
    <li><a href="#" data-filter=".print">Print</a> 
    </li> 
    <li><a href="#" data-filter=".logo">Logo</a> 
    </li> 
</ul> 
<div class="clear"></div> 
<ul id="thumbs"></ul> 

et est ici le script dans le $(window).load(function()):

//SORTING CODE 
// settings 
var sortBy = 'date', 
    sortAscending = true, 
    theFilter = ''; // DEFAULT FILTERING CATEGORY 

$('#sortBy li a').each(function (index, element) { 
    var $t = $(this); 
    if ($t.attr('data-option-value') == sortBy) $t.addClass('selected'); 
}); 
$('#sort-direction li a').each(function (index, element) { 
    var $t = $(this); 
    if ($t.attr('data-option-value') == sortAscending.toString()) $t.addClass('selected'); 
}); 
$('#portfolio-nav li a').each(function (index, element) { 
    var $t = $(this), 
     tpar = $t.parent(); 
    if ($t.attr('data-filter') == theFilter) { 
     $('#portfolio-nav li a').parent().removeClass('current'); 
     tpar.addClass('current'); 
    } 
}); 


if ($("ul#thumbs").length > 0) { 
    var $container = $("ul#thumbs"); 
    $container.isotope({ 
     itemSelector: ".item", 
     animationEngine: "jquery", 
     animationOptions: { 
      duration: 250, 
      easing: "easeOutExpo", 
      queue: false 
     }, 
     filter: theFilter, 
     sortAscending: sortAscending, 
     getSortData: { 
      name: function ($elem) { 
       return $elem.find("span.name").text(); 
      }, 
      date: function ($elem) { 
       return $elem.attr("data-date"); 
      } 
     }, 
     sortBy: sortBy 
    }); 
} 
//END SORTING CODE 

//VIDEO CODE 
var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/SP8CE46F72D4FE9E45?v=2&alt=json&max-results=50&callback=?'; 
var videoURL = 'http://www.youtube.com/watch?v='; 
$.getJSON(playListURL, function (data) { 
    var list_data = ""; 
    var column_count = -1; // -1; 
    var end_li = "</li>"; 
    var begin_div = "<div class='inner-item'>"; 
    var end_div = "</div>"; 
    var html_data = ""; 

    $.each(data.feed.entry, function (i, item) { 
     column_count = column_count + 1; 
     var feedTitle = item.title.$t; 
     var feedURL = item.link[1].href; 
     var videoDate = item.published.$t; 
     var fragments = feedURL.split("/"); 
     var videoID = fragments[fragments.length - 2]; 
     var description = ""; item.description; //RETURNS Undefined. 
     var url = videoURL + videoID; 
     var thumb = "http://img.youtube.com/vi/" + videoID + "/default.jpg"; 
     var begin_li = "<li class='item websites ###' data-date='" + videoDate + "'>"; 
     var even_odd = "even"; 
     var begin_h4 = "<h4 class='title'>"; 
     var end_h4 = "</h4>"; 

     if (column_count % 2) even_odd = "odd"; 

     begin_li = begin_li.replace("###", even_odd); 

     html_data += begin_li + begin_div + 
      '<a data-rel="prettyPhoto[iframes]" class="hoverLink" href="' + url + '">' + 
      '<img src="' + thumb + '" alt="' + feedTitle + '" />' + 
      '</a>' + begin_h4 + 
      '<a href="' + url + '" target="_blank"><span class="name">' + feedTitle + '</span></a>' + end_h4 + 
      '<span class="moduleDesc">' + 
      '<p>' + description + '</p>' + 
      '</span>' + 
      '<div class="clear"></div>' + end_div + end_li; 
    }); 
    $(html_data).appendTo("#thumbs"); 

}); 

En bref, le getJSON crée le code html pour chaque vidéo et ajoute à la <ul id="thumbs"> tag. Encore une fois, cela fonctionne mais quand j'ai ajouté mon code "Sorting", la page ne s'affiche pas du tout maintenant. Des idées pourquoi? En outre, j'ai essayé d'obtenir la "description" du flux mais item.description renvoie undefined, pourtant il y a une description pour toutes ces vidéos? Et j'essaie aussi de comprendre pourquoi il les affiche de "Right to Left". Si vous prenez le violon ci-dessous et ajoutez /show à la fin, vous verrez de quoi je parle. Pourquoi cela ne les ajouterait-il pas "de gauche à droite" comme prévu?

Voici un violon pour tout mettre ensemble: UPDATED Fiddle et j'utilise jQuery 1.8.2. (même si le violon dit 1.8.3).

MISE À JOUR

Désolé pour la confusion avec jsFiddle ... Je ne savais pas après chaque fois que j'appuie sur « Mise à jour », je dois aussi fournir cette URL pour tout le monde (je me suis dit qu'il aurait mis à jour les vieilles urls). En tout cas, le dernier est maintenant dans le lien. Avec la façon dont le violon est actuellement assis (Version # 22), les problèmes que je rencontre sont les suivants:

1.) Aucune vidéo n'est affichée. Si vous commentez tout au-dessus de cette ligne var playListURL=... alors vous verrez que vous obtenez des vidéos .... mais bien sûr, pas de tri. 2.) ne peut toujours pas obtenir description de chaque vidéo (item.description renvoie undefined) 3.) Si vous commentez le code de # 1, puis ajoutez /show à la fin de l'URL, vous verrez le rendu HTML, vidéos et tout (pas de tri) mais faites défiler vers le bas et vous verrez qu'ils sont alignés à droite, pas à gauche.