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

2267
Добрый вечер. У юных пользователей Инстанта сложился такой миф что InstantCMS и разработки которые они находят в интернете сделаны из разного теста. Свидетельство тому некоторые темы на нашем форуме и ваши клиенты которые интересуются у вас иногда - а такой слайдер ВОЗМОЖНО сделать на инстанте? Конечно возможно, главное чтобы голова работала и понимала что вам необходимо сделать для достижения цели. И так сегодня я покажу маленький урок преобразования модуля Новости в карусель. Для начала нам необходим слайдер, я давно знаком с OWL Carousel http://owlgraphic.com/owlcarousel/, данный скрипт подходит для адаптивного шаблона, очень много настроек, единственный для меня недостаток - нет вертикальной карусели. Теперь создаем в папке модулей новый шаблон для модуля и назовем его module_latest_carousel.tpl, далее открываем файл module.tpl копируем его содержимое и ставим в module_latest_carousel.tpl, затем копируем следующий код из mod_latest.tpl
Код HTML:
  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}" border="0" 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
было
Код HTML:
  1. <div class="{$mod.css_prefix}modulebody">{$mod.body}</div>
стало
Код HTML:
  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}" border="0" 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 или в самом файле шаблона модуля таким вот образом
Код PHP:
  1.  
Код PHP:
  1. {add_js file='templates/_default_/js/owl.carousel.min.js'}
  2. {add_css file='templates/_default_/css/owl.carousel.css'}
Все что нужно мы подключили осталось настроить скрипт как нам необходимо. Я задумал следующее. Вывести модуль в позицию mainbottom (в дефолтном шаблоне ) выводить в новости 3 колонки с автоплеем и показать навигацию, как это сделять наглядно указано в документации на сайте.
Код HTML:
  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 : ["<",">"] - текст в навигации.

И последний штрих это нужно обернуть
Код HTML:
  1. {foreach key=aid item=article from=$articles}
  2. {/foreach}
в
Код HTML:
  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

Архив скачать
Бесплатный шаблон Solar для InstantShop | OneNews - анонс платного шаблона для InstantCMS2
Комментарии (7)
Trang 28 июля 2014 в 20:31 +1
спасибо, +
Atid 29 июля 2014 в 00:14 0
Это всего лишь урок, таким образом можно прикрутить любой скрипт
Keenman 2 августа 2014 в 17:17 0
Спасибо , поучительно. +
Бурдель Дмитрий 16 августа 2014 в 13:25 0
Вот этот для вертикалки подайдёт?

Код 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>
Atid 19 августа 2014 в 00:45 0
Не совсем вас понял
Stecc 10 октября 2014 в 16:14 0
Это для версии 1.10.4?
Endroid 7 декабря 2015 в 09:20 0
Отличный материал! Сделал себе пару слайдеров