We are going to deploy the new yiiframework.com website on March 23, 2018 from 8:00 to 12:00 UTC.
Website and Yii documentation will not be available in this time frame. Check the news for more details.

Yii 2.0: yii2-iviewer

iviewer can use for zoom and rotate image, it is use iviewer jquery plugin
1 follower


iviewer can use for zoom and rotate image, it is use iviewer jquery plugin


The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist hooman.mirghasemi/yii2-iviewer "*"

or add

"hooman.mirghasemi/yii2-iviewer": "*"

to the require section of your composer.json file.


Once the extension is installed, simply use it in your code by :

php <?php echo \hoomanMirghasemi\iviewer\Iviewer::widget([ 'selector' => '#iviewer-content', 'loadingSelector'=>'#iv-loading', 'beforeIviewer'=>'$("#iviewer-content").html("");', 'imageSrc' => 'path to your image', ]); ?> <div id="iviewer-body"> <div id="iviewer-content"> <div id="iv-loading" style="display: table;overflow: hidden;"> <span style="display: table-cell;padding-right: 10px;vertical-align: middle;"> <div > <span class="loding_text">loading picture ...</span> <i class="fa fa-spinner fa-pulse fa-4x loding_img"></i> </div> </span> </div> </div> </div>

Or you can use it as image gallery one or more in a page that open in a bootstrap modal with next and previwe buttons like this:

first config iviewer module in config of application ```php 'modules' => [

    'iviewer' => [
        'class' => 'hoomanMirghasemi\iviewer\Module',
        'loadingText' => 'loading ...',


for use it in a view file write code like this: ```php <?php echo \hoomanMirghasemi\iviewer\IviewerGallery::widget([ 'selectorId' => 'iviewer-gallery-1', 'modalCloseText' => 'close', ]); ?>

<br/> <br/> <br/> <br/> <br/>

<?php echo \hoomanMirghasemi\iviewer\IviewerGallery::widget([ 'selectorId' => 'iviewer-gallery-2', 'modalCloseText' => 'close', ]); ?>

this is on html element between ivewer items
test one element
``` points: be sure that selectorId and html element contains iviwer elements are same. and use iviewer-gallery-item-holder and iviewer-gallery-item classes for elements. data-target should be same with selectorId+"-modal". also data-iviewer-src is a necessary field

git hub link git hub link

packagist link packagist link

Be the first person to leave a comment

Please to leave your comment.

Create extension
No downloadable files yet