Блок jQuery приводит к тому, что страница не отображается

Question

Я пытаюсь отобразить список видео YouTube из плейлиста на свою страницу. Я могу получить видео, чтобы они отображались просто отлично. Я пытаюсь добавить «сортировку» по имени или дате видео, но когда я добавляю код, страница вообще не отображает видео.

Вот 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> 

и вот сценарий в $(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"); 

}); 

Короче говоря, getJSON создает HTML для каждого видео и присоединяет его к <ul id="thumbs"> бирка. Опять же, это работает, но когда я добавил свой код «Сортировка», страница вообще не отображается. Любые идеи почему? Кроме того, я попытался получить «Описание» из фида, но item.description возвращает неопределенные, но есть описание для всех этих видеороликов? И я также пытаюсь понять, почему это отображает их от «Право налево». Если вы возьмете скрипку ниже и добавите /show до конца, вы увидите, о чем я говорю. Почему бы не добавить их «слева направо», как ожидалось?

Вот скрипка, чтобы собрать все вместе: UPDATED Fiddle и я использую jQuery 1.8.2. (хотя скрипка гласит 1.8.3).

UPDATE

Извините за путаницу с jsFiddle ... Я не знаю, после того, как каждый раз, когда я нажимаю «Обновить», я также должен поставить этот URL для всех (я понял, что это был бы обновлен старые URL-адреса). Во всяком случае, последняя находится в ссылке. С тем, как в настоящее время сидит скрипка (версия № 22), возникают следующие проблемы:

1.) Видео не отображается. Если вы прокомментируете все выше этой строки var playListURL=..., то вы увидите, что получаете видео .... но, конечно, сортировки нет. 2.) Все еще не может получить description с каждого видео (item.description возвращает undefined) 3.) Если вы закомментируете код из # 1, а затем добавите /show в конец URL-адреса, вы увидите рендер HTML, видео и все (без сортировки), но прокрутите вниз, и вы увидите, что они выровнены вправо, а не влево.