Помощь начинающим веб
разработчикам

Создание слайдшоу материалов сайта по средствам Views. Модуль Views Slideshow.

21.11.2012

Для информативности сайта, особенно если сайт является новостным порталом вы наверняка не раз видели, как какие-то новости выходят в качестве слайдшоу, выглядет они довольно приятно и не занимают большое количества пространства на странице сайта, как реализовать нечто подобное на своём сайте я сейчас вам попробую объяснить. Как всегда в моём распоряжении Drupal 7 и стандартный шаблон Garland. Так же нам необходим установленный модуль Views, скачать его можно вот отсюда , а также можно почитать вот эту статью о «Введении в модуль Views». Теперь переходим к созданию слайдшоу. Для ее реализации нам понадобится модуль Views Slideshow, который можно скачать вот отсюда. Скачиваем и устанавливаем его, думаю с этим вы без труда справитесь. Как мы видим, в модулях у нас появилось 2 модуля «Views Slideshow» и «Views Slideshow:Cycle»

Для работы они нам понадобятся оба, поэтому активируем их и сохраняем настройки. И так же нам понадобится сама библиотека, для слайдшоу. Скачать ее можно вот отсюда, ее нам так же необходимо перенести по пути

sites/all/libraries/jquery.cycle

Папку под названием «jquery.cycle» вам необходимо создать. Теперь переходим к созданию представления, я предлагаю выводить данное слайдшоу в виде блока, с той целью что в дальнейшем мы сможем разместить его в любом регионе нашего сайта, да и создавать отдельную страницу для слайдшоу просто не имеет смысла. Поэтому переходим по пути «Структура->Представления->Добавить новое представление» и вводим первоначальные настройки

И жмём «продолжить и редактировать». Как вы можете заметить по умолчанию у нас выводятся «Поля», а именно заголовок материала, которые уже срабатывают по принципу слайдшоу, для наглядности давайте выведем ещё в дополнение к заголовку изображения, поэтому жмём кнопку «Добавить»

И вытаскиваем поле с нашими картинками, у вас название полей будут отличаться от моих – не забывайте про это, в моём случае это поле выглядит вот так

Дальше необходимо произвести настройку вывода этого поля, нам абсолютна не нужна метка над изображениями поэтому снимаем галочку с чекбокса. Так как изображения в моём случае большие, то нужно изменить стиль вывода, я изменю на «thumbnail», данный стиль идёт из коробки Drupal. Теперь повесим ссылку на изображение по клику по которой мы будем переходить на полное содержание статьи, поэтому в пункте «Изображение как ссылка на» меняем значение «Ничего» на «Содержимое»,

остальные настройки оставляем по умолчанию и жмём «Применить». Кстати данный вывод будет выводить все изображения из ноды, что будет не совсем красиво, поэтому имеет смысл ограничиться только одним. Для этого в этих же настройках поля в пункте «Расширенные настройки поля» необходимо изменить значение «all» на «1».

Теперь сохраним представление и посмотрим, как этот блок будет выглядеть у нас на сайте. Не забудьте только, что после создания блока, его еще необходимо разместить в каком либо регионе. Делается это из пункта «Блоки». Думаю вы и без меня это знаете. В моём случае данный блок размещен в правую колонку и выглядит вот так

Где заголовок статьи и изображение сменяют друг друга. Как бы на этом можно было и закончить, но данный модуль предоставляет так же еще и настройки эффектов смены, скорость и т.д. Для этого необходимо перейти в настройки только что созданного представления и перейти в пункт настройки формата «Слайдшоу»

Где перед нами открывается страница с полным списком настроек.

Здесь вы можете самостоятельно поиграться с настройками и подобрать что именно вам подходит. А вот теперь на этом всё.

Узнавай о новых статьях сайта - первым. Просто подпишись на рассылку.

Комментарии (11)

Profile picture for user Александр
cmmndr
16.02.2013

Здравствуйте.
не подскажите как сделать подобное?

слайд шоу новостей

Profile picture for user pantey
pantey
17.02.2013

как бы направление в какую сторону копать могу дать! В любом случае знание JS необходимо. Как понятно из скрина, в скрипт выводится 6 последних новостей, которые включают в себя - изображение, заголовок, анонс, ссылку на подробнее, кол-во просмотров и кол-во комментариев, а так же ссылки на другие новости, по клику по которым выводится инфа о конкретной новости. Все эти данные позволяет вывести в Drupal - views. Ну а дальше темизация вьюхи + скрипт, как подозреваю на Jquery. В принципе не столь сложная задача, сколько оч долгая в плане темизации.

Profile picture for user Александр
cmmndr
22.02.2013

спасибо
есть вроде что то попроще,только вот английского к сожалению не понимаю ((
слайдшоу

Profile picture for user Александр
6. k.
02.04.2014

ddblock попробуй.

Profile picture for user Александр
Dovran
29.03.2013

Спасибо вам за этот урок, очень помог. Есть один вопрос - можно ли сделать так чтобы "название" страницы и "краткий анонс" выводился на выводимых фотографиях? пример: (главная страница блок слайдшоу)

Profile picture for user pantey
pantey
01.04.2013

добавьте в views какие вам необходимо вывести поля, а далее темизацией через CSS, либо самой вьюхи

Profile picture for user Александр
Александр
04.07.2014

Здравствуйте! Научите пожалуйста выводить материал в слайдере в нужном виде. Например, создаем данного типа как в уроке слайдер. Добавляем поля Заголовок, Содержимое - изображение, Содержимое - пользовательский текст. Выводятся они у нас последовательно друг за другом. А как сделать так, чтобы вывод был, например, такой: Заголовок, снизу Изображение, а справа пользовательский текст?

Profile picture for user pantey
pantey
04.07.2014

Данный вопрос решается через темизацию полей - field.tpl.php

Profile picture for user Александр
Юрий
28.11.2014

Здравствуйте, а возможна ли прокрутка слайдов колесом мыши при наведении на слайдшоу? Не обязательно именно в этом модуле. Может, подскажете - буду благодарен

Profile picture for user pantey
pantey
28.11.2014

да возможно, вам в сторону Jquery, а именно событие scroll.

Profile picture for user Александр
Юрий
28.11.2014

Ууу... тёмный лес)) Будем учиться, что ж поделать. Спасибо

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

- Оповестить о новом комментарии.
- Все комментарии
- Только мои комментарии