Почему yii2-fotorama-widget не роботает в модалке?

Question

[Alex Kizyma]

Проект на Yii2 basic віджет yii2-fotorama-widget норм роботает в админке а вот на главной в модалке проблема почемуто не роботает

вот подключил модалку віджетом в index

<?php \yii\bootstrap\Modal::begin([
     //'header' => 'Детальна інформація:',
    'footer' => '<button type="button" class="btn btn-default" data-dismiss="modal" >Закрити</button>',
    'id' => 'info-work',
    'size' => 'modal-lg',

 ]);


 \yii\bootstrap\Modal::end()?>

и вот виджет вивожу с странице https://github.com/MetalGuardian/yii2-fotorama-widget

<?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 src="http://s.fotorama.io/1.jpg">    
    <img src="http://s.fotorama.io/2.jpg">
    <img src="http://s.fotorama.io/3.jpg">
    <img src="http://s.fotorama.io/4.jpg">
    <img src="http://s.fotorama.io/5.jpg">
<?php $fotorama->end(); ?>

в результате картинки есть но карусель не роботает...

для модалки у меня другая view так как через ajax роботаю

public function actionFullJob(){

        $id = Yii::$app->request->get('id');
        $portfolio = Portfolio::findOne($id);

        if (empty($portfolio)){
            return false;

        }else{
            $this->layout = false;

            return $this->render('portfolio-modal', [
                'portfolio' => $portfolio
            ]);

        }

    }

возможно в модалку надо както передать что то?

вот запрос:

$('.info-work').on('click', function (e) {
        e.preventDefault(); // Відміна стандартного переходу ссилки
        var id = $(this).data('id');
        // var fotorama = $fotoText.data('fotorama');

        $.ajax({
            url: 'site/full-job',
            data: {id:id},
            type: 'GET',
            success: function(res){
                if(!res){
                    alert('Увага! Виникла помилка!')
                }
                // fotorama.show();
                $('#info-work .modal-body').html(res);
                $('#info-work').modal('show');

            },
            error: function(){
                alert('Error');
            },
            beforeSend: function() {
                $('.loading').show();
            },
            complete: function(){
                $('.loading').hide();

            }
        });
    });

Answer 1

[Дмитрий]

Добрый день.
Потому, что надо заново инициализировать карусель.

Comments

[Alex Kizyma]

Каждий раз когда хочу добавить карусель надо заного делать:
composer.phar require metalguardian/yii2-fotorama-widget "*" ???

[Alex Kizyma]

Зробив знову composer.phar require metalguardian/yii2-fotorama-widget "*" але нічого не допомогло (((

[Дмитрий]

Alex Kizyma, не устанавливать заново, а в модальном окне заново инициализировать плагин.

[Alex Kizyma]

slo_nik, так я написал в модальном окне:

<?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 src="http://s.fotorama.io/1.jpg">    
        <img src="http://s.fotorama.io/2.jpg">
        <img src="http://s.fotorama.io/3.jpg">
        <img src="http://s.fotorama.io/4.jpg">
        <img src="http://s.fotorama.io/5.jpg">
    <?php $fotorama->end(); ?>

[Дмитрий]

Alex Kizyma, сам такой плагин для yii2 не использовал, но сама фоторама должна быть инициализирована после подгрузки данных.
Смотрите на официальном сайте.
JS код приблизительно должен быть таким:

var fotorama = $fotoText.data('fotorama');
/* */
fotorama.show()

[Alex Kizyma]

slo_nik, де ви це прочитали не можу знайти...
$fotoText is not defined

[Alex Kizyma]

slo_nik, для модалки у меня другая view так как через ajax роботаю,
возможно в модалку надо както передать что то?

public function actionFullJob(){

        $id = Yii::$app->request->get('id');
        $portfolio = Portfolio::findOne($id);

        if (empty($portfolio)){
            return false;

        }else{
            $this->layout = false;

            return $this->render('portfolio-modal', [
                'portfolio' => $portfolio
            ]);

        }

    }

[Дмитрий]

де ви це прочитали не можу знайти..

Как где, в официальной документации. Я про то, как перегрузить fotorama.

var $fotoText = $('.foto').fotorama({
                     height: '250px',

                     arrows: 'always',
                     click: false,
                     swipe: false,
                     nav: false,
                  });
var fotorama = $fotoText.data('fotorama');
/* */
fotorama.show()

$fotoText is not defined

Не занимайтесь бездумным копированием.
Если у Вас для fotorama отдельный вид - передавайте в этот вид данные для fotorama и инициализируйте плагин