|
Гость
Гость
|
Здравствуйте!
Хочу на сайте сделать так, чтобы новости автоматически подгружались при прокрутке страницы. Но при этом чтобы была возможность подгрузить следующую страницу кликом по кнопке/ссылке и на этой кнопке выводить количество оставшихся записей для подгрузки. Например так, как вот на этом сайте загружаются товары http://www.magiadigamma.ru/catalog/jewellery/
В CatStore нашёл решение http://netcat.ru/CatStore/solution_179.html . Применил его - работает. Но в нём можно сделать так чтобы страницы подгружались либо при прокрутке, либо при клике, а хотелось бы совместить и то и другое и добавить оставшееся количество неподгруженных новостей.
PHP, ajax и netcat только начинаю осваивать, подскажите может можно что-нибудь подправить в том решении или реализовать как-то по другому.
Вот что у меня работает сейчас при прокрутке:
Префикс:
Код:
<ul id="container" class="news_list">
<?= $f_AdminCommon; ?>
Объект в списке:
Код: <li class="news-item"><?= $f_AdminButtons; ?>
<a href="<?=($f_Text?$fullLink:"#");?>">
<div class="img">
<img src="<?=$f_Img_preview_url;?>" alt="<?=$f_Name;?>">
<div class="Imgnwes"><img src="<?=$f_imgnews;?>" alt="<?=$f_Name;?>"></div>
</div>
<div class="title"><?= nc_edit_inline('Name', $f_RowID, $cc)?></div>
<p><?= nc_edit_inline('Text1', $f_RowID, $cc)?></p>
<div class="more_info">Подробнее</div>
</a>
</li>
Суффикс:
Код: </ul>
<? if ($nextLink) {?>
<div class="load_more">
<a href="<?=$nextLink;?>">
Загрузить ещё
</a>
</div>
<?}?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="/js/waypoints.js"></script>
<script>
(function() {
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
return define(['jquery', 'waypoints'], factory);
} else {
return factory(root.jQuery);
}
})(this, function($) {
var defaults;
defaults = {
container: 'auto',
items: '.news-item',
more: '.load_more a',
offset: 'bottom-in-view',
loadingClass: 'infinite-loading',
onBeforePageLoad: $.noop,
onAfterPageLoad: $.noop
};
return $.waypoints('extendFn', 'infinite', function(options) {
var $container;
options = $.extend({}, $.fn.waypoint.defaults, defaults, options);
if($(options.more).length == 0) return;
$container = options.container === 'auto' ? this : $(options.container);
options.handler = function(direction) {
var $this;
if (direction === 'down' || direction === 'right') {
$this = $(this);
options.onBeforePageLoad();
$this.waypoint('disable');
$container.addClass(options.loadingClass);
$.get($(options.more).attr('href'), function(data) {
var $data, $more, $newMore;
$data = $(data);
$more = $(options.more);
$newMore = $data.find(options.more);
$container.append($data.find(options.items));
$container.removeClass(options.loadingClass);
$(options.more).click(function(){
if ($newMore.length) {
$more.replaceWith($newMore);
$this.waypoint('enable');
} else {
$this.waypoint('destroy');
}
options.onAfterPageLoad();
});
return false;
});
}
};
return this.waypoint(options);
});
});
}).call(this);
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.news_list').waypoint('infinite');
});
</script>
Заранее спасибо!
|
