Подскажите пожалуйста, как можно адаптировать изображения в слайдере MaxSite CMS SlidesJs?
Дело в том, что изображения помещённые в слайдер при масштабировании начинаю обрезаться:
Пробовал различные способы CSS (max-width)- но они не срабатывают.
Может кто то сталкивался с подобной настройкой слайдера?
25 4865
Скорее всего вы неправильно выбрали точку приложения ваших модификаций в css или вы неверно понимаете (и ожидаете от него) задачу свойства max-width.
Сайт пока на локальном сервере, хотелось бы использовать именно SlidesJs, пробовал max-width:100% в разных сочетаниях. Nivo-Slides адаптивен, но не так гибок как SlidesJs и в прошлых проектах приходилось останавливаться на нём. Чуть позже выложу сайт в сеть.
lider30, попробуйте чуть изменить компонент файл компонента slidesjs.php строка 111:
css:
img.my_img{max-width:100%;}Причём, когда в опциях слайдера оставляю одно изображение и применяю к блоку соответствующие настройки CSS, то слайдер начинает адаптироваться: http://pikucha.ru/iecMY http://pikucha.ru/iecMZ
Как только добавляю второй слайдер - изображение сползает, обрезается
А подробнее про
Что касается изображений
div.slidesjs div.slide img { height: 100%; width: 770px; }Когда в опциях слайдера SlidesJ в панели админа добавляю слайдер - когда их становится больше одного, адаптивность при:
div.slidesjs div.slide img { height: auto; max-width: 100%; }исчезаетВышеперечисленные манипуляции проблемы не решают, но спасибо за вашу отзывчивость.
Работаю над дизайном, как сайт появится в сети - будем разговаривать предметно
Чуть мозг не сломал...
Может речь идёт про добавление слайда, а не слайдера?
Согласен - не правильно выразился - СЛАЙД.
Коротко по коду.
height: auto; -- будет автоматом расширяться картинка по высоте относительно ширины.
max-width: 100%; -- смысл тут какой заложен?
по большому счету нет ограничений, чтобы картинка вписалась в рамки
height: auto - это не окончательно решение, основное это max-width: 100% - задаёт ограничение при увеличении масштаба блока с картинкой не давая ей выпадать соответствуя ширине его контейнера, обрезаться.
Когда слайд один, то ограничение срабатывает, когда добавляю второй слайд ограничение не действует.
По моему скромному разумению, слайдер предполагает картинки определённого размера. Возможно, имеет смысл изначально их подготовить. Так же задать жестко размеры в css. И тогда не будет заметно, если они будут растягиваться/сжиматься на несколько px.
Но это сугубо моё имхо, т.к. не хватает данных по конечному использованию слайдера.
Можно покопаться в стилях SlidesJs слайдера -- http://hospek.com
http://hospek.com - лишён адаптивности. С изображениями поколдовать можно конечно и вывести слайдер на переломном моменте (когда существенная часть картинки начнёт обрезаться, к примеру на 1000 px) в display: none, но буду стремиться к гибкости. Пока разговор получается не о чём, выложу сайт - дам знать.
Адаптивности под что?
Ну да, там с 800 до 660px доходит, дальше ограничение ширины самого шаблона стоит.
Адаптивности по мобильные устройства. Проверьте сайт hospek.com на http://ami.responsivedesign.is
Телефон и гугл инструменты разработчика совсем другое показывают. Это так, для инфы
Гугл инструмент брешит: http://pikucha.ru/iecPx
На смартофоне отображается не верно.
медиа запросы наш костыль для адаптивности. А грамотно продуманный дизайн на уровне css решит все проблемы.
http://www.responsinator.com/?url=http://altermetal.net
lider30 flexslider мне лучше лично. Я его юзаю. отличий особо нет.
1. Подскажите пожалуйста, как можно вставлять image-nivo-slider в конкретном месте выборочной страницы? Если это можно сделать с помощью УШКИ, то какой код нужно взять для вставки при формировании УШКИ?
2. И как можно создать несколько разных слайдеров image-nivo-slider для использования? - получается нужно создать копию компонента image-nivo-slider с другими ID в коде и для него опции?
Дмитрий, просто так в любое место страницы nivo slider не вставишь. Я делал плагин для таких задач. Там можно было специальный бб-код использовать для записей и виджет для сайдбара. Уже почти опубликовал эту разработку, но отвлекли
Может за время праздников опубликую. Ну или может кто-нибудь подскажет сейчас как иначе решить вашу задачу.
Задача у меня просто не стандартная: с выводом image-nivo-slider на главной понятно - вывели. Теперь нужно image-nivo-slider с подобным расположением, со своим набором изображений вывести на странице с записью.
Я так понимаю:
1. Клонируем компонент
2. В опцию клонированного image-nivo-slider добавляем окно с указанием ID записи, либо этот ID нужно прописать где то в теле компонента?
Дмитрий, нашёл таки код, которым я заставил 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; } }Для совсем мелких разрешений решили выключить слайдер, ибо совсем уж картинки измельчали.
В общем, надеюсь, что вам мой код поможет.
Илья я ещё до использования компилятора less не дорос, всё понял кроме
div.r2 {
bottom: 0;
}
Это что описываем в CSS?
Дмитрий, LESS - это продвинутая версия css. Освоить его можно буквально за час, если знаете css и вам знакомо программирование хотя бы на php. Большая часть less-кода выглядит именно как css (я про приведённый вами фрагмент). Ну разве ещё только добавляется вложенность (позволяет сократить описание селекторов) и появляются переменные, а также подобие функций. В общем, очень рекомендую потратить немного времени на освоение.