Авто подгрузка материалов

706
9.8 из 10
Проголосовало: 11






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

Код легкий и легко настраивается под любой ваш модуль сайта зо основу взят Каталог файлов, также возможны разные вариации информации кода вывода, ныне предоставлен код вывода Информации об успешной Загрузки страницы и номера текущуй страницы в TITLE браузера.

Функции:
1. Атоподгрузка всех материалов по клику.
2. Адабтивный код можно переделать под любой модуль.
3. 2 варианта переключения Стандарт и Авто по клику.

Установка:
1. В Каталоге файлов заменить BODY на:
Код

<script>o0 = 1000</script>  
  <span id="kt-num" style="display:none "></span>  
  <div id="testheight">  
  <div class="kt-right-container-body">$BODY$<?if($PAGE_SELECTOR$)?><div style="text-align:center;">$PAGE_SELECTOR$</div><?endif?></div>  
  <div class="kt-right-container-loads"></div>  
  </div>  


2. Добавить кнопку включения Авто подгрузки:
Код

<div class="kt-scroll" title="Автоподгрузка материалов"></div>


3. Добавим .js скрипт:
Код

var ajaxFL = true;  
  var o8 = location.pathname.split('/')[2];  
  if(typeof(o8) != 'undefined') {  
  o9 = o8.split('-')[1]  
  }  
  if(typeof(o9) != 'undefined' && o9!=1) {  
  $('.kt-scroll').hide();  
  };  
  $('.kt-scroll').click(function () {  
  $('.kt-scroll, .pagesBlockuz1').hide();  
  $('title').text('Бесконечная прокрутка включена!');  
  setTimeout(function() { $('title').text('Страница загружена'); }, 2000);  
  $('#kt-load-window').delay(800).fadeOut(500);  
  var o6 = $('#kt-num').html('1');  
  function EndlessContent() {  
  var o1 = window.pageYOffset;  
  var o2 = $('#testheight')[0].offsetHeight;  
  var o3 = parseInt(o2)-800;  
  var o6 = $('#kt-num').html();  
  if(window.pageYOffset > o3 && o6<o0 && ajaxFL) {  
  var o4 = $('#kt-num').html();  
  $('.pagesBlockuz1').hide();  
  var o5 = parseInt(o4)+parseInt(1);  
  $('#kt-num').html(''+o5+'');  
  console.log('Загружен контент '+o5+'-ой страницы');  
  var o7 = location.pathname.split('/')[1]  
  ajaxFL = false;  
  $.get('/'+o7+'/0-'+o5+'', function(data){  
  $('.kt-right-container-loads').append($('.kt-right-container-body',data).html())  
  ajaxFL = true;  
  $('title').text('Страница успешно загружена!');  
  setTimeout(function() { $('title').text('Страница - '+o5+''); }, 1000);  
  $('#kt-load-window').delay(800).fadeOut(500);  
  });  
  };  
  };  
  $(document).scroll(function(){  
  EndlessContent();  
  });  
  });


4. Написать CSS для кнопки подгрузки материала.
Автор публикации: Загрузка
Загрузка
Marishka, это его n материал
Источник: http://ucodes.ru/
  • Всего комментариев: 4

Dub Step
0
Dub Step написал: Написано 23 Декабря 2015 в 02:48
Комментарий №4
демо я так и не увидел, но и ладно..
главное один минус, то что пользователь не увидит нижнюю часть сайта

BLAzER
0
BLAzER написал: Написано 22 Декабря 2015 в 15:00
Комментарий №2
В демо сайт забанен))

Вовчик
0
Вовчик написал: Написано 22 Декабря 2015 в 22:29
Комментарий №3
бывает...

Sevog
0
Sevog написал: Написано 22 Декабря 2015 в 04:09
Комментарий №1
сделали бы еще под разделы и категории...а то я сделал, но у меня бесконечно по кругу грузит потом...

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
    Последние темы
    Опрос
    258
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: