Как сделать подобный слайдер?

Главные вкладки

Аватар пользователя newpiero newpiero 21 марта 2014 в 16:24

Подскажите как сделать подобный слайдер?
Слайдер на изображении: автоматический, миниизображения справа вертикальные, на основном изображении Заголовок и ссылка "Подробнее...".

Испробовал вариант с Juicebox, но он платный, в бесплатной версии мало настроек.

Комментарии

Аватар пользователя newpiero newpiero 21 марта 2014 в 17:11

"vortex" wrote:
 views+ views_slideshow+css+для картинок imagecache

Спасибо, то что надо, осталось css поправить.
А как вместо текста ссылок "предыдущий" "далее" "пауза" - сделать стрелки (изображения)?

Аватар пользователя vortex vortex 21 марта 2014 в 17:45

"NaZg" wrote:

естественно, потому и не ссылка Smile просто не помню как встроенный модуль называется. Может image.

"newpiero" wrote:
А как вместо текста ссылок "предыдущий" "далее" "пауза" - сделать стрелки (изображения)?

Я с помощью css делаю. Шрифт делаю размером 0. И с помощью background изображение цепляю. В интернете есть рецепты.
Можно спец шрифтом, т.к. слайдщоу позволяет текст менять.
Наверняка есть способ не через css или символы замену произвести. Но у меня нет опыта.
А что бы навигатор стал изображениями - есть настройка в самом слайдшоу

Аватар пользователя vortex vortex 21 марта 2014 в 18:48

Идея примерно такова:
1. Формат должен быть "поля", где обязательно есть поле с изображением.

2. В настройках слайдшру выбрать в навигаторе определенное поле.

Извиняюсь за скриншоты из разных типов. Просто под рукой были именно они, а в голове лень

Аватар пользователя -NIK- -NIK- 21 марта 2014 в 19:23

vortex, с построчным навигатором понятно, а вот поле изображение ведь одно и тоже как сделать что бы главное было большим а миниатюры маленькие и где указать их количество?

Аватар пользователя vortex vortex 21 марта 2014 в 20:10

1. Добавить два одинаковых поля с разным форматёром изображений
2. Миниатюры относятся к одной ноде? (у меня нода имеет по одному изображению) Иначе филд-коллекшн нужен.

Аватар пользователя -NIK- -NIK- 21 марта 2014 в 21:02

"vortex" wrote:
1. Добавить два одинаковых поля с разным форматёром изображений
2. Миниатюры относятся к одной ноде? (у меня нода имеет по одному изображению) Иначе филд-коллекшн нужен.

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

Аватар пользователя newpiero newpiero 21 марта 2014 в 21:17

Все получилось на ура. Добавил еще одно поле "изображение" в миниатюре, сделал их как миниизображения которые будут справа, по клику которых сменяется основное изображение и чтобы не дублировались - исключил из вывода.
А темизировать оказывается легко, в том числе вместе ссылок сделать изображения можно используя шаблоны в корне модуля вьюс_слайдшоу, только перед этим их надо скопировать в директорию темы.
Всем спасибо!

Аватар пользователя -NIK- -NIK- 22 марта 2014 в 4:16

Вроде с миниатюрами разобрался, теперь остался вопрос: как вывести заголовок ноды поверх главного изображения в слайд шоу?

Аватар пользователя vortex vortex 24 марта 2014 в 12:38

"-NIK-" wrote:
Вроде с миниатюрами разобрался, теперь остался вопрос: как вывести заголовок ноды поверх главного изображения в слайд шоу?

"newpiero" wrote:
Нужно добавить новое поле Заголовок и средствами css вывести его поверх основного изображения.

аналогично

Аватар пользователя -NIK- -NIK- 10 ноября 2015 в 11:49

Еще вопрос как все эти изображения вывести в одну строчку, то есть главное слева а миниатюры с права от него, сейчас миниатюры располагаются под основным изображением и css: float: left и display: inline не дают результата, так как это вроде как разные элементы, основная картинка и элементы навигации.

Аватар пользователя vortex vortex 24 марта 2014 в 15:29

Не только разные элементы, но и родительские div'ы.
Наверняка есть views-slideshow-controls-bottom или аналогичное для навигатора. А у контента свой views-slideshow-cycle-main-frame-row-item.
Второму можно флоат, а для певого придется выкручиваться, например, фиксированными размерами, что бы двумя строками стало.