На время проведения реконструкции сайт переведён в режим "ТОЛЬКО ЧТЕНИЕ" (Read only). Приносим свои извинения!
MaxHub
Полезности по Maxsite CMS
Меню

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

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

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

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

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

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

Дмитрий (lider30) 25 4639
Еще записи по теме
Комментариев: 25
  1. Илья Земсков (эксперт по MaxSite CMS) | 2015-02-21 в 13:21:27

    Скорее всего вы неправильно выбрали точку приложения ваших модификаций в css или вы неверно понимаете (и ожидаете от него) задачу свойства max-width.

  2. Евгений | 2015-02-21 в 13:27:30
    max-width:100%
    обычно решает все проблемы. Но, всегда стоит смотреть зависимость селекторов в css. киньте ссылку на ваш сайт.

  3. Дмитрий (lider30) | 2015-02-21 в 15:57:04

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

  4. Евгений | 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%;}
  5. Дмитрий (lider30) | 2015-02-21 в 16:17:58

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

    Как только добавляю второй слайдер - изображение сползает, обрезаетсяrolleyes

  6. Andrey-SysAdmin | 2015-02-21 в 16:25:48

    А подробнее про

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

    Что касается изображений

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

    Когда в опциях слайдера SlidesJ в панели админа добавляю слайдер - когда их становится больше одного, адаптивность при: 

    div.slidesjs div.slide img {
height: auto;
max-width: 100%;
}
    исчезает

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

    Работаю над дизайном, как сайт появится в сети - будем разговаривать предметноwink

  8. Andrey-SysAdmin | 2015-02-21 в 16:47:08

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

    Может речь идёт про добавление слайда, а не слайдера?

  9. Дмитрий (lider30) | 2015-02-21 в 16:48:43

    Согласен - не правильно выразился - СЛАЙД.

  10. Andrey-SysAdmin | 2015-02-21 в 16:50:41

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

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

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

    по большому счету нет ограничений, чтобы картинка вписалась в рамки

  11. Дмитрий (lider30) | 2015-02-21 в 17:02:03

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

    Когда слайд один, то ограничение срабатывает, когда добавляю второй слайд ограничение не действует.

  12. Andrey-SysAdmin | 2015-02-21 в 17:12:34

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

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

    Можно покопаться в стилях SlidesJs слайдера -- http://hospek.com

  13. Дмитрий (lider30) | 2015-02-21 в 17:24:19

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

  14. Andrey-SysAdmin | 2015-02-21 в 17:31:57

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

    Ну да, там с 800 до 660px доходит, дальше ограничение ширины самого шаблона стоит.

  15. Дмитрий (lider30) | 2015-02-21 в 17:42:02

    Адаптивности по мобильные устройства. Проверьте сайт hospek.com на http://ami.responsivedesign.is

  16. Andrey-SysAdmin | 2015-02-21 в 17:58:03

    Телефон и гугл инструменты разработчика совсем другое показывают. Это так, для инфы wink

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

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

    На смартофоне отображается не верно.

  18. Евгений | 2015-02-22 в 12:00:45

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

    http://www.responsinator.com/?url=http://altermetal.net

  19. Евгений | 2015-02-22 в 12:07:20

    lider30 flexslider мне лучше лично. Я его юзаю. отличий особо нет.

  20. Дмитрий (lider30) | 2015-02-25 в 16:38:14

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

    2. И как можно создать несколько разных слайдеров image-nivo-slider для использования? - получается нужно создать копию компонента image-nivo-slider с другими ID в коде и для него опции?

  21. Илья Земсков (эксперт по MaxSite CMS) | 2015-02-25 в 16:43:50

    Дмитрий, просто так в любое место страницы nivo slider не вставишь. Я делал плагин для таких задач. Там можно было специальный бб-код использовать для записей и виджет для сайдбара. Уже почти опубликовал эту разработку, но отвлекли oh oh Может за время праздников опубликую. Ну или может кто-нибудь подскажет сейчас как иначе решить вашу задачу.

  22. Дмитрий (lider30) | 2015-02-26 в 01:35:37

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

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

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

    2. В опцию клонированного image-nivo-slider добавляем окно с указанием ID записи, либо этот ID нужно прописать где то в теле компонента?

  23. Илья Земсков (эксперт по 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;
 }
}

    Для совсем мелких разрешений решили выключить слайдер, ибо совсем уж картинки измельчали.

    В общем, надеюсь, что вам мой код поможет.

  24. Дмитрий (lider30) | 2015-02-27 в 14:26:49

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

    div.r2 {

    bottom: 0;

    }

    Это что описываем в CSS?

  25. Илья Земсков (эксперт по MaxSite CMS) | 2015-02-28 в 04:19:00

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

© MaxSite CMS | Время: 0.5923 | SQL: 22 | Память: 7.24MB | Вход