MaxHub
Служба Заботы MaxSite CMS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    div.slidesjs div.slide img {
    height: 100%;
    width: 770px;
    }
  7. А подробнее про

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  23. Дмитрий, нашёл таки код, которым я заставил 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. Илья я ещё до использования компилятора less не дорос, всё понял кроме

    div.r2 {

    bottom: 0;

    }

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

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

Оставьте комментарий!

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

Вход / регистрация или войти без комментирования
  Имя и сайт используются только при регистрации

Авторизация MaxSiteAuth. Войти через loginza

(обязательно)