Найти на сайте

Урок. Переделываем модуль Новые статьи под слайдер.

+29
3.1K
  2. Блоги
  3. Урок. Переделываем модуль Новые статьи под слайдер.
Добрый вечер. У юных пользователей Инстанта сложился такой миф что InstantCMS и разработки которые они находят в интернете сделаны из разного теста. Свидетельство тому некоторые темы на нашем форуме и ваши клиенты которые интересуются у вас иногда — а такой слайдер ВОЗМОЖНО сделать на инстанте? Конечно возможно, главное чтобы голова работала и понимала что вам необходимо сделать для достижения цели. И так сегодня я покажу маленький урок преобразования модуля Новости в карусель. Для начала нам необходим слайдер, я давно знаком с OWL Carousel http://owlgraphic.com/owlcarousel/, данный скрипт подходит для адаптивного шаблона, очень много настроек, единственный для меня недостаток — нет вертикальной карусели. Теперь создаем в папке модулей новый шаблон для модуля и назовем его module_latest_carousel.tpl, далее открываем файл module.tpl копируем его содержимое и ставим в module_latest_carousel.tpl, затем копируем следующий код из mod_latest.tpl 
  1.  
  2. {foreach key=aid item=article from=$articles}

  3. 	<div class="mod_latest_entry">

  4.         {if $article.image}

  5.             <div class="mod_latest_image">

  6.                 <img src="/images/photos/small/{$article.image}"  width="32" height="32" alt="{$article.title|escape:'html'}"/>

  7.             </div>

  8.         {/if}

  9. 	    <a class="mod_latest_title" href="{$article.url}">{$article.title}</a>

  10. 		{if $cfg.showdate}

  11.             <div class="mod_latest_date">

  12.                 {$article.fpubdate} - <a href="{profile_url login=$article.user_login}">{$article.author}</a>{if $cfg.showcom} - <a href="{$article.url}" title="{$article.comments|spellcount:$LANG.COMMENT1:$LANG.COMMENT2:$LANG.COMMENT10}" class="mod_latest_comments">{$article.comments}</a>{/if} - <span class="mod_latest_hits">{$article.hits}</span>

  13.             </div>

  14.         {/if}

  15.         {if $cfg.showdesc}

  16.             <div class="mod_latest_desc" style="overflow:hidden">

  17.                 {$article.description|strip_tags|truncate:200}

  18.             </div>

  19.         {/if}

  20. 	</div>

  21. {/foreach}

  22.  
и заменяем им переменную {$mod.body} в module_latest_carousel.tpl
было 
  1. <div class="{$mod.css_prefix}modulebody">{$mod.body}</div>
стало 
  1.  
  2. <div class="{$mod.css_prefix}modulebody">

  3. 	{foreach key=aid item=article from=$articles}

  4. 	<div class="mod_latest_entry">

  5.         {if $article.image}

  6.             <div class="mod_latest_image">

  7.                 <img src="/images/photos/small/{$article.image}"  width="32" height="32" alt="{$article.title|escape:'html'}"/>

  8.             </div>

  9.         {/if}

  10. 	    <a class="mod_latest_title" href="{$article.url}">{$article.title}</a>

  11. 		{if $cfg.showdate}

  12.             <div class="mod_latest_date">

  13.                 {$article.fpubdate} - <a href="{profile_url login=$article.user_login}">{$article.author}</a>{if $cfg.showcom} - <a href="{$article.url}" title="{$article.comments|spellcount:$LANG.COMMENT1:$LANG.COMMENT2:$LANG.COMMENT10}" class="mod_latest_comments">{$article.comments}</a>{/if} - <span class="mod_latest_hits">{$article.hits}</span>

  14.             </div>

  15.         {/if}

  16.         {if $cfg.showdesc}

  17.             <div class="mod_latest_desc" style="overflow:hidden">

  18.                 {$article.description|strip_tags|truncate:200}

  19.             </div>

  20.         {/if}

  21. 	</div>

  22. 	{/foreach}

  23. </div>

  24.  
Открываем папку скачанного нами скрипта. Файлы стилей объединяем owl.carousel.css owl.theme.css owl.transitions.css, то есть содержимое двух последних переносим в первую и загружаем его в папку стилей. Скрипт карусели owl.carousel.min.js загружаем в папку js. И подключаем их либо в template.php или в самом файле шаблона модуля таким вот образом 
  1. {add_js file='templates/_default_/js/owl.carousel.min.js'}
  2. {add_css file='templates/_default_/css/owl.carousel.css'}
