1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Решение проблем

чем можно сделать карсувель вида < о 0 o >

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

Аватар пользователя kpuk kpuk 26 апреля 2014 в 21:56

Есть ли модуль позволяющий создать карусель похожую на приложенную в картинке или же придётся самому клепать из js?
Основная идея чтобы центральное изображение было больше остальных

ВложениеРазмер
Иконка изображения example.jpg40.24 КБ

Комментарии

Аватар пользователя kpuk kpuk 27 апреля 2014 в 12:20

"kosHta" wrote:
https://drupal.org/project/flexslider[/quote]
я так и не смог на нём подобное даже изобразитью
"otolaa" wrote:

модуль views_roundabout https://drupal.org/project/views_roundabout
библиотека jquery.roundabout http://fredhq.com/projects/roundabout

а вот тут изобразить удалось, но задаеть ему размеры большого и малых изображений не удалось.
кроме того у меня если кликнуть по изображению должна вылезти чтото типа лайтбокса с видео(во вьюсе указаны урлы к ютубу), а при нажатии тут просто переходит на ютуб и не отрабатывает rel="lightvideo"
Есть ещё какиенить варианты?

Аватар пользователя kpuk kpuk 28 апреля 2014 в 23:09

Потратил кучу времени на поиски, плюнул и переделал замечательный jCarousel модуль.
Если кому понадобится, то основной целью было добавить класс для элемента который находится по центру. Ну а дальше или просто уменьшать/увеличивать изображения или добавлять оба, и большое и маленькое во вьюсу и прятать через css неугодные.
Решение:
1. Находим в jquery.jcarousel.js метод scroll (строка 517) и дописываем вначале метода после if (this.locked || this.animating) {return;}:

$('ul.jcarousel > li').each(function() {
    $(this).removeClass('center');
});

и в конце метода

off = (this.options.visible%2==0)?(this.options.visible/2):((this.options.visible - this.options.scroll)/2);
$('ul.jcarousel > li.jcarousel-item-'+(i+off)).addClass('center');
for (k=i;k<i+this.options.visible;k++) {
  $('ul.jcarousel > li.jcarousel-item-'+k).addClass('visibled');
}

2. Т.к. в модуле зашито использование jquery.jcarousel.min.js то или переименовываем jquery.jcarousel.js в jquery.jcarousel.min.js или правим модуль на использование jquery.jcarousel.js

Теперь у центрального слайда появится класс canter, и у всех видимых visibled, которые будут премещаться в центральные слайды.

upd: поправил размешение нового кода. чтобы не съезжала карусель