24 июля 2013 в 13:58
Как сделать слайдер как на этом сайте?
Пробовал по инструкции Views SlideShow - не совсем то... Или надо уметь готовить? Подскажите.
Слайды должны быть расположены на всю ширину блока, и "листаться" либо по одному кадру-ссылке, либо полосой по 3-4 кадра-ссылки на страницу. Если при этом есть возможность вручную пролистнуть - замечательно. Еще хотелось бы, чтобы поверх картинки выезжал текст - либо из заголовка связаной ноды, либо из анонса
Комментарии
такие слайдеры, под которые не готовы модули, проще всего спрограммировать.
Нашел подходящий модуль и библиотеку: http://sorgalla.com/jcarousel/, закручиваю гайки.
Как поменять длину и ширину этой полоски слайдера? Уж больно узкая. Нигде не могу найти настройки...
эта каруселька не похожа на тот слайдер на который ссылка в первом посте...
Не похожа, но принцип меня устраивает. Вот только с размерами полосы слайдера не могу разобраться. Она какая-то жёсткая, хоть бы под размер изображения подгонялась что-ли... А то картинки только "по верхам" крутит - остальное за кадром, а сам как был узкий - так и висит... ((
Вот модуль для подключения библиотеки: https://drupal.org/project/jcarousel
размеры слайдера указываются с помощью css. ссылку на сайт тогда и помощи больше будет.
Исходя из выше сказанного, я надеюсь, вы понимаете что «уметь готовить» нужно всё. В том числе и с CSS у вас проблемы. Так вот Views Slideshow или Views Nivo Slider вам явно подходят больше. Может расскажите, что именно не получилось с настройкой Views Slideshow?
Карусель - вообще не то, что вы показываете. И принцип у нее совсем другой. То, что на том сайте с легкостью решается посредством Views Slideshow. Выводите материалы в виде slideshow с нужными вам полями (а именно: изображение, заголовок, текст) и темизируйте.
А эффект с выезжающим текстом это jquery?
как вообще эти эффекты из библиотеки jquery можно подключать?
jQuery. Сначала рекомендую установить jQuery Update и Liberaries (или как-то так). Ну и сами скрипты тех эффектов, которые вам нужны, через файл .info вашей темы (погуглите), а в html.tpl.php темы уже запускающие скрипты.
CСтоит и updater и libraries
Пока не знаю как подключать эти эффекты и что менять в шаблоне. Хорошо бы какой пример.
Чтобы дать конкретный пример, нужно знать конкретную задачу. Google вам в помощь
Но чтоб вам было проще понимать куда копать, вот, например:
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, пишите свой.
Рассказываю, что было "не так" в варианте с Views SlideShow.
Самое неприятное: когда меняется слайд (эффект cover), то следующая по очереди картинка наползает сверху на старую, при этом не стирает их, а ложится сверху. И новый заголовок который "влетает" вместе с новой картинкой, тоже ложится поверх старого заголовка, не стирая его... В итоге получаем нагромождение непонятных букв.
Также не нашел, где настроить, чтобы применялся какой-нибудь отдельный эффект для заголовка, чтобы было примерно как на баннере по ссылке в моем вопросе.
Теперь про Nivo Slider.
Еще слайдер заметно притормаживает.
Он в упор не видел моего image поля! И кеш чистил - и так, и сяк... Но вот когда сел писать сюда - вдруг появилось поле, и я смог потестить. Nivo Slider хорош - ничего не скажешь! У него нет проблем с размерами, слайд легко растягивается как под картинку, так и под изменение размеров страницы. Но в последнем случае страницу требуется перезагрузить, автоматом не перестроит. Недостатки такие: не получается сделать картинку ссылкой. Да, я знаю, в настройках формата можно указать какое из полей сделать ссылкой - но это не работает, ссылкой все-равно остаётся заголовок!
Похоже, скрин сделан с предпросмотра на странице редактирования вьюхи. В нём содержимое всегда отображается иначе.
Что касается эффекта, попробуйте scrollHorz.
А по наложению заголовков – это не вопрос, а издевательство с вашей стороны. Решается с помощью CSS и НЕ НА СТРАНИЦЕ РЕДАКТИРОВАНИЯ.
С него, родимого. Но в рабочем режиме картинка такая же. По поводу заголовков, издеваться мне не интересно, мне интересно пофиксить. Я так считаю, что если из коробки работает так, как на скрине - то это явно нештатная ситуация, а значит требует рукоприкладства. Что мне делать? Лезть в модуль и искать там заветные стили? Рискну предположить, что в данном случае какой-то из классов элемента добавляется к действующему, не изменяя его. Бррр... Отладка будет тяжкой.
scrollHorz - попробую, спасибо.
Какой плагин? Это вполне нормальная, рабочая и традиционная процедура – вёрстка. Легко решается дописыванием стилей в /sites/all/themes/ваша/style.css. Такое ощущение, что это ваш первый сайт.
Что тут ещё добавить? Выкладывайте в сеть давайте ссылку… Остаётся только верстать за вас.
Кстати, ниво-слайдер - красив и прост в настройке, но НЕ РЕКОМЕНДУЮ! Браузер изера загрузит так, что если комп у него слабенький, всё подвиснуть может. У ниво логика странная.
Я бы сделал проще, с помощью стилей.
Не согласен.
С помощью стилей не везде работать будет. Но если бы не жесткий регламент ТЗ, я бы тоже делал стилями.
А вот ниво я на своей шкуре проверял. Он очень грузит CPU.
А как насчет вопроса с дополнительной Label Animation?
Конкретизируйте.
Имеется в виду, что анимируется не только картинка, но и подпись к ней!
Для примера также можно посмотреть на опции слайдера jquery.skitter: там есть возможность отображения Label и есть отдельные эффекты анимации для текста Label. В рабочем виде здесь: ozera.info
Для Drupal подобного не нашел, а вписывать JS прямо в шаблон как-то неохота. Если только на крайний случай.
Вообще-то мы это уже здесь обсудили. Я рекомендую сделать выезжание текста с помощью стилей. Это самый простой и современный способ.
transition
Значит замерить абсолютный позишн, выбрать эффект - скорее всего это будет что-то из не совсем кроссбраузерного CSS3, и прописать стиль для поля с заголовком в View. И будет полезно вообще скрыть его, чтобы не "прыгал" с места в карьер.
А как научиться с квери работать?
А как научиться читать, писать, ходить в конце концов? Делайте первые шаги. Руководств множество. Очень хорошая статья - http://dreamhelg.ru/2010/01/jquery-animation-a-7-step-program/
Я тоже сталкивался с этим. http://www.drupal.ru/node/100212
Решалось только заменой эффекта перехода.
Может грациЕ?
Сорри, за офф-топ.
Спасибо, но мне больше нравится Грацио)
Чтобы не создавать еще одну тему, спрошу здесь.
Сделал простенький слайдер на Views Slideshow http://recamp.ru/, пока временно устраивает,пока кун-фу (query) еще не освоил и есть одна проблемка. При уменьшении экрана текст навигатора сьезжает за картинку влево. Я прописывал им фиксированную ширину в пикселях так и прописывалв процентах, но все равно не масштабируется и получается зело некрасиво.
Попробуй обновить страницу после уменьшения экрана.
Так и должно быть. Он (слайдер) вычисляет длину при каждом обновлении. Я делал фиксированную длину блока (т.е. размер окна не может повлиять на слайдер). Тут где-то предлагали вариант с резиновой весрткой (по тегу slider можно посмотреть).
я нашел такое слайдшоу : http://dnt.net.ua/ - там используется skitter и есть хороший эффект появления текста
http://www.skitter-slider.net/ - но тут я не нашел как с текстом работать
и вообще умеете ли эта библиотека стили показа текста делать?