Вы здесь

Слайдер (галерея) с картинками в background-image

0

Кто-то может подсказать примеры галерей для Drupal 7, в которых изображение выгружается в css свойства элемента списка в background-image?

От галереи нужна следующая реализация:
Допустим в ней будет список ul с вложенными li (или же все на дивах).

Мне нужно выводить картинки через css в background-image для каждого li

<ul>
  <li class="slide1"></li>
  <li class="slide2"></li>
  <li class="slide3"></li>
  ...
</ul>

    CSS:
    .slide1{
      background-image:url(path/to/image1.jpg);
    }
    .slide2{
      background-image:url(path/to/image2.jpg);
    }
    .slide3{
      background-image:url(path/to/image3.jpg);
    }
    ....

Сейчас на сайте используем Owl carousel, но он выводит все картинки в DOM-дерево. А надо в CSS. Можно ли его перенастроить? Или предложите другие способы решения.

Руками можно конечно все написать, но тогда клиент не сможет администрировать набор картинок в слайдере.
А писать целый модуль, долго и дорого.

Спасибо.

Версия Drupal: 
7.x
Категория: 
HTML/CSS
Связанные проекты: 
Owl Carousel
Вопрос задан 21.10.2015 - 17:56

Спрошу. А зачем такое решение нужно?
Как защита от безнаказанного копирования изображений пользователями? Просто интересно ;)

Комментарий оставлен 22.10.2015 - 13:20

Основная задача была в идее верстки. Когда изображение выводится в DOM, то на разных устройствах изображение вписывается по ширине экрана. Меняется ширина изображение - пропорционально меняется и высота. Из-за чего были косяки с версткой. А вот когда мы задаем изображение через атрибут в фон, тогда мы можем задать фиксированную высоту блока и отцентрировать фон. Тогда на разных устройствах картинка будет просто обрезаться по краям но не менять своей высоты. Так сделано тут: www.tmall.com

Комментарий оставлен 24.10.2015 - 05:12

Ответы

3

Переопределить шаблон

<li style="background-image:url(path/to/image1.jpg);"></li>
<li style="background-image:url(path/to/image2.jpg);"></li>
<li style="background-image:url(path/to/image3.jpg);"></li>
Ответ дан 21.10.2015 - 19:56

Вы про шаблон в owl carousel?
Не нашел в модуле шаблонов. Выдача формируется в рабочем файле модуля, поэтому после обновления модуля все отвалится.
Я вот думал сделать то, что вы написали прямо во views. Слайды запихиваю не картинками, а через поле File. Затем во вьюхе вывожу только путь к файлу.

<div style="background-image: url([url]);"></div>

Только во вьюхе это не работает. Я давно уже заметил, что атрибут style="" у элементов во вьюс (если руками прописываешь) полностью отваливается и не выводится.
Может там есть какая-то настройка, которая поможет включить поддержку атрибута style у тегов...

Комментарий оставлен 22.10.2015 - 04:29

В целом можно сделать через шаблон views. Больше нет решений?

Комментарий оставлен 22.10.2015 - 04:54