Работает ли изолятор изотопа jQuery в xhtml

Question

Im реализует основное использование изотопа, так как его довольно copmprehensive, и я хочу только «эффектный эффект анимации с эффектом« песочного »эффекта. Единственное, что работает, это фильтр * (все), который загружает все элементы - нажатие любой другой ссылки на ссылку фильтра показывает ничего?

Im using, XHTML Strict, jQuery 1.8.3 - у меня также есть jQuery UI 1.10.3 и использование довольно фотографии на элементах изображения в моем портфолио, однако даже если я полностью удалю изображение полностью из изображений, поведение по-прежнему остается то же, ничего не фильтрует.

Все примеры, которые я видел в Интернете (включая сайт Isotope), используют HTML5, это единственный способ, которым это работает? Я пытаюсь изотоп, потому что jQ Quicksand - это пустая трата времени с prettyphoto, которая хорошо документирована на других форумах, так как неоперабельная функция quicksand dev не говорит ни о хорошем хорошем использовании, а при съемке quicksand, поэтому фильтр просто не играл хорошо с prettyphoto. Любые идеи, как я могу получить изотоп, в основном, фильтр - требуется ничего фантазии - вот что ив получил:

[УД в голове страницы]

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
<script src="_layout/js/jquery-1.8.3.min.js" type="text/javascript"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 

<script src="_layout/js/accordion/jquery.accordion.js" type="text/javascript"></script> 
<script type="text/javascript" src="_layout/js/tweet/jquery.tweetable.min.js"></script> 

<link href="_layout/js/isotope/css/style.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="_layout/js/isotope/js/jquery.isotope.min.js"></script> 

<script type="text/javascript"> 

     $(window).load(function(){ 
       var $container = $('#portfolio'); 
       $container.isotope({ 
         filter: '*', 
         animationOptions: { 
           duration: 750, 
           easing: 'linear', 
           queue: false 
         } 
       }); 

       $('#filter li a').click(function(){ 
         $('#filter li a.current').removeClass('current'); 
         $(this).addClass('current'); 

         var selector = $(this).attr('data-filter'); 
         $container.isotope({ 
           filter: selector, 
           animationOptions: { 
             duration: 750, 
             easing: 'linear', 
             queue: false 
           } 
         }); 
         return false; 
       }); 
     }); 

</script> 

[CSS-код]

.isotope-item { 
    z-index: 2; 
} 
.isotope-hidden.isotope-item { 
    pointer-events: none; 
    z-index: 1; 
} 
.isotope, 
.isotope .isotope-item { 
    /* change duration value to whatever you like */ 
    -webkit-transition-duration: 0.8s; 
    -moz-transition-duration: 0.8s; 
    transition-duration: 0.8s; 
} 
.isotope { 
    -webkit-transition-property: height, width; 
    -moz-transition-property: height, width; 
    transition-property: height, width; 
} 
.isotope .isotope-item { 
    -webkit-transition-property: -webkit-transform, opacity; 
    -moz-transition-property: -moz-transform, opacity; 
    transition-property: transform, opacity; 
} 

[HTML-разметки - упрощена до 2-х категорий для краткости]

<!-- isotope filter --> 
<ul id="filter"> 
    <li><a href="#" data-filter="*" class="current">All</a></li> 
    <li><a href="#" data-filter=".artstart">art projects</a></li> 
    <li><a href="#" data-filter=".iconstart">icon projects</a></li> 
</ul> 

<div id="portfolio"> 

      <div id="0" class="picbox artstart">    
       <div class="fixed portfolio-item-preview">    
        <img src="pfimgs/2013/timeteam.png" width="200" height="123" alt="" />     
        <div class="preview-options"> 
         <a href="pfimgs/2013/timeteampromo.png" class="lightbox" title="view large version" rel="prettyPhoto" >view large version</a> 
         <a href="#" class="view" title="Go to project page" >Go to project page</a>      
        </div>  
       </div>     
      </div> 


      <div id="1" class="picbox iconstart">    
        <div class="fixed portfolio-item-preview">     
          <<img src="pfimgs/2013/bonecollector.png" width="200" height="123" alt="" />     
          <div class="preview-options"> 
            <a href="pfimgs/2013/bcollectorpromo.png" class="lightbox" title="view large version" rel="prettyPhoto" >view large version</a> 
            <a href="#" class="view" title="Go to project page" >Go to project page</a>       
          </div>   
        </div>      
      </div> 



      <div id="2" class="picbox artstart"> 
       <div class="fixed portfolio-item-preview"> 
        <img src="_layout/portfolio/mashup55.png" width="200" height="123" alt="" />  
        <div class="preview-options"> 
         <a href="_layout/portfolio/mashuppromo.png" class="lightbox" title="View large version" rel="prettyPhoto" >View large version</a> 
         <a href="#" class="view" title="Go to project page" >Go to project page</a>      
        </div> 
       </div>  
      </div> 



      <div id="3" class="picbox iconstart"> 
       <div class="fixed portfolio-item-preview"> 
        <img src="_layout/portfolio/whatnext.png" width="200" height="123" alt="" />   
        <div class="preview-options"> 
         <a href="_layout/portfolio/whatnextpromo.png" class="lightbox" title="View large version" rel="prettyPhoto" >View large version</a> 
         <a href="#" class="view" title="Go to project page" >Go to project page</a>      
        </div>  
       </div> 
      </div> 

</div> 

Любые идеи, что происходит здесь, ребята ??

Answer 1

исправлено, забыли добавить элемент '