Joomla+Flexslider – размещаем слайдшоу на сайте

Создаем копию шаблона

• Заходим в Расширения→Менеджер шаблонов→Шаблоны
• Создаем копию шаблона модуля mod_articles_news

  

  После этих действий в папке templates/ваш_шаблон/html/mod_articles_news/ появятся копии файлов шаблона модуля.

  

Интегрируем Flexslider2

• Скачиваем Flexslider с официального сайта
• Распаковываем zip-архив
• Переносим файл jquery.flexslider-min.js из архива в папку templates/ваш_шаблон/js/
• Переносим файл файл flexslider.css из архива в папку templates/ваш_шаблон/css/
• Переносим файлы шрифтов из архива в папку templates/ваш_шаблон/css/

Кастомизируем копию шаблона

• Создаем а новый PHP-файл с именем slideshow.php
• Сохраняем его в папку templates/ваш_шаблон/html/mod_articles_news/

  

• Добавляем в него следующий код:

  PHP

  	<?php
  	defined('_JEXEC') or die;
  	$app = JFactory::getApplication();
  	JHtml::_('stylesheet', 'templates/' . $app->getTemplate() . '/css/flexslider.css');
  	JHtml::_('script', 'templates/' . $app->getTemplate() . '/js/jquery.flexslider-min.js');
  	?>
  	<div class="newsflash flexslider <?php echo $moduleclass_sfx; ?>">
  		<ul class="slides">
  			<?php foreach ($list as $item) : ?>
  				<li><?php require JModuleHelper::getLayoutPath('mod_articles_news', '_item'); ?></li>
  			<?php endforeach; ?>
  		</ul>
  	</div>
  	<script type="text/javascript">
  	jQuery(document).ready(function(){
  		jQuery('.flexslider').flexslider({
  			animation: "slide"
  		});
  	});
  	</script>
  

  Ознакомьтесь со строками кода, показанными ниже. В них подключаются CSS и JavaScript файлы плагина.

  PHP

  JHtml::_('stylesheet', 'templates/' . $app->getTemplate() . '/css/flexslider.css');
  JHtml::_('script', 'templates/' . $app->getTemplate() . '/js/jquery.flexslider-min.js');
  

  Следующий код запускает jQuery-плагин и создает слайдшоу из элементов с классом 'flexslider'.

  JavaScript

  	<script type="text/javascript">
  	jQuery(document).ready(function(){
  		jQuery('.flexslider').flexslider({
  			animation: "slide"
  		});
  	});
  	</script>
  

  Обратите внимание: если в вашем шаблоне не используется jQuery, то его необходимо подключить до подключения файлов Flexslider'а.

  PHP

    JHtml::_('script', 'media/jui/js/jquery.min.js');
    JHtml::_('script', 'media/jui/js/jquery-noconflict.js');
  

Создаем модуль «Материалы — Новости»

• Заходим в Расширения→Менеджер модулей и нажимаем кнопку «Создать».
• Выбираем тип модуля: «Материалы - Новости»
• Выбираем категорию. Убедитесь, что в описании статей содержатся изображения.
• На вкладке «Дополнительные параметры» в выпадающем списке «Альтернативный макет» выберите slideshow. Значение остальных параметров (вкладка «Модуль») установите так, как показано на скриншоте:

  

• Сохраните ваши настройки

Просмотр результата

Откройте публичную часть вашего сайта, чтобы увидеть результаты вашей работы - замечательное слайдшоу, которое работает на основе модуля «Материалы — Новости» и обновляется динамически при добавлении новых материалов.

Оригинал статьи - https://www.ostraining.com/blog/joomla/slideshow-newsflash-module/