Создание слайдшоу (slideshow) и jQuery-каруселей. Часть 1

views slideshow друпал drupal

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

Во многом нам поможет знание CSS, с помощью него мы сможем сделать сайт индивидуальным, изменить цветовую схему. Но и используя стандартные шаблоны из коробки можно добиться большей привлекательности сайта, возможно не самой лучшей, но все же. Давайте начнем с баннера.

Раньше баннеры практически все делали с помощью .gif изображений, которые поддерживают несколько изображений в одном, или flash-баннеры. Разработка первых процесс долгий и не всегда такой красивый результат как у flash-баннеров. Однако у flash, несмотря на его красоту, есть тоже свои недостатки, например он очень много потребляет ресурсов при своем отображение.

Можно было сделать баннер и с помощью javascript, но это занимало еще больше времени и требовало знание этого языка. С появлением фреймворка-javascript  jQuery это стало делать гораздо проще и быстрее, да и javascript стало знать необязательно.

У нас есть многострадальный сайт, который мы продолжим мучить:

Уроки Drupal jQuery-карусель jQuery jQuery-баннер slideshow.png

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

Откроем файл нашей темы .info и сразу после описания регионов:

regions[content] = Content 
regions[right] = Right sidebar 
regions[left] = Left sidebar 
regions[footer] = Footer

 

Добавим свой регион для баннера:

regions[topbanner] = Top banner

Дальше нам предстоит выбрать какой именно баннер мы хотим. Если нас устроит простая смена изображений, то можно сделать слайдшоу через Views_slideshow. Установите этот модуль и его подмодуль Views Slideshow: SingleFrame и . Для их установки потребуется модуль Views,  я думаю он у Вас уже установлен.

Views Slideshow: SingleFrame - реализует слайд-шоу в одном блоке.

- слайд-шоу с меню из мини-фотографий или названий каждого слайда

Создадим новый вид, в поле Tags нужно прописать slideshow:

Уроки Drupal jQuery-карусель jQuery jQuery-баннер slideshow создаем вьюс.png

Теперь нужно добавить поля (fields) для отображения, я добавлю ФИО сотрудника, его должность и фотографию,  Вы можете добавить заголок (title) ноды, тело (body) ноды.

В фильтрах нужно добавить: Материал: опубликован, Тип материала = Сотрудник (либо Ваш тип материала Page, Story или любой другой созданный ранее).

Сортировку (Sort criteria) можно выполнить по Node: Post date = Descending.

Добавьте дисплей в блоке.

В Basic settings необходимо добавить настройку Style: slideshow. После этого появится окно настройки эффектов. Если не появилось, то нажмите "шестерню" после слов style:slideshow.

Уроки Drupal jQuery-карусель jQuery jQuery-баннер slideshow вид.png

Настройки слайд-шоу следующие, для Slideshow mode: SingleFrame
Timer delay: время в милисекундах между переключением слайдов;
Initial slide delay offset: время в милисекундах до первого переключения;
Speed: скорость с которой слайды меняются;
Controls: текстовые переключатели слайдов;
Pager: числовые переключатели слайдов;
Image Counter: показывает какой по счету слайд отображается;
Items per slide: сколько слайдов отображается одновременно;
Effect: эффект с которым появляется слайд;

это основные, как я считаю, настройки остальные возможно тоже Вам понадобятся.

Настройки слайд-шоу следующие, для Slideshow mode: ThumbnailHover
Main frame fields: поля которые отображаются в слайде;
Breakout fields: поля которые отображаются в меню слайд-шоу. Можно добавить фотографии для слайд-шоу с пресетом меньшего размера, тогда можно сделать снизу меню из маленьких фотографий;
 

Остальные настройки такие же как и у Slideshow mode: SingleFrame.

Сохраняем вид и если мы создали display - block, то выводим в заранее созданный регион баннер.

Для настройки внешнего вида баннера необходимо подправить CSS файл, можно style.css Вашей темы, но это прийдется делать самостоятельно и в соответствие с задуманной цветовой схемой.

В следующих частях урока мы сделаем кнопки в виде изображений, jQuery-баннер без  дополнительных модулей и jQuery-карусель.

Комментарии

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

Войти, используя Loginza Google Account Yandex Mail.ru Vkontakte Facebook

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.

