Матвей Земсков

Заметки веб-мастера

Четверг, 16 июля 2015 10:01

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

Оцените материал
(1 Голосовать)

Flexslider2 – это jQuery-плагин, созданный WooThemes, который позволяет легко создавать слайдшоу.

Модуль «Материалы — Новости» (mod_articles_news) является частью ядра CMS Joomla. Он позволяет отображать список материалов совместно с изображениями для вступительного текста материала. В этом уроке я расскажу, как можно интегрировать Flexslider2 в упомянутый модуль с целью создания привлекательного слайдшоу, которое будет обновляться динамически.

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

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

    копируем шаблон модуля mod_articles_news

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

    копии файлов шаблона 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/

    новый файл slideshow.php

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

    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/

Прочитано 1705 раз

Добавить комментарий


Защитный код
Обновить

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: