Cycle widget
yii2-cycle2 demo
Code
PHP
<?= Cycle::widget([ 'dataProvider' => $dataProvider, 'imgAttribute' => 'photo', 'captionAttributes' => [ 'name', 'town' ], 'overlayAttributes' => [ 'year' => 'built', 'height' => function($model, $widget) { return $model->height . ' meter'; } ], 'tooltipAttribute' => 'name', 'options' => [ 'fx' => 'scrollVert', ], ]) ?>
CSS
/* no CSS */
Code
PHP
<?= Cycle::widget([ 'dataProvider' => $dataProvider, 'imgAttribute' => 'photo', 'captionAttributes' => [ 'name', 'town' ], 'overlayAttributes' => [ 'year' => 'built', 'height' => function($model, $widget) { return $model->height . ' meter'; } ], 'tooltipAttribute' => 'name', 'options' => [ 'captionPlugin' => 'caption2', 'captionFxOut' => "slideUp", 'captionFxIn' => "slideDown", 'overlayFxOut' => "slideUp", 'overlayFxIn' => "slideDown", 'timeout' => 3500, 'speed' => 2000, ], ]) ?>
CSS
.cycle-caption { position: absolute; top: 0.3em; right: 1em; z-index: 700; font-weight: bold; color: #fff; text-align: right; } .cycle-overlay { position: absolute; width: 100%; bottom: 0; z-index: 700; background-color: rgba(256,256,256,.5); padding: 8px 1em 2px; font-weight: bold; } .slide-name { display: block; font-size: 1.15em; } .slide-town { display: block; } .slide-year { display: block; color: blue; } .slide-height { display: block; }
Code
PHP
<?= Cycle::widget([ 'dataProvider' => $dataProvider, 'imgAttribute' => 'photo', 'captionAttributes' => [ 'name', 'town' ], 'overlayAttributes' => [ 'year' => 'built', 'height' => function($model, $widget) { return $model->height . ' meter'; } ], 'tooltipAttribute' => 'name', 'options' => [ 'fx' => 'tileSlide', 'tileCount' => 24, 'tileVertical' => false, 'timeout' => 2400, 'speed' => 400, 'overlay' => '#ovl' ], ]) ?> <div id="ovl" class="overlay"></div>
CSS
.cycle-caption { position: absolute; top: 12em; width: 100%; z-index: 700; font-weight: bold; color: #fff; background-color: rgba(0, 0, 0, .2); text-align: center; } .cycle-overlay { position: absolute; top: 1em; width: 100%; z-index: 700; color: #fff; text-align: center; } .slide-name { display: block; font-size: 2.4em; } .slide-town { display: block; font-size: 1.8em; } .overlay { transform-origin: left top; transform: translateX(100%) rotate(-90deg); font-weight: bold; }