Все что нужно мы подключили осталось настроить скрипт как нам необходимо. Я задумал следующее. Вывести модуль в позицию mainbottom (в дефолтном шаблоне ) выводить в новости 3 колонки с автоплеем и показать навигацию, как это сделять наглядно указано в документации на сайте. 
  1.  
  2. {add_js file='templates/_default_/js/owl.carousel.min.js'}

  3. {add_css file='templates/_default_/css/owl.carousel.css'}

  4. {literal}

  5.     <script type="text/javascript">

  6.     $(document).ready(function() {

  7.     var owl = $("#owl-demo");

  8. 	owl.owlCarousel({

  9. 	autoPlay :true,

  10. 	items :3,

  11. 	itemsDesktop : [1000,3],

  12. 	stopOnHover :true,

  13. 	pagination :true,

  14. 	navigation :true,

  15. 	navigationText : ["<",">"]

  16.     });

  17.     });

  18.     </script>

  19. {/literal}

  20.  
ЧТо за что отвечает
autoPlay :true, автоплей -да
items :3, колонок три
itemsDesktop: [1000,3], если ширина экрана где то там 1000пикселей. (почему то указывая только items :3, у меня ничего не срабатывает и показывает 5колонок.)
stopOnHover :true, -остонавливать при наведении — да
pagination :true, — плагинация да
navigation :true, — навигация — да
navigationText: ["<",">"] — текст в навигации.

И последний штрих это нужно обернуть 
  1. {foreach key=aid item=article from=$articles}

  2. {/foreach}
в 
  1. <div id="owl-demo" class="owl-carousel owl-theme">

  2. {foreach key=aid item=article from=$articles}

  3. {/foreach}</div>
и дополняем добавляем класс item к <div class="mod_latest_entry"> -> <div class="item mod_latest_entry">
Заходим в админку, выбираем шаблон для модуля новостей module_latest_carousel.tpl и смотрим на результат.
Иллюстрация

https://yadi.sk/i/NytMCJn7Xzt7U

Архив скачать
OneNews - анонс платного шаблона для InstantCMS2
Бесплатный шаблон Solar для InstantShop
карусельмодуль новостипеределанный модульслайдер новостей
+1
Trang Trang 10 лет назад #
спасибо, +
0
Atid Atid 10 лет назад #
Это всего лишь урок, таким образом можно прикрутить любой скрипт
0
Keenman Keenman 10 лет назад #
Спасибо , поучительно. +
0
Бурдель Дмитрий Бурдель Дмитрий 10 лет назад #
Вот этот для вертикалки подайдёт?

Код PHP:
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3.  
  4. 	var first = 0;
  5. 	var speed = 700;
  6. 	var pause = 3500;
  7.  
  8. 		function removeFirst(){
  9. 			first = $('ul#listticker li:first').html();
  10. 			$('ul#listticker li:first')
  11. 			.animate({opacity: 0}, speed)
  12. 			.fadeOut('slow', function() {$(this).remove();});
  13. 			addLast(first);
  14. 		}
  15.  
  16. 		function addLast(first){
  17. 			last = '<li style="display:none">'+first+'</li>';
  18. 			$('ul#listticker').append(last)
  19. 			$('ul#listticker li:last')
  20. 			.animate({opacity: 1}, speed)
  21. 			.fadeIn('slow')
  22. 		}
  23.  
  24. 	interval = setInterval(removeFirst, pause);
  25. });
  26. </script>
0
Atid Atid 10 лет назад #
Не совсем вас понял
0
Stecc Stecc 10 лет назад #
Это для версии 1.10.4?
0
Endroid Endroid 8 лет назад #
Отличный материал! Сделал себе пару слайдеров

Еще от автора

Html редактор Ace. Обновление !!!

Html редактор Ace. Обновление !!!

HTML ACE предназначен для удобной работы с встроенным html кодом на вашем сайте.
8
Шаблон OneMinima для InstanCMS2 (Релиз)

Шаблон OneMinima для InstanCMS2 (Релиз)

Здравствуйте уважаемые пользователи и гости сайта InstantCMS. Представляем вашему вниманию релиз шаблона OneMinima для второй ветки.
19
Анонс шаблона OneMinima для InstanCMS2

Анонс шаблона OneMinima для InstanCMS2

Здравствуйте уважаемые пользователи!
26

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.