Как настроить размер картинок в виджете fotorama

Общие вопросы по использованию второй версии фреймворка. Если не знаете как что-то сделать и это про Yii 2, вам сюда.
Ответить
alexa777
Сообщения: 299
Зарегистрирован: 2016.03.01, 17:38

Как настроить размер картинок в виджете fotorama

Сообщение alexa777 »

Привет, кто подскажет как изменить размер большой картинки и особенно меленьких под ней?
alexa777
Сообщения: 299
Зарегистрирован: 2016.03.01, 17:38

Re: Как настроить размер картинок в виджете fotorama

Сообщение alexa777 »

Loveorigami писал(а): 2018.05.21, 19:28CSS width

Это и так понятно, но там js подставляет свои значения высоты и ширины, и хз как его редактировать

с большой картинкой я разобрался а вот как маленькие под ней редактировать нет

вот их скрин
https://screenshots.firefox.com/1IhF3o4 ... Rw/test.ku
Аватара пользователя
Dominus
Сообщения: 892
Зарегистрирован: 2013.03.14, 21:27
Откуда: Россия, Иваново
Контактная информация:

Re: Как настроить размер картинок в виджете fotorama

Сообщение Dominus »

Ну в документации к виджету написано следующее:
By default, thumbnail is a 64×64 square. Adjust this with data-thumbwidth and data-thumbheight
http://fotorama.io/customize/thumbnails/
Не спорь с дураком, иначе окружающие не правильно поймут кто из вас дурак!
alexa777
Сообщения: 299
Зарегистрирован: 2016.03.01, 17:38

Re: Как настроить размер картинок в виджете fotorama

Сообщение alexa777 »

Dominus писал(а): 2018.05.24, 00:12 Ну в документации к виджету написано следующее:
By default, thumbnail is a 64×64 square. Adjust this with data-thumbwidth and data-thumbheight
http://fotorama.io/customize/thumbnails/
И что это значит
попробовал я сделать
.data-thumbwidth {
width:200px;
}
и нечего не выходит
Loveorigami
Сообщения: 977
Зарегистрирован: 2014.08.27, 21:54

Re: Как настроить размер картинок в виджете fotorama

Сообщение Loveorigami »

Это не класс. Погуглите про data- атрибуты и для чего они нужны
Аватара пользователя
Dominus
Сообщения: 892
Зарегистрирован: 2013.03.14, 21:27
Откуда: Россия, Иваново
Контактная информация:

Re: Как настроить размер картинок в виджете fotorama

Сообщение Dominus »

alexa777 писал(а): 2018.05.30, 09:36
Dominus писал(а): 2018.05.24, 00:12 Ну в документации к виджету написано следующее:
By default, thumbnail is a 64×64 square. Adjust this with data-thumbwidth and data-thumbheight
http://fotorama.io/customize/thumbnails/
И что это значит
попробовал я сделать
.data-thumbwidth {
width:200px;
}
и нечего не выходит

Код: Выделить всё

<div class="fotorama"
     data-nav="thumbs" data-thumbwidth="200">
  <a href="1.jpg"><img src="1_thumb.jpg"></a>
  <a href="2.jpg"><img src="2_thumb.jpg"></a>
</div>
или для каждого эскиза свой размер:

Код: Выделить всё

<div class="fotorama"
     data-nav="thumbs">
  <a href="1.jpg"><img src="1_thumb.jpg" width="144" height="96"></a>
  <a href="2.jpg"><img src="2_thumb.jpg" width="64" height="128"></a>
</div>
Не спорь с дураком, иначе окружающие не правильно поймут кто из вас дурак!
alexa777
Сообщения: 299
Зарегистрирован: 2016.03.01, 17:38

Re: Как настроить размер картинок в виджете fotorama

Сообщение alexa777 »

Dominus писал(а): 2018.05.30, 10:09
alexa777 писал(а): 2018.05.30, 09:36
Dominus писал(а): 2018.05.24, 00:12 Ну в документации к виджету написано следующее:
By default, thumbnail is a 64×64 square. Adjust this with data-thumbwidth and data-thumbheight
http://fotorama.io/customize/thumbnails/
И что это значит
попробовал я сделать
.data-thumbwidth {
width:200px;
}
и нечего не выходит

Код: Выделить всё

<div class="fotorama"
     data-nav="thumbs" data-thumbwidth="200">
  <a href="1.jpg"><img src="1_thumb.jpg"></a>
  <a href="2.jpg"><img src="2_thumb.jpg"></a>
</div>
или для каждого эскиза свой размер:

Код: Выделить всё

<div class="fotorama"
     data-nav="thumbs">
  <a href="1.jpg"><img src="1_thumb.jpg" width="144" height="96"></a>
  <a href="2.jpg"><img src="2_thumb.jpg" width="64" height="128"></a>
</div>

Я конечно дико извиняюсь, но у меня этот виджет подключен вот так, первый php это главная картинка, а второй это выводит превьюхи, я пробовал его окружать этим дивом но нечего не выходит

Код: Выделить всё

 <?php 
    $fotorama = \metalguardian\fotorama\Fotorama::begin(
        [
            'options' => [
                'loop' => true,
                'hash' => true,
                'ratio' => 800/600,
            ],
            'spinner' => [
                'lines' => 20,
            ],
            'tagName' => 'span',
            'useHtmlData' => false,
            'htmlOptions' => [
                'class' => 'custom-class',
                'id' => 'custom-id',
            ],
        ]
    ); 
    
    $img = common\models\Board::getBoardImages($model->id);
        if (count($img) > 0) {
         foreach ($img as $one){
             //return var_dump($one->name);
         echo Html::img('/frontend/web/' . $one->name);
         }
         
     }
    \metalguardian\fotorama\Fotorama::end(); ?>
   
     <?php 
    \metalguardian\fotorama\Fotorama::setDefaults(
        [
            'nav' => 'thumbs',
            'spinner' => [
                'lines' => 20,
            ],
            
            'loop' => true,
            'hash' => true,
        ]
    );
    ?>
Аватара пользователя
Dominus
Сообщения: 892
Зарегистрирован: 2013.03.14, 21:27
Откуда: Россия, Иваново
Контактная информация:

Re: Как настроить размер картинок в виджете fotorama

Сообщение Dominus »

Код: Выделить всё

<?php
\metalguardian\fotorama\Fotorama::begin(
    [
        'options' => [
            'loop' => true,
            'hash' => true,
            'ratio' => 800 / 600,
        ],
        'spinner' => [
            'lines' => 20,
        ],
        'tagName' => 'span',
        'useHtmlData' => false,
        'htmlOptions' => [
            'class' => 'custom-class',
            'id' => 'custom-id',
            // Тут добавляем контейнеру 'custom-id' атрибут data-thumbwidth="200"
            'data' => [
                'thumbwidth' => '200'
            ],
        ],
    ]
); 
//...
Не спорь с дураком, иначе окружающие не правильно поймут кто из вас дурак!
Ответить