В Drupal7 с темой Батрик,

В Drupal7 с темой Батрик, вывел в регион хедр (заголовок), блок с картинкой. Блок раздвинул все, встал между  логотипом и слоганом. В настройках я отключил все включая главное меню (с вкладками типа форум) и втророе меню (с вкладками типопо войти) Но всеравно остались ненужные синие полоски снизу около 1см. Основной вопрос, как можно этот блок с картинкой(шапкой) разместить ЗА вкладками главного меню и текстом второго меню, чтобы этот блок с картинкой не раздвигал их а находился за ними?

Используйте position:

Используйте position: absolute, например так:

#block1{  //в этом блоке находятся два других
  position: relative;  //новая точка отсчета для position: absolute
}

#block2{
  position: absolute; 
  left: 10px; 
  top: 20px;
  z-index: 2; //чем больше будет z, тем выше слой
}

#block3{
  position: absolute;
  right: 10px;
  z-index: 3; // этот слой будет выше #block2
}

А что показывается и не нужно, решается с помощью display: none;

Спасибо, все делается с

Спасибо, все делается с помощью фаербага находите нужные элементы,  лезите в нужные файлы (для темы бартрик это 2 файла CSS: stayle.css и layout.css ) в файле стайл.ксс вставляете примерно в 321 строчке написано

/* Region header blocks. */  после этой строчки пишите название своего блока у меня это #block-block-1  и дописываете ему свойство position: absolute; в итоге получается нечто следующие  
/* Region header blocks. */
#block-block-1 {
position: absolute;
}
.region-header .block {
  font-size: 0.857em;
  float: left; /* LTR */
  margin: 0 10px;
  padding: 0;
}

Дальше я зашел в настройки темы батрик и отключил там логотип, имя сайта, слоган.
Дальше чисто работал с отступами моего блока и элементов которые находились рядом с ним.
Потом для главного меню в стайл.ксс примерно в 460 строчке для #main-menu
дописла следующие:#main-menu { position: absolute; clear: both;}А потом еще дописла для #main-menu-links следующее
margin-top: 168px; что бы опустить меню.И ВСЕ подогнал просто красотень на заглядение (для фаерфокса),
а когда зашел в интернет эксплорер увидел что все немного повылезало и стало не красиво.

  1. Отсюда вопрос, как делать чтобы было все ровно и в эксплорере и фаерфоксе? Я так понял что фаерфокс дает возможность делать дополнительнве настройки и отступы, которые эксплорер не видет по своей природе, скажем если у фаерфокса на итоговый отступ могут повлиять две вещи то интернет будет видить из них только одну и на неё будет ориентироватся.
  2. Я Правильно понимаю или нет? Если да то можеть в фаербаге можно задать что бы он не показывал настройки которые не видет эксплорер, что бы к ним не прикасатся и проблем себе не создавать?
  3. Ccылки типа форум гланого меню прозрачные в фаерфоксе, а в експлорере нет, как это можно исправить? (експлорер у меня 8 версии)
  4. картинку в шапку задавал в пиксилах но в эксплорере она гораздо меньше, как этого можно избежать? Буду благодарен, за ответы на вопросы, на которые сможете ответить.

Отсюда вопрос, как делать

Отсюда вопрос, как делать чтобы было все ровно и в ИЕ и фаерфоксе? Я так понял что фаерфокс дает возможность делать дополнительные настройки и отступы, которые эксплорер не видит по своей природе, скажем если у фаерфокса на итоговый отступ могут повлиять две вещи то интернет будет видеть из них только одну и на неё будет ориентироваться.

Файерфокс отображает сайты лучше, чем IE. А точнее IE вообще по другому может отображать. Для IE нужно писать отдельно CSS. Используйте conditional comments для этого.

Я правильно понимаю или нет? Если да то может в фаербаге можно задать что бы он не показывал настройки которые не видит эксплорер, что бы к ним не прикасаться и проблем себе не создавать?

Можете еще использовать CSS хаки для IE.

Ссылки типа форум главного меню прозрачные в фаерфоксе, а в ИЕ нет, как это можно исправить? (ИЕ у меня 8 версии)

В ие другие параметры для прозрачности, в комменте выше написал ссылку.

 

