Шаблоны для Datalife Engine

Адаптивные качественные DLE шаблоны по приятным ценам.

Контакты:
e-mail: redissx@gmail.com telegram: @webrambo
Написать сообщение
Время работы: 10.00 - 20.00 (МСК)
    Ajax подгрузка новостей DLE

Ajax подгрузка новостей DLE

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

Загрузка при клике по кнопке


В итоге мы получим это
Ajax подгрузка новостей DLE


1. В navigation.tpl вашего шаблона

<div class="bottom-nav ignore-select" id="bottom-nav">

	<div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div>
	
	<!-- сюда можете вставить дополнительно обычную навигацию -->
	
</div>


2. В конец css файла вашего шаблона

.bottom-nav {clear: both; padding-top: 60px;}
.nav-load {text-align: center;}
.nav-load a {padding: 0 60px; display: inline-block; height: 60px; line-height: 60px; border-radius: 30px;
font-weight: 700; font-size: 18px; background-color: #2980b9; color: #fff;}
.nav-load a:hover {background-color: #00a652; color: #fff;}
.nav-load span {display: none;}


3. В конец js файла вашего шаблона

$(document).ready(function(){
	
	 	$('body').on('click','#nav-load a',function(){
		var urlNext = $(this).attr('href');
		var scrollNext = $(this).offset().top - 200;
        if (urlNext !== undefined) {
			$.ajax({
				url: urlNext,
				beforeSend: function() {
					ShowLoading('');
				},			 
                success: function(data) {
                    $('#bottom-nav').remove();
                    $('#dle-content').append($('#dle-content', data).html());
                    $('#dle-content').after($('#bottom-nav'));
					window.history.pushState("", "", urlNext);
					$('html, body').animate({scrollTop:scrollNext}, 800);	
					HideLoading('');
                },
				  error: function() {				
					HideLoading('');
					alert('что-то пошло не так');
				  }
			});
		};
		return false;
	});
	
});



Автоматическая загрузка при скролле


В итоге по мере прокрутки к нижним новостям следующие новости будут автоматически загружаться.

1. В navigation.tpl вашего шаблона

<div class="bottom-nav ignore-select" id="bottom-nav">

	<div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div>
	
</div>


2. В конец css файла вашего шаблона

.bottom-nav {clear: both; opacity:0;}


3. В конец js файла вашего шаблона

$(document).ready(function(){
	
	var loadLink = $('#nav-load'), loadStatus = 0;
    $(window).scroll (function () {
        if ($(this).scrollTop() + $(this).height() + 50 > loadLink.offset().top) {
            var urlNext = loadLink.find('a').attr('href');
            if (urlNext !== undefined && loadStatus == 0) {
                loadStatus = 1;
                $.ajax({
                    url: urlNext,
                    beforeSend: function() {
                        ShowLoading();
                    },            
                    success: function(data) {
                        $('#bottom-nav').remove();
                        $('#dle-content').append($('#dle-content', data).html()).after($('#bottom-nav'));
                        window.history.pushState("", "", urlNext);
                        HideLoading();
                        loadStatus = 0, loadLink = $('#nav-load');
                    }
                });
            } else {
                loadLink.remove();
            };
        };
    });  
	
});


здесь в строке

        if ($(this).scrollTop() + $(this).height() + 50 > loadLink.offset().top) {

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


Также замечу, что рекомендуется использовать загрузку только на главной и в категории во избежание проблем. Обычно я делаю так в navigation.tpl

[aviable=main|cat]
<div class="bottom-nav ignore-select" id="bottom-nav">

	<div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div>
	
	<!-- сюда можете вставить дополнительно обычную навигацию -->
	
</div>
[/aviable]

[not-aviable=main|cat]
<!-- обычная навигация -->
[/not-aviable]
Написать отзыв
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
В каком из этих слов "шаблон" или "вебрембо" есть буква Ш ?
Отзывов (25)
WMZ
WMZ Посетители 6 июля 2018 22:29
нужная тема - как бы ее в закладки добавить...
Владимир
Владимир Гости 1 августа 2018 19:50
После нажатия блок с кнопкой вылетает из dle-content
webrambo
webrambo Администраторы 2 августа 2018 14:41
Владимир, значит неправильно установили или у вас недочеты в верстке (скорее всего с плавающими краткими).
Alenka
Alenka Посетители 27 августа 2018 03:36
Здравствуйте, подскажите возможно использовать в фулстори и если да, то как?
webrambo
webrambo Администраторы 28 августа 2018 18:17
Alenka, скорее нет, чем да.
Alenka
Alenka Посетители 28 августа 2018 18:30
webrambo
Спасибо за ответ, попробовола сама, но там без "разковыривания" dle похоже никак.
webrambo
webrambo Администраторы 28 августа 2018 18:33
Alenka, а что вы пытаетесь грузить? Следующую новость? Это чревато проблемами, даже если подгрузить.
Alenka
Alenka Посетители 28 августа 2018 18:37
webrambo, Одна публикация разбита на несколько страниц, вот и пыталась сделать, что бы следующая страница подгружалась скриптом (без клика по кнопке) и как бы она подгружается ниже (вторая страница) только с дублем тайтла, комментов и прочего... может чего то не понимаю.
webrambo
webrambo Администраторы 28 августа 2018 18:51
Alenka, вам придется разбираться самой.



Навигация полной новости в splitnewsnavigation.tpl. Делайте по аналогии. Думаю, должно работать все нормально, но не проверял. Единственное, что нужно тут


$('#dle-content').append($('#dle-content', data).html());
$('#dle-content').after($('#bottom-nav'));

править, чтобы из ответа брал нужный кусок контента и вставлял в нужное место. Так как #dle-content это весь фуллстори.тпл целиком, а не лишь сам текст.

Ну то есть, например так


$('.full-text').append($('.full-text', data).html());
$('.full-text').after($('#bottom-nav'));
Alenka
Alenka Посетители 28 августа 2018 18:55
webrambo, Спасибо за помощь, чуть позже попробую еще раз.
Alenka
Alenka Посетители 29 августа 2018 12:02
эх не работает в полной новости, нашла вашу тему на форуме dle, там тоже тихо по этому вопросу, похоже не судьба.
baseroad
baseroad Посетители 29 августа 2018 13:07
а как это поставить на статическую страницу?
webrambo
webrambo Администраторы 29 августа 2018 14:31
baseroad, никак, там же даже нет пагинации.
Alenka
Alenka Посетители 8 сентября 2018 11:51
webrambo, не могу поверить своим глазам! Вам не стало интересно самому посмотреть почему же не работает скрипт и не подгружает следующую страницу в одной публикации (фуллстори) разбитой на несколько страниц? этого просто не может быть! а как же помочь нуждающимся и спасти планету? :)
webrambo
webrambo Администраторы 8 сентября 2018 17:46
Alenka, не стало. Не знаю с чего вы взяли, что это должно быть интересным. Если у вас не подгружает, значит вы неправильно ставите, вот и все.
Alenka
Alenka Посетители 8 сентября 2018 19:04
webrambo, на этой странице нет скрипта который бы работал в фуллстори, вот и все.
webrambo
webrambo Администраторы 8 сентября 2018 19:47
Alenka, satisfied ...........
Alenka
Alenka Посетители 8 сентября 2018 20:02
сообщение выше было написано проще в надежде что читающий поймет.
webrambo, НА этой странице нет ГОТОВОГО РАБОЧЕГО скрипта, для Ajax подгрузки в fullstory.tpl публикации раззделенной на несколько страниц ( р а з ж О в а н о ). Есть желание возразить? relaxed
webrambo
webrambo Администраторы 8 сентября 2018 21:05
Alenka, я прекрасно понял, о чем вы писали. Потому и улыбнуло. Конечно же, все рабочее, а в комментарии выше написано, что следует сменить. Вы просто не можете сделать, т.к. не понимаете, что делаете, а копируете методом тыка. И пытаетесь тут манипулировать, что довольно забавно.
Эпик
Эпик Гости 16 сентября 2018 13:47
webrambo, очень забавно наблюдать как человек мучается, забавно до слез.
webrambo
webrambo Администраторы 16 сентября 2018 16:15
Эпик, ну хватит уже, астанавитесь!11 grinning Во-первых, не надо переиначивать то, что я написал. Во-вторых, так не мучайтесь, кто ж вас заставляет? Наймите человека, кто вам за оплату сделает. В-третьих, все написано, точного решения нет, т.к. классы у всех разные. Еще раз

Навигация полной новости в splitnewsnavigation.tpl. Делайте по аналогии. Думаю, должно работать все нормально, но не проверял. Единственное, что нужно тут


$('#dle-content').append($('#dle-content', data).html());
$('#dle-content').after($('#bottom-nav'));

править, чтобы из ответа брал нужный кусок контента и вставлял в нужное место. Так как #dle-content это весь фуллстори.тпл целиком, а не лишь сам текст.

Ну то есть, например так


$('.full-text').append($('.full-text', data).html());
$('.full-text').after($('#bottom-nav'));

где .full-text - это тот класс в который у вас обернут текст вашей новости в fullstory.tpl
Сергей
Сергей Гости 4 октября 2018 11:33
Автор большое спасибо за хак, отлично работает! Очень и очень жаль что не работает на новости, которые выводятся через custom. Выходит просто надпись загрузка и пропадает. Возможно ли как то поправить? В моем случае, новости на главной странице выходят через custom.
webrambo
webrambo Администраторы 7 октября 2018 09:20
Сергей, оберните ваш кастом в <div id="dle-content"></div>
Andrew
Andrew Гости Вчера, 07:49
Спасибо за модуль!
А вам не встречался скрипт Аякс подгрузки полных новостей при скролле? Чтобы при чтении новости после скролла до футера в основной блок контента подгружалась следующая статья (related или просто следующая в категории)? И чтобы после прогрузки URL страницы менялся тоже.
Очень надо. Помогите найти или наведите на примеры!
webrambo
webrambo Администраторы Вчера, 15:06
Andrew, это все делается точно также по смыслу. Тут дело в другом. Текст мы можем подгрузить. А как быть с комментариями, например? С комментариями невозможно работать, поэтому и модуля такого до сих пор нет.