Адаптированные изображения в Слайдере - SlidesJs

Вопросы-ответы / 21 февраля 2015

Подскажите пожалуйста, как можно адаптировать изображения в слайдере MaxSite CMS SlidesJs?

Дело в том, что изображения помещённые в слайдер при масштабировании начинаю обрезаться:

Пробовал различные способы CSS (max-width)- но они не срабатывают.

Может кто то сталкивался с подобной настройкой слайдера?

Дмитрий (lider30) 25 3014

Еще записи по теме

Комментариев: 25

Илья Земсков (эксперт по MaxSite CMS) | 2015-02-21 в 13:21:27

Скорее всего вы неправильно выбрали точку приложения ваших модификаций в css или вы неверно понимаете (и ожидаете от него) задачу свойства max-width.
Евгений | 2015-02-21 в 13:27:30
```
max-width:100%
```
обычно решает все проблемы. Но, всегда стоит смотреть зависимость селекторов в css. киньте ссылку на ваш сайт.
Дмитрий (lider30) | 2015-02-21 в 15:57:04

Сайт пока на локальном сервере, хотелось бы использовать именно SlidesJs, пробовал max-width:100% в разных сочетаниях. Nivo-Slides адаптивен, но не так гибок как SlidesJs и в прошлых проектах приходилось останавливаться на нём. Чуть позже выложу сайт в сеть.

Евгений | 2015-02-21 в 16:05:14

lider30, попробуйте чуть изменить компонент файл компонента slidesjs.php строка 111:

<?= '<a href="' . trim($slide['link']) . '"><img src="' . trim($slide['img']) . '" alt=""></a>' ?>
измените на
<?= '<a href="' . trim($slide['link']) . '"><img src="' . trim($slide['img']) . '" alt="" class="my_img"></a>' ?>

css:

img.my_img{max-width:100%;}

Дмитрий (lider30) | 2015-02-21 в 16:17:58

Причём, когда в опциях слайдера оставляю одно изображение и применяю к блоку соответствующие настройки CSS, то слайдер начинает адаптироваться: http://pikucha.ru/iecMY http://pikucha.ru/iecMZ

Как только добавляю второй слайдер - изображение сползает, обрезается
Andrey-SysAdmin | 2015-02-21 в 16:25:48
А подробнее про

Как только добавляю второй слайдер..

Что касается изображений
```
div.slidesjs div.slide img {
height: 100%;
width: 770px;
}
```
Дмитрий (lider30) | 2015-02-21 в 16:38:40
А подробнее про

Когда в опциях слайдера SlidesJ в панели админа добавляю слайдер - когда их становится больше одного, адаптивность при:
```
div.slidesjs div.slide img {
height: auto;
max-width: 100%;
}
```
исчезает

Вышеперечисленные манипуляции проблемы не решают, но спасибо за вашу отзывчивость.

Работаю над дизайном, как сайт появится в сети - будем разговаривать предметно
Andrey-SysAdmin | 2015-02-21 в 16:47:08

Чуть мозг не сломал...

Может речь идёт про добавление слайда, а не слайдера?
Дмитрий (lider30) | 2015-02-21 в 16:48:43

Согласен - не правильно выразился - СЛАЙД.
Andrey-SysAdmin | 2015-02-21 в 16:50:41

Коротко по коду.

height: auto; -- будет автоматом расширяться картинка по высоте относительно ширины.

max-width: 100%; -- смысл тут какой заложен?

по большому счету нет ограничений, чтобы картинка вписалась в рамки
Дмитрий (lider30) | 2015-02-21 в 17:02:03

height: auto - это не окончательно решение, основное это max-width: 100% - задаёт ограничение при увеличении масштаба блока с картинкой не давая ей выпадать соответствуя ширине его контейнера, обрезаться.

Когда слайд один, то ограничение срабатывает, когда добавляю второй слайд ограничение не действует.
Andrey-SysAdmin | 2015-02-21 в 17:12:34

По моему скромному разумению, слайдер предполагает картинки определённого размера. Возможно, имеет смысл изначально их подготовить. Так же задать жестко размеры в css. И тогда не будет заметно, если они будут растягиваться/сжиматься на несколько px.

Но это сугубо моё имхо, т.к. не хватает данных по конечному использованию слайдера.

Можно покопаться в стилях SlidesJs слайдера -- http://hospek.com
Дмитрий (lider30) | 2015-02-21 в 17:24:19