Подскажите, пожалуйста! Что я

Подскажите, пожалуйста!

Что я не правильно делаю, у меня не работают хаки для IE8.

Я в файл style.css наряду с обычными функциями, стараюсь сделать функцию увеличения размера только для IE, используя хак (//)

 

/* ---------- Overall Specifications ---------- */

body {
  line-height: 1.5;
  font-size: 87.5%;
  //font-size: 57.5%;
  word-wrap: break-word;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}


Но мой IE8 никак не реагирует, я пытался и другие хаки поставить и даже для фаерфокса
нужный хак поставил, но фаерфокс на свой хак тоже никак не реагирует, все перепробывал, более сил нет, что я не так делаю?
Может быть дримвивер хаки не воспринимает?)

Извиняюсь, дичайше

Извиняюсь, дичайше просто.

conditional comments не получается подключить, везде очень скупо описан процесс подключения, на уровне вставляйте эти коментарии и все, но что бы это заработало нужно кучу вещей еще знать, очень много еще действий надо сделать что бы это заработало и в каждом можно ошибится, поэтому процес проб и ошибок у меня затянулся уже на два дня. К примеру в какой файл вставлять никто не пишит, я так понял это пейдж.тпл.пхп или можно в темпрлейт.пхп 1) я правильно понял или нет?

Потом я понял что css файл для IE  нужно ще отдельно подключить, наверно в инфо файле темы бартик? 2) Я прав или нет.

Полез читать как подключить файл CSS и тут пишут что его нужно подключить к HTML файлу, следовательно возник вопрос как это сделать пишут что есть два способа

 

1) В секции <head> html-файла добавить строку:

<link rel="stylesheet" type="text/css" href="mystyle.css">

2) В секции <head> html-файла добавить строку:

<style type="text/css" media="all">@import "mystyle.css";</style>

 

3) Где этот HTML файл???? как он называется.

 

Если не сложно дайте, пожалуйста, пошаговую инструкцию или ориентировочный план действий.

<!--[if IE 7]> <link

<!--[if IE 7]>
<link rel="STYLESHEET" type="text/css" href="<?=$base_path . $directory;?>/ie7.css">
<![endif]-->
<!--[if IE 8]>
<link rel="STYLESHEET" type="text/css" href="<?=$base_path . $directory;?>/ie8.css">
<![endif]-->

Файлы ie7.css, ie8.css должны лежать в этом случае просто в папке с темой.

Можно подключить css в файле темы .info:

conditional-stylesheets[if lt IE 7][all][] = ie6-and-below.css
conditional-stylesheets[if IE 8][all][] = ie8.css

 

Лучше добавлять через файл темы, тогда все css будут в одной общей куче, потом будет проще сжимать css.

Это два разных способа

Это два разных способа добавления условных коминтариев или все один? 

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

Вобщим осталось непонятным

Вобщим осталось непонятным куда этот первый код вставлять??? куда его не вставь он не работает, а второй код насколько я понял будет работать только с дополнительным модулем "Conditional Styles"

Свою проблему я решил тем что в файле темплейт.тпл у темы батрик в друпале7 есть готовый шаблон примерно на 24 строчке  первый блок как он выглядет, а второй блок как я его изменил что бы он заработал. Еще нужно файл CSS создать в папке темы с именем ie8.css

// Add conditional stylesheets for IE
  drupal_add_css(path_to_theme(') . '/css/ie.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 7', '!IE' => FALSE), 'preprocess' => FALSE));
  drupal_add_css(path_to_theme() . '/css/ie6.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'IE 6', '!IE' => FALSE), 'preprocess' => FALSE));
}



// Add conditional stylesheets for IE
drupal_add_css(path_to_theme('theme', 'bartik') . '/css/ie8.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 8', '!IE' => FALSE), 'preprocess' => FALSE));
drupal_add_css(path_to_theme() . '/css/ie6.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'IE 6', '!IE' => FALSE), 'preprocess' => FALSE));
}

Подскажите, установил

Подскажите, установил FlexSlider и создал свой стиль изображения. Когда создаю представление, то в поле тип Слайд-шоу выводится только Цикл, но нет моего стиля. Подскажите как его подключить?

Спасибо, все делается с

