[英]Quicksand how to make it dynamic with ajax load more items and then filter?
I have taken script from this link: http://mode87.com/untame/demo/filteredgallery/ 我已经从以下链接获取了脚本: http : //mode87.com/untame/demo/filteredgallery/
Now what I want is I want to make it dynamic. 现在我想要的是使其动态化。 In my site ,when pages loads, it shows some items, and there is a button below to load more items via ajax, when more items are loaded, the filtration does not work properly. 在我的网站中,页面加载时会显示一些项目,并且下面有一个按钮可通过ajax加载更多项目,当加载更多项目时,过滤无法正常进行。
For example, pages loads with 4 item,now I click Load more, and when I again click 'all' it just shows me 4 items, but I want all the items to be displayed which have been loaded via ajax. 例如,页面加载了4个项目,现在我单击“加载更多”,当我再次单击“全部”时,它只显示4个项目,但我希望显示所有已通过ajax加载的项目。
waiting your answers 等待你的答案
my code here 我的代码在这里
index.php 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>
When click , showMore() function: 单击时,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 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;
}
}
}
Ok i think i get it. 好吧,我想我明白了。 If you look at the js code , after function gallery(){}
youre gonna see the codes for filtering operations like this: 如果您查看js代码,则在function gallery(){}
您将看到用于过滤操作的代码,如下所示:
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
);
});
Now this is setting filters when the page was first load so since new added items arent gonna be in $itemsHolder
list, further filtering is not gonna involve new added items. 现在,这是在首次加载页面时设置过滤器,因此由于新添加的项目将$itemsHolder
列表中,因此进一步的过滤将不再涉及新添加的项目。 What you need to do is wrap this code in a function like: 您需要做的是将此代码包装在一个类似以下的函数中:
function gallery_filter() {
var $itemsHolder = $('ul.thumbnails');
.....
}
And then call this function after ajax succes: 然后在ajax成功之后调用此函数:
success:function(html)
{
$('.thumbnails').html(html);
gallery_filter(); // here
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.