В прошлой части урока мы создали слайд-шоу, у меня это был вывод сотрудников организации, Вы же можете использовать баннер как шапку сайта. Однако меня не устраивает это шаблонное решение, хотелось бы для сайта сделать кнопки переключения предыдущего и следующего слайдов. Это выглядит красивее, чем просто текстовые или числовые переключатели.
Напомню что у нас уже установлен Views и Views_slideshow.
Итак, я прикрепил к статье несколько видов стрелочек, давайте поставим их в наше слайд-шоу. Для начала нужно добавить текстовый переключатель слайдов.
У нас должен переключиться переключатель слайдов с надписями следующий (Next) и предыдущий (Previous).
Идея размещения кнопок следующая, с помощью CSS прописать background для ссылки next и previous и перенести ссылки в нужные нам места, также через CSS.
Для работы нам понадобится дополнение к Firefox. которое называется FireBug. Оно предоставляет удобные инструменты для работы с CSS. Так например выглядит блок ссылок переключателя через FireBug:
Нам важен id элементов, именно по id мы будем задавать свойства CSS. Также нам понадобятся файлы картинок стрелок, их нужно скинуть в папку images Вашей темы.
Копируем файлы наших стрелок в папку images, Вашей темы.
Теперь давайте менять CSS, добавлением в style.css темы. Строки примерно будут такими же, значение нужно писать соответственно шаблону.
a#views_slideshow_singleframe_prev_view_slideshow-block_1{ background:url('images/left.png'); //картинка нашей стрелки width:30px; // ширина стрелки height:0px; //высоту можно поставить 0 padding-top:30px; //отступ, такой же как и ширина по значению position:relative; //положение ссылки top: 0px; //отступ от верхнего края блока overflow:hidden; z-index: 5; //располагать поверх слайдшоу display: block; //выбор отображение блоком }
a - это тег ссылки, # - этот знак показывает что нужно обратиться по id соответствующему после этого знака.
CSS для стрелки next будет немного отличаться:
a#views_slideshow_singleframe_next_view_slideshow-block_1{ background:url('images/right.png'); width:30px; height:0px; padding-top:30px; position:relative; top: 0px; left: 30px; overflow:hidden; z-index: 5; display: block; }
Ссылку "пауза" стоит убрать совсем:
a#views_slideshow_singleframe_playpause_view_slideshow-block_1{ display: none; }
Значение padding'ов, положений можно отрегулировать через FireBug и записать это в style.css.
В результате настройки мой CSS такой:
#views_slideshow_singleframe_prev_view_slideshow-block_1{ background:url('images/left.png'); width:35px; height:0px; padding-top: 26px; position:relative; top: -55px; overflow:hidden; z-index: 5; display: block; } #views_slideshow_singleframe_next_view_slideshow-block_1{ background:url('images/right.png'); width:35px; height:0px; padding-top: 26px; position:relative; top: 0px; left: 0px; overflow:hidden; z-index: 5; display: block; } a#views_slideshow_singleframe_playpause_view_slideshow-block_1{ display: none; } #views_slideshow_singleframe_controls_view_slideshow-block_1{ height: 0px; }
Баннер готов! В следующей части урока мы создадим jQuery-карусель.
Вложение | Размер |
---|---|
белые стрелки.zip | 1.55 КБ |
черные квадратные кнопки.zip | 4.08 КБ |
черные круглые.zip | 4.88 КБ |
Комментарии
Добавить комментарий
Спасибо за урок, но...
Большое спасибо за урок. Вот только со стилями разобраться не могу. Все не пойму никак где это id, и где надо заменить CSSi, перерыл всю тему, куда только не вставлял, не работает. Подскажите пожалуйста поподробнее куда и где рыть? Вот ссылка на сайт. Спасибо!
Извиняюсь за спам, не хватило ума сразу зарегаться. Удалите мой предыдущий комент..
Class и ID это параметры
Class и ID это параметры HTML тегов, например
или
Посмотреть классы и айди можно с помощью плагина Firebug для firefox'a
Это все понятно, но...
Я не так выразился. Поиск и Firebug это все понятно, а вот id или классы с таким именем на которые они ссылаются найти не могу в стилях. ((
<p>Наверно имена классов
Наверно имена классов изменились в модуле или я тоже не понимаю в чем ошибка.
Тоже не совсем понимаю каких ссылок на классы не хватает.
Вот находим класс через файербаг и пишем для этого класса css. Не понимаю в чем ошибка
Спасибо, только сейчас
Спасибо, только сейчас разобрался, сам натупил невнимательностью))), Чуть позже как поднастрою блок, опишу в чем была проблема. А еще подскажите для чего вот эта последняя строчка
#views_slideshow_singleframe_controls_view_slideshow-block_1{
height: 0px;
}
эта строка делает высоту
эта строка делает высоту блока равной нулю, для того чтобы текст в этом блоке не показывался, а показывался только фон (background)
Еще раз спасибо автору! Вся
Еще раз спасибо автору! Вся проблема была в невнимательности, сразу не увидел где "-" , а где "_", поэтому стили и не прописывались. Сейчас все работает, самому нравиться)))
Создал слайдшоу на локальном
Создал слайдшоу на локальном хосте, но когда перенес сайт на реальный хостинг заметил проблему что новые картинки не добавляются в слайдшоу =( не знаю как исправить это. Папка /tmp создана, права на запись на files 777, уже не знаю где искать решение проблемы
Посмотрите еще "отчет о
Посмотрите еще "отчет о состояние" и "файловая система"
вот файловая система а что
вот файловая система
а что именно тут проверить?
Системная папка —
Системная папка — открытая
sites/default/files
Временная папка
sites/default/files/tmp
посмотрите чтобы ВСЕ папки в
посмотрите чтобы ВСЕ папки в папке files были тоже с правами доступа 777. Можете еще попробывать использовать временную папку /tmp, то есть в корне сайта.
sites/default/files/tmp - эта
sites/default/files/tmp - эта папка существует?
попробуйте папку
tmp
или
/tmp
(Тема не указана)
Добрый день, использую Drupal
Добрый день, использую Drupal 5.9 Views версии 5.x-1.6, Views Slideshow 5.x-1.0 beta 1, в настройках нет вкладуи Controls, не получается добавить перелючатели, в чём может быть проблема? Спасибо.
Друпал 5ой версии уже старый,
Друпал 5ой версии уже старый, многие вещи в views slideshow могли быть разработаны позже, вполне вероятно, что там не все возможности модуля для следующих версий друпала. Установите лучше 7ую версию друпала, потому что следующим летом 6ая версия тоже будет считаться устаревшей.