Спасибо, все делается с помощью фаербага находите нужные элементы, лезите в нужные файлы (для темы бартрик это 2 файла CSS: stayle.css и layout.css ) в файле стайл.ксс вставляете примерно в 321 строчке написано /* Region header blocks. */ после этой строчки пишите название своего блока у меня это #block-block-1 и дописываете ему свойство position: absolute; в итоге получается нечто следующие

 

/* Region header blocks. */ #block-block-1 { position: absolute; } .region-header .block { font-size: 0.857em; float: left; /* LTR */ margin: 0 10px; padding: 0; } 

 

Дальше я зашел в настройки темы батрик и отключил там логотип, имя сайта, слоган. Дальше чисто работал с отступами моего блока и элеменами которые находились рядом с ним. Потом для главного меню в стайл.ксс примерно в 460 строчке для #main-menu дописла следующие:

 

#main-menu { position: absolute; clear: both;}

 

А потом еще дописла для #main-menu-links следующее margin-top: 168px; что бы опустить меню.

 

И ВСЕ подогнал просто красотень на заглядение (для фаерфокса), а когда зашел в интернет эксплорер увидел что все немного повылезало и стало не красиво.

 

1) Отсюда вопрос, как делать чтобы было все ровно и в эксплорере и фаерфоксе? Я так понял что фаерфокс дает возможность делать дополнительнве настройки и отступы, которые эксплорер не видет по своей природе, скажем если у фаерфокса на итоговый отступ могут повлиять две вещи то интернет будет видить из них только одну и на неё будет ориентироватся.

2) Я Правильно понимаю или нет? Если да, то можеть в фаербаге можно задать, что бы он не показывал настройки которые не видет эксплорер, что бы к ним не прикасатся и проблем себе не создавать?

3) Сылки типа форум гланого меню прозрачные в фаерфоксе, а в експлорере нет, как это можно исправить? (експлорер у меня 8 версии)

4) Картинку в шапку задавал в пиксилах но в эксплорере она гораздо меньше, как этого можно избежать?

Буду благодарен, за ответы на вопросы, на которые сможете ответить.

4)Извиняюсь, просто в

4)Извиняюсь, просто в фаерфоксе масштаб увеличенный был. Этот вопрос снимается.

1) Часть полей встало на место, после того как я убрал закомментированные русские символы из файла ксс (просто подписал строчку, что бы запомнить и получилось что зря), но главное меню все равно вылазит и сами вкладки IE не прозрачные, как в фаерфоксе.

Думаю что проблема в отображении этих вкладок главного меню, в фаерфоксе они меньше, прозрачно-белые и закругленные вверху, а в IE квадратные, непрозрачно-серые, и чуть длиннее и эта длинна и вылазит за рамки дозволенного.Как это исправить???

Хотел обновить IE у меня версия 8.0.6, но 9 версия уже идет только для 7 винды, а у меня xp.

 

Не закругленность в IE это не

Не закругленность в IE это не баг, по крайней мере IE просто не поддерживает CSS3. Можете использовать плагин css3pie

http://css3pie.com/

Используйте conditional comments для исправления верстки в IE.
http://www.quirksmode.org/css/condcom.html

Прозрачность в IE тоже задается по другому:

http://www.tigir.com/opacity.htm

Здравствуйте! Простите за

Здравствуйте! Простите за наглость, но как в Друпале 7 прикрутить например вот такую галерею http://www.htmldrive.net/items/show/653/jQuery-Large-Thumb-Photo-Gallery ? 

Я создал в файле .info регион, прописал там скрипты js и CSS, предварительно скопировав их в соответствующие папки темы. Создал материал куда запихал html-код И ничего не работает. На странице вместо галереи выдает код текстом и все. Может надо скачать какие-то библиотеки jquerry, или модули Друпал 7? Если лень объяснять, ткните носом в урок, пожалуйста! Спасибо. С уважением, Павел.

Вам нужно будет

Вам нужно будет переопределять шаблоны views (через него проще всего выводить фото), чтобы у вас был вывод как это показано в примере плагина. Вот здесь урок по easy slideshow, принцип тот же, выводите через views, подключаете js файл.

Темизация Views, правим шаблоны view.tpl.php (поля, строки, блоки, страницы). Подключаем jquery-плагин EasySlider