Создание responsive slider (slideshow) с помощью модуля Views Slideshow

Все больше и больше пользователей интернет заходят в него с мобильных устройств. По этому все на сайте должно быть responsive, адаптировано под мобильные устройства. Но когда ставишь модуль Views Slideshow,  то видишь position: absolute; и заданную ширину больше 800 пикселей. Чтобы это исправить, нужно пропатчить модуль Views Slideshow:

https://www.drupal.org/node/1510526
https://www.drupal.org/files/issues/views-slideshow-cycle-responsive_0.patch 

 Вы можете использовать консольную комманду patch, чтобы применить патч или сделать это вручную добавив все строчки где есть + и удалить все строчки где есть -. В данном случае нам нужно только добавить эти строки:

В конец файла views_slideshow_cycle/js/views_slideshow_cycle.js:

  /**
   * Responsive support from
   * https://www.drupal.org/node/1510526#comment-7865577
   */
(function($) {
  $(window).resize(function(){
    $('.views_slideshow_cycle_main').each(function(){
      var cycleMain = $(this);
      var img_width = 0,
          img_height = 0;
      var clearCSS = {width: "auto", height: "auto"};
      var cycle = cycleMain.children('.views-slideshow-cycle-main-frame');
      cycleElements = cycle.data("cycle.opts");
      cycle.css(clearCSS);
      cycleMain.find('.views-slideshow-cycle-main-frame-row').each(function(i){
        $(this).css(clearCSS);
        var tmp_img_width = $(this).width();
        var tmp_img_height = $(this).height();
        if(tmp_img_width > img_width)
          img_width = tmp_img_width;
        if(tmp_img_height > img_height)
          img_height = tmp_img_height;
        cycleElements.elements[i].cycleW = tmp_img_width;
        cycleElements.elements[i].cycleH = tmp_img_height;
        $(this).css({width: tmp_img_width, height: tmp_img_height});
      });
      cycleMain.height(img_height);
      cycle.css({width: img_width, height: img_height});
      cycle.data("cycle.opts.elements", cycleElements);
    });
  });
 })(jQuery);

В конец файла views_slideshow_cycle/views_slideshow_cycle.css:

.views_slideshow_cycle_main {
  width: 100%;
  float: left;
}
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame {
  width: 100% !important;
  height: auto;
}
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame-row {
  width: 100% !important;
  height: auto;
}
.views_slideshow_cycle_main .field-content {
  max-width: 100%;
  width: 100%;
}
.views_slideshow_cycle_main .field-content img {
  max-width: 100%;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

Не забудьте, что при обновление модуля ваши изменения в модуле затрутся и патч нужно применить снова. Поэтому храните все патчи в папке

sites/all/patches

Скачать: 

Добавить комментарий

Войти, используя Loginza Google Account Yandex Mail.ru Vkontakte Facebook

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.