Quicksand, как сделать его динамическим с ajax загружать больше элементов, а затем фильтровать?

Question

Я взял сценарий по этой ссылке: http://mode87.com/untame/demo/filteredgallery/

Теперь, что я хочу, я хочу сделать его динамичным. На моем сайте, когда загружаются страницы, он показывает некоторые элементы, и есть кнопка ниже, чтобы загрузить больше элементов через ajax, когда загружается больше предметов, фильтрация не работает должным образом.

Например, страницы загружаются с 4 элементами, теперь я нажимаю «Загрузить больше», и когда я снова нажимаю «все», он просто показывает мне 4 элемента, но я хочу, чтобы все элементы отображались, которые были загружены через ajax.

ждут ваши ответы

мой код здесь

index.php

<ul class="filter nav nav-pills"> 
    <li data-value="all">All</li> 
    <li data-value="1">OPENING CEREMONIES</li> 
    <li data-value="2">PRODUCT LAUNCHES</li> 
    <li data-value="3"> MALL SHOWS </li> 


    <li data-value="4">FAMILY FESTIVALS</li> 
    <li data-value="5">CULTURAL FESTIVALS</li> 
    <li data-value="6">WORLD CLASS SHOWS</li> 
    <li data-value="7">SPORTS EVENTS</li> 
    <li data-value="8">GALA DINNERS</li> 


    </ul> 


    <ul class="thumbnails" id="loading_more"> 
    <?php 
    $_SESSION["page_load"] = 1; 
    portfolioItems($_SESSION["page_load"]); 
    ?> 
    </ul> 



    <div class="row-fluid"> 
     <div class="span12 portfolio-load-more-wrapper"> 
      <h1><span class="caption_heading">WANT TO</span> SEE MORE?</h1> 
      <h2><span class="icon-down-open-2 gray" onClick="javascript:showMore();"></span></h2> 
     </div> 
    </div> 

Когда щелчок, функция showMore():

function showMore() 
    { 

     var data =  'load_more='+'load_more'; 
     $.ajax({ 

       url:'process.php', 
       type:'post', 
       data:data, 
       success:function(html) 
       { 
        $('.thumbnails').html(html); 
       } 
      }); 
    } 

process.php

function portfolioItems($page_load) 
    { 
     if($page_load  ==   1) 
     { 
      global $con; 
      $item_list   =   ""; 

      //Query to get the items 
      $sql_item_details =   mysqli_query($con , "SELECT * FROM portfolio_items LIMIT 4"); 
      $count    =   mysqli_num_rows($sql_item_details); 

      //If records found 
      if($count   >   0) 
      { 
        while($row  =   mysqli_fetch_array($sql_item_details)) 
        { 

         $id    =   $row["id"]; 
         $title   =   $row["title"]; 
         $category  =   $row["category_id"]; 
         $date   =   $row["date"]; 
         $detail   =   $row["detail"]; 
         $thumbnail  =   $row["thumbnail"]; 

         $item_list .=   '<li data-type="'.$category.'" data-id="id-1" class="span3 fancybox fancybox.iframe portfolio-iframe" 
               onClick="javascript:showPortfolioDetail('.$id.');"> 
                <img src="images/portfolios/portfolio_thumbs/'.$thumbnail.'" width="295" height="295" border="0"> 

                <div class="img_hover_box"> 
                 <div class="portfolio_title"> 
                  <div class="portfolio-cpation"> 
                   <h2> 
                    <div class="arrow_icon"> 
                     <i class="icon-right-circled-1"></i> 
                    </div> 
                    <span>'.$title.'</span> 
                   </h2> 
                  </div> 
                 </div> 
                </div> 

                <div class="clock_year"> 
                <span class="icon-clock-alt"></span><span class="year">'.$date.'</span> 
                </div> 
               </li>'; 



        } 
        echo     $item_list; 
      } 
     } 
     else 
     { 

      //Get the pagination value. 
      $page_no   =   $page_load; 
      $one_page   =   $page_no * 4; 
      $start_from   =   $one_page - 4; 
      $limit    =   4; 


      global $con; 
      $item_list   =   ""; 

      //Query to get the items 
      $sql_item_details =   mysqli_query($con , "SELECT * FROM portfolio_items LIMIT 0,".$one_page); 
      $count    =   mysqli_num_rows($sql_item_details); 

      //If records found 
      if($count   >   0) 
      { 
        while($row  =   mysqli_fetch_array($sql_item_details)) 
        { 

         $id    =   $row["id"]; 
         $title   =   $row["title"]; 
         $category  =   $row["category_id"]; 
         $date   =   $row["date"]; 
         $detail   =   $row["detail"]; 
         $thumbnail  =   $row["thumbnail"]; 

         $item_list .=   '<li data-type="'.$category.'" data-id="id-1" class="span3 fancybox fancybox.iframe portfolio-iframe" 
               onClick="javascript:showPortfolioDetail('.$id.');"> 
                <img src="images/portfolios/portfolio_thumbs/'.$thumbnail.'" width="295" height="295" border="0"> 

                <div class="img_hover_box"> 
                 <div class="portfolio_title"> 
                  <div class="portfolio-cpation"> 
                   <h2> 
                    <div class="arrow_icon"> 
                     <i class="icon-right-circled-1"></i> 
                    </div> 
                    <span>'.$title.'</span> 
                   </h2> 
                  </div> 
                 </div> 
                </div> 

                <div class="clock_year"> 
                <span class="icon-clock-alt"></span><span class="year">'.$date.'</span> 
                </div> 
               </li>'; 



        } 
        echo     $item_list; 
      } 

     } 


    } 

Answer 1

Хорошо я думаю, что я понимаю. Если вы посмотрите на коде JS, после function gallery(){} Youre собирающихся увидеть коды для фильтрации операций, как это:

var $itemsHolder = $('ul.thumbnails'); 
var $itemsClone = $itemsHolder.clone(); 
var $filterClass = ""; 
$('ul.filter li').click(function(e) { 
e.preventDefault(); 
$filterClass = $(this).attr('data-value'); 
    if($filterClass == 'all'){ var $filters = $itemsClone.find('li'); } 
    else { var $filters = $itemsClone.find('li[data-type='+ $filterClass +']'); } 
    $itemsHolder.quicksand(
     $filters, 
     { duration: 1000 }, 
     gallery 
    ); 
}); 

Теперь это настройки фильтров когда страница была первой загрузкой так, так как новые добавленные элементы Арента собирается быть в $itemsHolder списке , дальнейшая фильтрация не будет включать новые добавленные элементы. Что вам нужно сделать, это обернуть этот код в функции, как:

function gallery_filter() { 
    var $itemsHolder = $('ul.thumbnails'); 
    ..... 
} 

И затем вызвать эту функцию после того, как АЯКС Succes:

success:function(html) 
{ 
    $('.thumbnails').html(html); 
    gallery_filter(); // here 
}