http://hospek.com - лишён адаптивности. С изображениями поколдовать можно конечно и вывести слайдер на переломном моменте (когда существенная часть картинки начнёт обрезаться, к примеру на 1000 px) в display: none, но буду стремиться к гибкости. Пока разговор получается не о чём, выложу сайт - дам знать.
Andrey-SysAdmin | 2015-02-21 в 17:31:57

Адаптивности под что?

Ну да, там с 800 до 660px доходит, дальше ограничение ширины самого шаблона стоит.
Дмитрий (lider30) | 2015-02-21 в 17:42:02

Адаптивности по мобильные устройства. Проверьте сайт hospek.com на http://ami.responsivedesign.is
Andrey-SysAdmin | 2015-02-21 в 17:58:03

Телефон и гугл инструменты разработчика совсем другое показывают. Это так, для инфы
Дмитрий (lider30) | 2015-02-21 в 18:20:58

Гугл инструмент брешит: http://pikucha.ru/iecPx

На смартофоне отображается не верно.
Евгений | 2015-02-22 в 12:00:45

медиа запросы наш костыль для адаптивности. А грамотно продуманный дизайн на уровне css решит все проблемы.

http://www.responsinator.com/?url=http://altermetal.net
Евгений | 2015-02-22 в 12:07:20

lider30 flexslider мне лучше лично. Я его юзаю. отличий особо нет.
Дмитрий (lider30) | 2015-02-25 в 16:38:14

1. Подскажите пожалуйста, как можно вставлять image-nivo-slider в конкретном месте выборочной страницы? Если это можно сделать с помощью УШКИ, то какой код нужно взять для вставки при формировании УШКИ?

2. И как можно создать несколько разных слайдеров image-nivo-slider для использования? - получается нужно создать копию компонента image-nivo-slider с другими ID в коде и для него опции?
Илья Земсков (эксперт по MaxSite CMS) | 2015-02-25 в 16:43:50

Дмитрий, просто так в любое место страницы nivo slider не вставишь. Я делал плагин для таких задач. Там можно было специальный бб-код использовать для записей и виджет для сайдбара. Уже почти опубликовал эту разработку, но отвлекли Может за время праздников опубликую. Ну или может кто-нибудь подскажет сейчас как иначе решить вашу задачу.
Дмитрий (lider30) | 2015-02-26 в 01:35:37

Задача у меня просто не стандартная: с выводом image-nivo-slider на главной понятно - вывели. Теперь нужно image-nivo-slider с подобным расположением, со своим набором изображений вывести на странице с записью.

Я так понимаю:

1. Клонируем компонент

2. В опцию клонированного image-nivo-slider добавляем окно с указанием ID записи, либо этот ID нужно прописать где то в теле компонента?
Илья Земсков (эксперт по MaxSite CMS) | 2015-02-27 в 10:24:47
Дмитрий, нашёл таки код, которым я заставил slidejs стать адаптивным. У меня этот код размещается в файле \css-less\components\slidesjs.less папки шаблона.
```
@media @IPAD
{
 div.slidesjs {
  width: 100%;
  height: auto;
  .wrap {
   width: 100%;
  }
 }
 div.slidesjs div.slides_container {
  width: 100%;
  height: auto;
 }
 div.slidesjs .slides_control {
     width: 100% !important;
  div.slide {
   width: 100%;
  
   img {
     width: 100%;
   }
   div.r2 {
    bottom: 0;
   }
  }
 }
}
@media @MOBILE
{
 div.slidesjs {
  display: none;
 }
}
```
Для совсем мелких разрешений решили выключить слайдер, ибо совсем уж картинки измельчали.

В общем, надеюсь, что вам мой код поможет.
Дмитрий (lider30) | 2015-02-27 в 14:26:49

Илья я ещё до использования компилятора less не дорос, всё понял кроме

div.r2 {

bottom: 0;

}

Это что описываем в CSS?
Илья Земсков (эксперт по MaxSite CMS) | 2015-02-28 в 04:19:00

Дмитрий, LESS - это продвинутая версия css. Освоить его можно буквально за час, если знаете css и вам знакомо программирование хотя бы на php. Большая часть less-кода выглядит именно как css (я про приведённый вами фрагмент). Ну разве ещё только добавляется вложенность (позволяет сократить описание селекторов) и появляются переменные, а также подобие функций. В общем, очень рекомендую потратить немного времени на освоение.