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

+29
3.01K
Добрый вечер. У юных пользователей Инстанта сложился такой миф что 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

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

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

Еще от автора

Html редактор Ace. Обновление !!!
HTML ACE предназначен для удобной работы с встроенным html кодом на вашем сайте.
Шаблон OneMinima для InstanCMS2 (Релиз)
Здравствуйте уважаемые пользователи и гости сайта InstantCMS. Представляем вашему вниманию релиз шаблона OneMinima для второй ветки.
Анонс шаблона OneMinima для InstanCMS2
Здравствуйте уважаемые пользователи!
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.