Новости Joomla

0 Пользователей и 1 Гость просматривают эту тему.
  • 4 Ответов
  • 3398 Просмотров
*

Davidich

  • Захожу иногда
  • 179
  • 7 / 1
Здравствуйте. Создаю модуль карусели изображений, в настройках которого можно менять размер выводимых изображений:
Спойлер
[свернуть]

Первоначально по умолчанию настроил 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

  • Завсегдатай
  • 1663
  • 206 / 7
попробуйте так
.picture {overflow: hidden;}
.picture img {width: 100%;}
*

Davidich

  • Захожу иногда
  • 179
  • 7 / 1
попробуйте так
.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
Ссылку бы на сайт.
*

Davidich

  • Захожу иногда
  • 179
  • 7 / 1
Проблема решена.
Кому-то может быть потребуется вывод заданной ширины и высоты модуля, то вот как:
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
Просмотров: 1712
Последний ответ 10.03.2020, 16:07:44
от AlexB
Bootstrap 4 карусель листает постер видео

Автор intcorp

Ответов: 4
Просмотров: 1962
Последний ответ 25.03.2018, 17:07:38
от intcorp
Правка LightBOX для корректного отображения изображений любых размеров

Автор Galiakberow

Ответов: 0
Просмотров: 1849
Последний ответ 05.11.2017, 09:45:45
от Galiakberow
Как уменьшить размер логотипа на шаблоне protostar Joomla 3 ?

Автор maximka21reg

Ответов: 4
Просмотров: 3663
Последний ответ 03.12.2016, 03:09:01
от satyricon
Размер всплывающего окна

Автор sokol-iz-ussr

Ответов: 1
Просмотров: 2281
Последний ответ 07.11.2016, 10:41:58
от Strikerus