FRONTEND_MVC/views/news/view/inject-gallery-x.php

<?php
/**
 * @var $this \yii\web\View
 * @var $gallery \app\models\front\Gallery
 */

use yii\helpers\Html;

	$mobile = Yii::$app->deviceDetect->isMobile();

	$maxheight = $mobile?'900':'750';

 if($gallery instanceof \app\models\front\Gallery && count($gallery->getBehavior('galleryBehavior')->getImages())>0 ){
			$c = Yii::$app->acache;
			$c->set('fotorama', true);
			$i=1;
			ob_start();
			foreach($gallery->getBehavior('galleryBehavior')->getImages() as $image){
				$add_cap = ($image->name != '')?", caption: '".$image->name."'":'';
				if( ( $model->type == 2 || $model->type == 6 ) && !$mobile ){
					// лонгрид
					$mainimg = $image->getUrl('large');
				}else{
					$mainimg = $image->getUrl('medium');
				}
				if( $mainimg ){
?>
{img: '<?=$mainimg?>', thumb: '<?=$image->getUrl('small')?>', full:'<?=$image->getUrl('large')?>', id:<?=$i?> <?=$add_cap?>},
<?
				}
				$i++;
				}
			$ltext = ob_get_contents();
			ob_end_clean();
/*
<link href="https://lib.amic.ru/js/fotorama/fotorama.css" rel="stylesheet">
<script src="https://lib.amic.ru/js/fotorama/fotorama.js" defer></script>
*/
?>
<style>
.gallery-wrapper{
	margin-left: auto;
	margin-right: auto;
	min-height:340px;
	width:90%;
	padding-bottom: 18px;
}
.longrid .post .text .gallery-wrapper div{
	margin-left: 0;
	margin-right: 0;
}
</style>
<div id="gallery-<?=$gallery->id?>" class="gallery-wrapper"></div>
<div class="image-title"><?=$gallery->name?></div>
<script type="text/javascript">
		window.addEventListener("DOMContentLoaded",function () {
		$('#gallery-<?=$gallery->id?>').fotorama({ width:'100%',maxwidth:1200,maxheight:<?=$maxheight?>,minheight:250, fit: 'contain', thumbheight:70,thumbwidth:94, captions: true,nav:'thumbs', caption: 'overlay', allowfullscreen:'native',transition:'slide', data: [ <?=$ltext?> ] });
		$('#gallery-<?=$gallery->id?>').on('fotorama:show', function (e, fotorama, extra) {	 console.log('cnt+')} );
		});
</script>
<?
 }