Размер изображений в галереи (карусель)

Davidich

Захожу иногда
179
7 / 1

Размер изображений в галереи (карусель)

« : 09.04.2014, 18:40:56 »

Здравствуйте. Создаю модуль карусели изображений, в настройках которого можно менять размер выводимых изображений:

Спойлер

[свернуть]

Первоначально по умолчанию настроил CSS на вывод изображений размером 100px*100px

Код: css

<div class="carousel">
   <div class="modul">
       <ul>
           <li="picture">
          <!-- zobrajenie1 -->
           </li>
            <li="picture">
          <!-- izobrajenie2 -->
           </li>
            <li="picture">
          <!--izobrajenie3 -->
           </li>
           <li="picture">
           <!-- izobrajenie4 -->
           </li>
            <li="picture">
           <!-- izobrajenie5 -->
           </li>
             <li="picture">
           <!-- izobrajenie6 -->
           </li>
              ...7,8,9,,,  
    <ul>
  </div>
</div>  

.carousel {
   display: block;
   position: relative;
   width: 890px;
   padding:0;
}
.modul {
   height: 100px;
   width: 890px;
}
.picture {
   float: left;
   margin-left: 0;
   margin-right: 10px;
   height: 100px;
   width: 100px;
}

В настройках модуля, с такими параметрами CSS, если поставить на размер изображения 200px*200px,

то получается:

Спойлер

[свернуть]

Дальше, я пробовал убрать из .picture width:100px или поставить width:auto; то в этом случае получаю вот такую картину без правильной высоты:

Спойлер

[свернуть]

Дальше, если я убираю высоту в .modul и в .picture "height:" или заменяю на height:auto, чтобы высота картинки стала как надо (200px), то слайд становится в несколько рядов...

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

Записан

fbr

Завсегдатай
1694
211 / 7

Re: Размер изображений в галереи (карусель)

« Ответ #1 : 09.04.2014, 19:14:35 »

попробуйте так
.picture {overflow: hidden;}
.picture img {width: 100%;}

Записан

Davidich

Захожу иногда
179
7 / 1

Re: Размер изображений в галереи (карусель)

« Ответ #2 : 09.04.2014, 19:38:10 »

Цитата: fbr от 09.04.2014, 19:14:35

попробуйте так
.picture {overflow: hidden;}
.picture img {width: 100%;}

Не изменяется ничего. Кстати, если это важно, то hidden есть в ul:
ul {
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
top: 0;
}

Записан

Shustry

Moderator
6434
745 / 3

Re: Размер изображений в галереи (карусель)

« Ответ #3 : 09.04.2014, 23:59:52 »

Ссылку бы на сайт.

Записан

Davidich

Захожу иногда
179
7 / 1

Re: Размер изображений в галереи (карусель)

« Ответ #4 : 10.04.2014, 17:37:59 »

Проблема решена.
Кому-то может быть потребуется вывод заданной ширины и высоты модуля, то вот как:
1. Создаем в модуле два поля для ввода ширины и высоты самого модуля. Для этого в фале mod_mymodul.xml (это мое имя, у вас другое) между уже существующими <config></config> вставляем

Код: xml

<field name="width" type="text" default="870" filter="safehtml" label="Ширина модуля" description="Ширина модуля в px" class="inputbox" />
<field name="height" type="text" default="100" filter="safehtml" label="Высота модуля" description="Высота модуля в px" class="inputbox" />

2. Топаем в одноименный файл с расширением php (бывает и другое имя), это у меня mod_mymodul.php и добавляем наши заданные имена width и height, в верху после
defined('_JEXEC') or die('Restricted access');
вот таким видом:

Код: php

$width = $params->get( 'width', 0 );
$height = $params->get( 'height', 0 );

3. Теперь нам осталось вывести наши заданные ширину и высоту. Нам потребуется основные теги модуля, которые отвечают за эту ширину и высоту. В моем примере
это .carousel и .modul и добавляем

Код: css

<style>
<?php echo $customcss; ?>
.modul {
width: <?php echo $width; ?>px;
height: <?php echo $height; ?>px;
}
.carousel {
width: <?php echo $width; ?>px;
padding: 0;
}
</style>

Еще бы конечно хотелось, чтобы выходило предупреждение, если например задать высоту модуля меньше, чем я задал высоту картинки. И так как у меня карусель замкнутая (идет по кругу), то если задать без соотношения ширину и высоту, то эта цепь имеет пустые пробелы. Хотя это не так важно...

Записан

Размер шрифта в iframe Автор AlexB	Ответов: 6 Просмотров: 2412	10.03.2020, 16:07:44 от AlexB
Bootstrap 4 карусель листает постер видео Автор intcorp	Ответов: 4 Просмотров: 2489	25.03.2018, 17:07:38 от intcorp
Правка LightBOX для корректного отображения изображений любых размеров Автор Galiakberow	Ответов: 0 Просмотров: 2184	05.11.2017, 09:45:45 от Galiakberow
Как уменьшить размер логотипа на шаблоне protostar Joomla 3 ? Автор maximka21reg	Ответов: 4 Просмотров: 4376	03.12.2016, 03:09:01 от satyricon
Размер всплывающего окна Автор sokol-iz-ussr	Ответов: 1 Просмотров: 2849	07.11.2016, 10:41:58 от Strikerus

Размер изображений в галереи (карусель) - Вопросы по CSS

Новости Joomla

Вышли релизы безопасности Joomla 6.1.4 и Joomla 5.4.9

JoomShift - компонент переноса контента между Joomla сайтами.

Davidich

Размер изображений в галереи (карусель)

fbr

Re: Размер изображений в галереи (карусель)

Davidich

Re: Размер изображений в галереи (карусель)

Shustry

Re: Размер изображений в галереи (карусель)

Davidich

Re: Размер изображений в галереи (карусель)

Похожие темы