[Решено] Карусель тизеров с возможностью скроллинга колесиком мышки (mousewheel)

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

Аватар пользователя Photoshopper Photoshopper 24 июля 2013 в 18:06

Мне нужно реализовать возможность прокрутки тизеров с помощью колесика мышки как здесь http://tympanus.net/Development/CircularContentCarousel/

Саму карусель не составит труда сделать с помощью модуля Flex Slider, но нигде не вижу возможности прокрутки колесиком мышки.

Суть вопроса вот в чем. Если ли готовое решение того, что я хочу? Если нет подскажите на сколько сложно это реализовать. Могу заплатить за реализацию.

Комментарии

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

"Photoshopper" wrote:
И зачем вы мне это прислали?

На этой странице есть волшебная кнопочка “Download source”, кликнув на которую можно скачать не менее волшебный архив. В этом архиве все необходимые вам скрипты и даже демо страничка. На её примере подключайте скрипты к вашей вьюхе.

Аватар пользователя Photoshopper Photoshopper 25 июля 2013 в 17:10

DD 85 wrote:
"Photoshopper" wrote:
И зачем вы мне это прислали?

На этой странице есть волшебная кнопочка “Download source”, кликнув на которую можно скачать не менее волшебный архив. В этом архиве все необходимые вам скрипты и даже демо страничка. На её примере подключайте скрипты к вашей вьюхе.

Можете подробней объяснить? А то я когда-то пробовал, что-то подобное сделать и не получилось.

Мне нужно создать Представление(Views). Вывести допустим 10 тизеров. Вывести представление в блок, а затем через темизацию как-то добавлять разметку карусели и цикл?

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

Нет там никакого цикла! Достаточно тех скриптов, что в архиве.
А так всё верно. Изучите демо index.html
Добавьте к полям вьюхи требуемые классы class="ca-item ca-item-1", а также скопируйте к себе и при необходимости поправьте стили из соответствующей папки архива.

Аватар пользователя Khimutin Khimutin 17 апреля 2014 в 11:42

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

Uncaught TypeError: undefined is not a function

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

Аватар пользователя Photoshopper Photoshopper 17 апреля 2014 в 13:47

http://tympanus.net/codrops/2011/08/16/circular-content-carousel

Инструкция:
1. Создаем Views и выводим список элементов

Формат: Неформатированный список (В настройках "Класс строки - ca-item")
Показать: Поля

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

Расширенный - ПРОЧИЕ - Тема оформления - Вывод отображения: views-view--objects--block.tpl.php (У вас соответственно вместо object свое название представления)

В корне темы создаем файл views-view--objects--block.tpl.php с таким содержимым

<?php<div class="<?php print $classes?>">
  <?php print render($title_prefix); ?>
  <?php if ($title): ?>
    <?php print $title?>
  <?php endif; ?>
  <?php print render($title_suffix); ?>
  <?php if ($header): ?>
    <div class="view-header">
      <?php print $header?>
    </div>
  <?php endif; ?>

  <?php if ($exposed): ?>
    <div class="view-filters">
      <?php print $exposed?>
    </div>
  <?php endif; ?>

  <?php if ($attachment_before): ?>
    <div class="attachment attachment-before">
      <?php print $attachment_before?>
    </div>
  <?php endif; ?>

  <div id="ca-container" class="ca-container">
  <?php if ($rows): ?>
    <div class="view-content">
      <?php print $rows?>
    </div>
  <?php elseif ($empty): ?>
    <div class="view-empty">
      <?php print $empty?>
    </div>
  <?php endif; ?>
  </div>

  <?php if ($pager): ?>
    <?php print $pager?>
  <?php endif; ?>

  <?php if ($attachment_after): ?>
    <div class="attachment attachment-after">
      <?php print $attachment_after?>
    </div>
  <?php endif; ?>

  <?php if ($more): ?>
    <?php print $more?>
  <?php endif; ?>

  <?php if ($footer): ?>
    <div class="view-footer">
      <?php print $footer?>
    </div>
  <?php endif; ?>

  <?php if ($feed_icon): ?>
    <div class="feed-icon">
      <?php print $feed_icon?>
    </div>
  <?php endif; ?>

</div><?php /* class view */ ?>

В коде я лишь добавил обертку <div id="ca-container" class="ca-container">...</div>

3. Подключаем все скрипты, стили "Circular Content Carousel"
Очень большую роль играет версия Jquery. Если поставить ниже или выше, чем версия, которая лежит в исходниках Circular Content Carousel, то скрипт либо перестанет работать, либо появится некорректная прокрутка. Я обычно подключаю Circular Content Carousel перед </body>

4. Вносим изменения в файле jquery.contentcarousel.js

Находим 160 строку
$wrapper                = $el.find('div.ca-wrapper'),

и меняем на

$wrapper                = $el.find('div.view-content'),

На этом все. Надеюсь ничего не забыл.

Аватар пользователя Khimutin Khimutin 17 апреля 2014 в 14:15

спасибо! Все делал точно так же, за исключением обертки в блоке. Я в page.tpl оборачивал.
Сделал ВСЕ по инструкции - та же ошибка:
Uncaught TypeError: undefined is not a function
Sad