Нужен Slider

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

Аватар пользователя Shizuku Shizuku 24 июля 2013 в 13:58

Как сделать слайдер как на этом сайте?

Пробовал по инструкции Views SlideShow - не совсем то... Или надо уметь готовить? Подскажите.

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

Комментарии

Аватар пользователя Shizuku Shizuku 24 июля 2013 в 15:21

Не похожа, но принцип меня устраивает. Вот только с размерами полосы слайдера не могу разобраться. Она какая-то жёсткая, хоть бы под размер изображения подгонялась что-ли... А то картинки только "по верхам" крутит - остальное за кадром, а сам как был узкий - так и висит... ((

Вот модуль для подключения библиотеки: https://drupal.org/project/jcarousel

Аватар пользователя DD 85 DD 85 24 июля 2013 в 16:33

Исходя из выше сказанного, я надеюсь, вы понимаете что «уметь готовить» нужно всё. В том числе и с CSS у вас проблемы. Так вот Views Slideshow или Views Nivo Slider вам явно подходят больше. Может расскажите, что именно не получилось с настройкой Views Slideshow?

Аватар пользователя shevgeny shevgeny 24 июля 2013 в 17:16

Карусель - вообще не то, что вы показываете. И принцип у нее совсем другой. То, что на том сайте с легкостью решается посредством Views Slideshow. Выводите материалы в виде slideshow с нужными вам полями (а именно: изображение, заголовок, текст) и темизируйте.

Аватар пользователя shevgeny shevgeny 25 июля 2013 в 16:13

vortex wrote:
А эффект с выезжающим текстом это jquery?
как вообще эти эффекты из библиотеки jquery можно подключать?

jQuery. Сначала рекомендую установить jQuery Update и Liberaries (или как-то так). Ну и сами скрипты тех эффектов, которые вам нужны, через файл .info вашей темы (погуглите), а в html.tpl.php темы уже запускающие скрипты.

Аватар пользователя vortex vortex 29 июля 2013 в 17:50

shevgeny wrote:
vortex wrote:
А эффект с выезжающим текстом это jquery?
как вообще эти эффекты из библиотеки jquery можно подключать?

jQuery. Сначала рекомендую установить jQuery Update и Liberaries (или как-то так). Ну и сами скрипты тех эффектов, которые вам нужны, через файл .info вашей темы (погуглите), а в html.tpl.php темы уже запускающие скрипты.

CСтоит и updater и libraries

Пока не знаю как подключать эти эффекты и что менять в шаблоне. Хорошо бы какой пример.

Аватар пользователя shevgeny shevgeny 31 июля 2013 в 22:32

vortex wrote:
shevgeny wrote:
vortex wrote:
А эффект с выезжающим текстом это jquery?
как вообще эти эффекты из библиотеки jquery можно подключать?

jQuery. Сначала рекомендую установить jQuery Update и Liberaries (или как-то так). Ну и сами скрипты тех эффектов, которые вам нужны, через файл .info вашей темы (погуглите), а в html.tpl.php темы уже запускающие скрипты.

CСтоит и updater и libraries

Пока не знаю как подключать эти эффекты и что менять в шаблоне. Хорошо бы какой пример.


Чтобы дать конкретный пример, нужно знать конкретную задачу. Google вам в помощь Smile В сети масса примеров под конкретные задачи. Применение jQuery уже выходит за рамки данного сайта, так как к Drupal отношения не имеет. Так же, как и CSS-темизация, собственно.

Аватар пользователя shevgeny shevgeny 31 июля 2013 в 22:39

vortex wrote:
shevgeny wrote:
vortex wrote:
А эффект с выезжающим текстом это jquery?
как вообще эти эффекты из библиотеки jquery можно подключать?

jQuery. Сначала рекомендую установить jQuery Update и Liberaries (или как-то так). Ну и сами скрипты тех эффектов, которые вам нужны, через файл .info вашей темы (погуглите), а в html.tpl.php темы уже запускающие скрипты.

CСтоит и updater и libraries

Пока не знаю как подключать эти эффекты и что менять в шаблоне. Хорошо бы какой пример.


Но чтоб вам было проще понимать куда копать, вот, например:

jQuery(function(){  
  jQuery(".views-row").mouseover( function() { jQuery(".bh1", this).stop().animate({bottom: 0, top: 0 }, 300)});
  jQuery(".views-row").mouseout( function() { jQuery(".bh1", this).stop().animate({bottom: "51%", top: "50%" }, 500)});
});

- я применял на одном из проектов для анимации слоя-подложки под текстовым полем в выводе вьюз. Он размещается в html.tpl.php (ну или соответствующем файле вашей темы) в теге head. Наипростейший скрипт анимации. Какой нужен конкретно вам - ищите, изучайте логику работы jQuery, пишите свой.

Аватар пользователя Shizuku Shizuku 24 июля 2013 в 21:14

"DD 85" wrote:
что именно не получилось

Рассказываю, что было "не так" в варианте с Views SlideShow.
Самое неприятное: когда меняется слайд (эффект cover), то следующая по очереди картинка наползает сверху на старую, при этом не стирает их, а ложится сверху. И новый заголовок который "влетает" вместе с новой картинкой, тоже ложится поверх старого заголовка, не стирая его... В итоге получаем нагромождение непонятных букв.

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

Теперь про Nivo Slider.
Он в упор не видел моего image поля! И кеш чистил - и так, и сяк... Но вот когда сел писать сюда - вдруг появилось поле, и я смог потестить. Nivo Slider хорош - ничего не скажешь! У него нет проблем с размерами, слайд легко растягивается как под картинку, так и под изменение размеров страницы. Но в последнем случае страницу требуется перезагрузить, автоматом не перестроит. Недостатки такие: не получается сделать картинку ссылкой. Да, я знаю, в настройках формата можно указать какое из полей сделать ссылкой - но это не работает, ссылкой все-равно остаётся заголовок! Sad Еще слайдер заметно притормаживает.

Аватар пользователя DD 85 DD 85 24 июля 2013 в 21:45

Похоже, скрин сделан с предпросмотра на странице редактирования вьюхи. В нём содержимое всегда отображается иначе.
Что касается эффекта, попробуйте scrollHorz.
А по наложению заголовков – это не вопрос, а издевательство с вашей стороны. Решается с помощью CSS и НЕ НА СТРАНИЦЕ РЕДАКТИРОВАНИЯ.

Аватар пользователя Shizuku Shizuku 25 июля 2013 в 16:03

"DD 85" wrote:
Похоже, скрин сделан с предпросмотра на странице редактирования вьюхи.

С него, родимого. Но в рабочем режиме картинка такая же. По поводу заголовков, издеваться мне не интересно, мне интересно пофиксить. Я так считаю, что если из коробки работает так, как на скрине - то это явно нештатная ситуация, а значит требует рукоприкладства. Что мне делать? Лезть в модуль и искать там заветные стили? Рискну предположить, что в данном случае какой-то из классов элемента добавляется к действующему, не изменяя его. Бррр... Отладка будет тяжкой.

scrollHorz - попробую, спасибо.

Аватар пользователя DD 85 DD 85 25 июля 2013 в 14:06

Какой плагин? Это вполне нормальная, рабочая и традиционная процедура – вёрстка. Легко решается дописыванием стилей в /sites/all/themes/ваша/style.css. Такое ощущение, что это ваш первый сайт.
Что тут ещё добавить? Выкладывайте в сеть давайте ссылку… Остаётся только верстать за вас.

Аватар пользователя shevgeny shevgeny 25 июля 2013 в 16:16

Кстати, ниво-слайдер - красив и прост в настройке, но НЕ РЕКОМЕНДУЮ! Браузер изера загрузит так, что если комп у него слабенький, всё подвиснуть может. У ниво логика странная.

Аватар пользователя DD 85 DD 85 25 июля 2013 в 17:30

"shevgeny" wrote:
jQuery

Я бы сделал проще, с помощью стилей.
"shevgeny" wrote:
Браузер изера загрузит так, что если комп у него слабенький, всё подвиснуть может.

Не согласен.

Аватар пользователя shevgeny shevgeny 25 июля 2013 в 20:01

DD 85 wrote:
"shevgeny" wrote:
jQuery

Я бы сделал проще, с помощью стилей.
"shevgeny" wrote:
Браузер изера загрузит так, что если комп у него слабенький, всё подвиснуть может.

Не согласен.

С помощью стилей не везде работать будет. Но если бы не жесткий регламент ТЗ, я бы тоже делал стилями.
А вот ниво я на своей шкуре проверял. Он очень грузит CPU.

Аватар пользователя Shizuku Shizuku 28 июля 2013 в 22:16

"Shizuku" wrote:
Также не нашел, где настроить, чтобы применялся какой-нибудь отдельный эффект для заголовка, чтобы было примерно как на баннере по ссылке в моем вопросе.

Имеется в виду, что анимируется не только картинка, но и подпись к ней!

Для примера также можно посмотреть на опции слайдера jquery.skitter: там есть возможность отображения Label и есть отдельные эффекты анимации для текста Label. В рабочем виде здесь: ozera.info
Для Drupal подобного не нашел, а вписывать JS прямо в шаблон как-то неохота. Если только на крайний случай.

Аватар пользователя DD 85 DD 85 28 июля 2013 в 23:35

Вообще-то мы это уже здесь обсудили. Я рекомендую сделать выезжание текста с помощью стилей. Это самый простой и современный способ.
transition

Аватар пользователя Shizuku Shizuku 29 июля 2013 в 0:33

Значит замерить абсолютный позишн, выбрать эффект - скорее всего это будет что-то из не совсем кроссбраузерного CSS3, и прописать стиль для поля с заголовком в View. И будет полезно вообще скрыть его, чтобы не "прыгал" с места в карьер.

Аватар пользователя shevgeny shevgeny 31 июля 2013 в 22:42

toshic wrote:
А как научиться с квери работать?

А как научиться читать, писать, ходить в конце концов? Делайте первые шаги. Руководств множество. Очень хорошая статья - http://dreamhelg.ru/2010/01/jquery-animation-a-7-step-program/

Аватар пользователя Kaylang Kaylang 1 августа 2013 в 0:02

"Shizuku" wrote:
Рассказываю, что было "не так" в варианте с Views SlideShow.
Самое неприятное: когда меняется слайд (эффект cover), то следующая по очереди картинка наползает сверху на старую, при этом не стирает их, а ложится сверху. И новый заголовок который "влетает" вместе с новой картинкой, тоже ложится поверх старого заголовка, не стирая его... В итоге получаем нагромождение непонятных букв.

Я тоже сталкивался с этим. http://www.drupal.ru/node/100212

Решалось только заменой эффекта перехода.

Аватар пользователя toshic toshic 1 августа 2013 в 0:52

"shevgeny" wrote:

"shevgeny" wrote:
А как научиться читать, писать, ходить в конце концов? Делайте первые шаги. Руководств множество. Очень хорошая статья - http://dreamhelg.ru/2010/01/jquery-animation-a-7-step-program/[/quote]
Грацио) ))

Аватар пользователя toshic toshic 1 августа 2013 в 18:06

Чтобы не создавать еще одну тему, спрошу здесь.
Сделал простенький слайдер на Views Slideshow http://recamp.ru/, пока временно устраивает,пока кун-фу (query) еще не освоил и есть одна проблемка. При уменьшении экрана текст навигатора сьезжает за картинку влево. Я прописывал им фиксированную ширину в пикселях так и прописывалв процентах, но все равно не масштабируется и получается зело некрасиво.

Аватар пользователя vortex vortex 2 августа 2013 в 15:08

Так и должно быть. Он (слайдер) вычисляет длину при каждом обновлении. Я делал фиксированную длину блока (т.е. размер окна не может повлиять на слайдер). Тут где-то предлагали вариант с резиновой весрткой (по тегу slider можно посмотреть).

Аватар пользователя tlito tlito 27 августа 2015 в 13:33

я нашел такое слайдшоу : http://dnt.net.ua/ - там используется skitter и есть хороший эффект появления текста
http://www.skitter-slider.net/ - но тут я не нашел как с текстом работать
и вообще умеете ли эта библиотека стили показа текста делать?