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

/ Просмотров: 6051
Адаптированные изображения в Слайдере - SlidesJs

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

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

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

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

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

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

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%;}

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

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

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

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

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

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

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

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

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

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

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

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 доходит, дальше ограничение ширины самого шаблона стоит.

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

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

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

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

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

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

Задача у меня просто не стандартная: с выводом 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 (я про приведённый вами фрагмент). Ну разве ещё только добавляется вложенность (позволяет сократить описание селекторов) и появляются переменные, а также подобие функций. В общем, очень рекомендую потратить немного времени на освоение.