
Как организовать фотогалерею через поведение описал ранее - здесь.
Теперь же посмотрим как выводить на одну страницу несколько (неизвестное заранее) количество фотогалерей, правильнее сказать альбомов. Например, у вас портфолио работ, которое будет пополняться новыми проектами.
У меня в каждой записи для примера будет можно задавать 2 галереи - это "Фото" и "Отзывы". Соответственно записей таких может быть много на странице.
В виде _view.php
<div class="row text-center"> <div class="col-xs-5"> <div class="hor"> <?php if($photoimages=$model->getBehavior('galleryBehavior')->getImages()) { foreach($photoimages as $r => $im) { if($r == '0') { if(($model->icon2 != '') && file_exists(Yii::getAlias('@webroot'.$model->icon2))) $icon2 = $model->icon2; else $icon2 = "/images/logo_circle.png"; echo Html::a(Html::img($icon2, ['class'=>'img-responsive']), $im->getUrl('original'), ['rel'=>'port'.$model->id, 'class' => 'album'.$model->id]); } else echo Html::a('', $im->getUrl('original'), ['rel'=>'port'.$model->id, 'class' => 'album'.$model->id, 'style'=>'display:none']); } } else { echo Html::img('/images/logo_circle.png', ['class'=>'img-responsive']); } ?> <div class="d_l"></div> <div class="d_r"></div> </div> <p class="h5">Фото</p> </div> <?php if($reviewimages=$model->getBehavior('galleryBehavior_reviews')->getImages()) : ?> <div class="col-xs-5 col-xs-offset-1"> <div class="hor img-circle"> <?php foreach($reviewimages as $r => $im) { if($r == '0') { if(($model->icon3 != '') && file_exists(Yii::getAlias('@webroot'.$model->icon3))) $icon3 = $model->icon3; else $icon3 = "/images/logo_circle.png"; echo Html::a(Html::img($icon3, ['class'=>'img-responsive img-circle']), $im->getUrl('original'), ['rel'=>'port'.$model->id, 'class' => 'album'.$model->id]); } else echo Html::a('', $im->getUrl('original'), ['rel'=>'port'.$model->id, 'class' => 'album'.$model->id, 'style'=>'display:none']); } ?> <div class="d_l"></div> <div class="d_r"></div> </div> <p class="h5">Отзывы</p> </div> <?php endif;?> </div>
Здесь видим две галереи формируются извлечением фоток в массив. Работает это через полюбившееся расширение zxbodya/yii2-gallery-manager. У меня здесь видно это поведения 'galleryBehavior' и 'galleryBehavior_reviews'.
Эти названия были указаны в форме _form.php, вот одно (второе аналогично).
... <?php if ($model->isNewRecord) { echo 'Загрузка изображений будет возможна после создания записи. Сохраните и откройте на редактирование.'; } else { echo GalleryManager::widget( [ 'model' => $model, 'behaviorName' => 'galleryBehavior', 'apiRoute' => 'portfolio/galleryApi' ] ); }?> ...
Для показа фоток подвесил вручную colorbox без расширения, поэтому в том же виде _view.php в начале файла подключаю динамически скрипт. Это будет подключать для каждой записи скрипт на ссылки со своими 'rel' и классом '.album$model->id'
$script = <<< JS jQuery('a.album$model->id').colorbox({ opacity:0.5, rel:'port$model->id', maxWidth:800, maxHeight:600, loop:false }); JS; //маркер конца строки, обязательно сразу, без пробелов и табуляции $this->registerJs($script, yii\web\View::POS_END);
Конечно нужен сам colorbox, скачайте с официального сайта и подключить его стили и js в ваш assets/YourAssetsBundle.php
... public $css = [ ... 'colorbox/example3/colorbox.css', ]; public $cssOptions = [ 'type' => 'text/css' ]; public $js = [ ... 'colorbox/jquery.colorbox-min.js', ]; ...
15 марта 2016, Программирование, веб-кодинг / Метки: gallery фотогалерея

