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 ){
			$nav = 'thumbs';
			$ratio = '';
			$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."'":'';
				$mainimg = false;
				if( $image->type == 'post_gallery' ){
					if( ( $model->type == 2 || $model->type == 6 ) && !$mobile ){
						// лонгрид
						$mainimg = $image->getUrl('large');
					}else{
						$mainimg = $image->getUrl('medium');
					}
				}
				if( $mainimg ){
					$d = str_replace("\n", "", (string)$image->description);
					$u = trim($d);
					if( $u ){
						$d = ', html:'.json_encode('<div style="position:relative;" class="phfce"><span>'.$u.'</span></div>');
					}else{
						$d = '';
					}
?>
{img: '<?=$mainimg?>', thumb: '<?=$image->getUrl('small')?>', full:'<?=$image->getUrl('large')?>', id:<?=$i?> <?=$add_cap?><?=$d?>},
<?
				}elseif( $image->description ){
					$nav = 'dots';
					$ratio = 'ratio:16/9,';
					$d = str_replace("\n", "", (string)$image->description);
					//$d = htmlentities($d);
					//$d = json_encode($d);
					$u = trim($d);
					$d = json_encode('<div style="z-index:0;position:relative;" class="phfc"><span>'.$u.'</span></div>');

?>
{ img: '/img/e.gif', id:<?=$i?> <?=$add_cap?>, html:<?=$d?>,fit: 'contain'},
<?
				}
				$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>
*/
?>

<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({ <?=$ratio?>width:'100%',maxwidth:1200,maxheight:<?=$maxheight?>,minheight:250, fit: 'contain', thumbheight:70,thumbwidth:94, captions: true,nav:'<?=$nav?>', swipe:true, caption: 'overlay', allowfullscreen:'native',transition:'slide', data: [ <?=$ltext?> ] });
		$('#gallery-<?=$gallery->id?>').on('fotorama:show', function (e, fotorama, extra) {
				new Image().src = "https://counter.yadro.ru/hit;amicru?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();
			} ).on('fotorama:ready', function (e, fotorama) {
//
			});
		});

</script>
<?/*
<style>

.fotorama__arr{
	z-index:9999;
	position:absolute;
}
.phfc{
		width:100%;
		text-align:center;
		height: 100%;
}

.phfc span{
	text-align:left;
	font-size:130%;
	line-height:normal;
	margin:auto 5px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: fit-content;
}
.phfc iframe{
	aspect-ratio:16/9;
	height:auto;
	margin:auto;
	width:94%;
	display:block;
	padding:18px;
}
.phfce{
		width:100%;
		text-align:center;
		text-shadow: 2px 2px #000;
		display:flex;
		height:100%;
		background-color: #0000007d;
		color:#fff;
}
.phfce span{
	text-align:left;
	font-size:200%;
	line-height:normal;
	margin:auto 20px;
}
.fotorama--fullscreen .phfce span{
	font-size:400%;
	margin: auto 100px;
 }
.fotorama--fullscreen .phfc span{
	font-size:400%;
	margin: auto 100px;
	 color: #b7b7b7;
	 display: block;
	 text-align:left;
	 line-height:normal;
 }
.fotorama--fullscreen .phfc iframe{
	width:100%;
}
@media only screen and (min-width: 1300px) {
	.phfc span{
		font-size:130%;
	}
}
@media only screen and (max-width: 1300px) {
	.phfc span{
		font-size:110%;
	}
}


@media only screen and (max-width: 1200px) {
	.phfc span{
		font-size:85%;
	}
	.phfc h2{
		font-size:100%;
		font-weight: bold;
	}
}

@media only screen and (max-width: 994px) {
	.phfc span,h2{
		font-size:70%;
	}
	.phfc h2{
		font-weight: bold;
	}
}
@media only screen and (max-width: 534px) {
	.phfc span,h2{
		font-size:68%;
	}
	.phfc h2{
		font-weight: bold;
	}
}
@media only screen and (max-width: 386px) {
	.phfc span,h2{
		font-size:58%;
	}
	.phfc h2{
		font-weight: bold;
	}
}
@media only screen and (max-width: 310px) {
	.phfc span,h2{
		font-size:40%;
	}
	.phfc h2{
		font-weight: bold;
	}
}

</style>
<?
*/
 }