По поводу слайдшоу на модуле Views в Drupal 7

Вопрос: 

Добрый день. При настройке модуля views для drupal7 пользовался пользовался вашим руководством и оно мне очень помогло, но у меня возник один вопрос: можно ли как-то задать размеры отображения, потому что у меня например беда следующая: решил сделать вывод панелей с 3-мя колонками через модуль views, которая при обычном отображении как панели отображается отлично, вот так:

v

Если отображать ее через модуль views в единичном экземпляре, если даже стоит формат: слайдшоу, то панель отображается как надо, ничего не скачет, все в поряде) но стоит только добавить еще один материал, как тутже начинается пляска текста и всего остального, вот как это выглядит:

vo

Не подскажете как решить этот вопрос??? Я перепробовал уже все, но, к сожалению, решения так и не нашел. Причем я пробовал выводить материал и из нужного поля и из содержания в целом, так как надо материал отображается только без режима слайдшоу или при режиме слайдшоу, но когда формально есть только один документ. Если в меню навигатора включить значение 1 для элементов отображения, то все тоже отображается как надо, но никакого слайдшоу при этом нет((

В общем буду вам признателен, если подскажете как решается данный вопрос...

Ответ: 

Надо просто задать ширину каждой колонки через добавления CSS-класса в Views в настройках сложного поля, или обёртки всего представления, если Вы выводите каждую колонку как представление:

v

Стиль CSS надо прописать в любом месте в файле style.css в Вашей теме, можно в конце. Если в Views пописали название стиля column-width, то запись в файле style.css будет выглядеть так:

1
2
3
.column-width {
    width: 145px;
}

Но я бы так делать не стал. Зачем вообще создавать три колонки для одновременного вывода и нагружать как сервер, так и компьютер пользователя?

Я бы сделал обычные странички (node), уже имеющие эти три колонки, т.е. каждая страничка будет как на верхнем скриншоте, задал бы ширину колонок в страничках и выводил бы уже готовые станички в слайдшоу. Таким образом требуется гораздо меньше ресурсов.

HTML-код странички будет примерно такой:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div style="height:200px">
  <div style="float:left;width: 145px;margin: 0 10px">
    <h5 style="color: #29689d;font-size:13px">Заголовок колонки</h5>
    <img src="/sites/default/files/img1.jpg" width="130" height="80" alt=" " />
    <p>Текст содержания...</p>
  </div>
 
  <div style="float:left;width: 145px;margin: 0 10px">
    <h5 style="color: #29689d;font-size:13px">Заголовок колонки</h5>
    <img src="/sites/default/files/img2.jpg" width="130" height="80" alt=" " />
    <p>Текст содержания...</p>
  </div>
 
  <div style="float:left;width: 145px;margin: 0 10px">
    <h5 style="color: #29689d;font-size:13px">Заголовок колонки</h5>
    <img src="/sites/default/files/img3.jpg" width="130" height="80" alt=" " />
    <p>Текст содержания...</p>
  </div>
</div>

Помощь сайту

Понравился сайт? Уроки оказались полезными? Вы можете поддержать проект, просто если скачаете и установите приложение "Фонарик" для Андроид. Приложение написал автор сайта и рассчитывает в дальнейшем публиковать свои приложения. Фонарик управляет светодиодом вспышки фотокамеры телефона, а также включает подсветку экраном на полной яркости.

Ссылка на страничку с описанием.

Преимущества: гибкие настройки. Вы можете задать в настройках, чтобы фонарик сразу включался при запуске приложения и автоматическое включение таймера при запуске приложения. Настройки позволяют отключить блокировку экрана и блокировку фонарика кнопкой включения телефона. Также вы можете самостоятельно установить время таймера.

Если приложение наберёт популярность, это даст стимул автору на создание новых приложений с учётом пожеланий посетителей сайта.

Установить с Google Play.

Заранее благодарен, Дмитрий.

QR-код для установки:

Если Вам понравился материал, скажите свое "спасибо", поделитесь ссылками с друзьями в социальных сетях! Спасибо!

Похожие материалы:

Здравствуйте, подскажите, пожалуйста, как убрать или хотя-бы немного приглушить яркость бликов на сфотографированной фарфоровой статуэтке? С...
Здравствуйте! Вы могли бы доступно объяснить как изменить фон картинки на чёрный,если фон исходного изображения не белый. Например пейзаж перенести...
Скачала Easy GIF Animator 5.1, русский языковой файл прилагается.В ридми указана директория - \Easy GIF Animator\lang\. Не могу ее найти, кроме двух...
Установила фотошоп cs4, все вроде хорошо работает. Но когда сами колоры закачала, снизу почему-то все белое, то есть картинка: Попыталась открыть, а...

Комментарии


Аватар пользователя mr.buch@gmail.com
Автор комментария: mr.buch@gmail.comот: 16/03/2013 - 16:58

Спасибо за ответ, но, откровенно говоря, мне все-равно непонятно как это сделать, так как с css никогда дел не имел(( Если подскажете как задать ширину колонок в 230px каждая -это будет супер. Нода с 3-мя колонками - идея отличная, но, к сожалению, не знаю как ее реализовать, навыков не хватает. В любом случае спасибо за участие!


Аватар пользователя admin
Автор комментария: adminот: 16/03/2013 - 17:33

Я дополнил ответ, написал, куда вставлять стиль CSS и каким примерно должен быть HTML-код странички. Но это всё примерно! Размеры всё-равно придётся подгонять.

Вам надо изучить основы HTML и CSS, это просто необходимо, в инете обучающих материалов горы. И, кстати, ничего сложного.


Аватар пользователя mr.buch@gmail.com
Автор комментария: mr.buch@gmail.comот: 16/03/2013 - 17:36

Спасибо за помощь, будем изучать))


Аватар пользователя admin
Автор комментария: adminот: 16/03/2013 - 17:46

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

v


Аватар пользователя mr.buch@gmail.com
Автор комментария: mr.buch@gmail.comот: 16/03/2013 - 18:34

Премного благодарен! Сейчас буду пробовать)