В тази статия ще ви кажа как да създадете модерен чип за сайта в нашите бурни времена - слайдшоу, т.е. използване на визуален плъзгач за промяна на съдържанието в блока, чиято демонстрация можете да видите на главната страница на този сайт. Позволява не само да разнообразите дизайна на сайта. но също така спестете място на страницата, като показвате различно съдържание в един блок.
Според мен най-добрият модул за създаване на такова слайдшоу на Drupal 7, който е наличен в момента, е модулът Views Sledeshow.Този модул ви позволява да превъртате през всеки формуляр, направен с CCK, независимо дали това са само картини, текстови полета или текст със снимки и хипервръзки и фонови изображения. Освен това, създаването на такъв слайдер не изисква познания по PHP и JS или много време за настройка. Всичко се прави много просто.
Създаване на плъзгач във Views 3
Първо, трябва да инсталираме jQuery Cycle Plugin на сайта. От тази връзка изберете пълната версия на приставката (Cycle Plugin) и копирайте кода. Създаваме текстов файл на компютъра, преименуваме го на jquery.cycle.all.js и поставяме копирания код на Cycle Plugin в него. След това на сайта в директорията sites / all създайте папката libraries, ако не е била създадена по-рано, и създайте папката jquery.cycle в нея. В тази папка се поставя файлът jquery.cycle.all.js, т.е. пълният път на файла ще бъде sites/all/libraries/jquery.cycle/jquery.cycle.all.js.
След това изтеглете модула Views Slideshow, инсталирайте и стартирайте по обичайния начин.Слайдшоуто изисква предварително инсталирани модули Views, Chaos tools и Libraries, но обикновено тези модули се използват за изпълнение на много други задачи освен Sledeshow. След инсталиране активирайте модулите Views Slideshow и Views Slideshow:Cycle.
Създайте нов тип материал, нарекох го Slider. Създаваме в него ново поле от тип Дълъг текст и резюме (пълен текст с обява), наричаме го field_slideshow. Сега би било хубаво да създадете няколко страници от този тип материал и да попълните текста полето field_slideshow на този материал, така че да има какво да се показва в изгледа. Добавих три материала, наречени Слайдшоу 1, 2, 3.
След това създайте нов изглед, наречете го Слайдшоу. Тип - полета, показване на съдържание, тип съдържание Плъзгач, създаване - блокиране, формат на показване (Формат на показване) - Слайдшоу, от полетата, накратко, всичко е показано на фигурата:
Натискаме бутона „Продължаване на редактирането“ (Continue & edit), отваря се нов прозорец, в който в секцията „Полета“ (Fields) натискаме бутона „добавяне“ (add), в отворения rollout „ Добавяне на полета” (Добавяне на полета ) изберете създадения тип поле Съдържание: Поле-Слайдшоу, щракнете върху „Приложи”.
В новия прозорец премахнете отметката от Създаване на етикет, щракнете отново върху Приложи.
Премахнете полето по подразбиране от разгръщането на "Полета" Съдържание: Заглавие. Критерии за сортиране Съдържание: Дата на публикация (дес.), зададена по подразбиране, можете да я оставите за сега.
В скрола на пейджъра щракнете върху елемента „Показване на определен брой елементи“ и задайте настройката на „показване на всички елементи“ (Показване на всички елементи).
Всъщност това завършва инсталирането на слайдшоуто. Ако щракнете върху бутона „Актуализиране на визуализация“, можете да видите как се променя редът с текста в блока, т.е. промяна на възли от тип материал на плъзгача.
Можете да промените ефектите на прехода и други настройки, като щракнете върху реда "Настройки" до "Формат: Слайдшоу" :
Полета за настройка за изход в слайдшоу
За да получа полето, от което се нуждая, показвано в плъзгача, задавам css-стилове, т.е. ширина, височина, подложка, фоново изображение и др. като за нормална html страница. По същия начин направих хипервръзки. Пример за код, който въведох в полето field_slideshow в типа съдържание на Slider:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
Ако желаете, като зададете отстъпи или използвате позициониране, можете да вмъкнете изображения в този код, но аз завинтих всички снимки, от които се нуждаех във Photoshop, върху едно фоново изображение, което направих еднакво по размер с полето на плъзгача.