hooman.mirghasemi/yii2-iviewer

iviewer can use for zoom and rotate image, it is use iviewer jquery plugin , and iviewerGallery widget can use for some images open in modal with iviewer zoom and rotate

iviewer

iviewer can use for zoom and rotate image, it is use iviewer jquery plugin, _(*1)

Installation

The preferred way to install this extension is through composer., _(*2)

Either run, _(*3)

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

or add, _(*4)

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

to the require section of your composer.json file., _(*5)

Usage

Note : you should load fontAsome in your project before use it. Once the extension is installed, simply use it in your code by :, _(*6)

<?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">در حال بارگذاری تصویر</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:, _(*7)

first config iviewer module in config of application, _(*8)

'modules' => [

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

for use it in a view file write code like this: ```php 'iviewer-gallery-1', 'modalCloseText' => 'close', ]); ?> , _(*9)

br/ br/ br/ br/ br/, _(*10)

'iviewer-gallery-2', 'modalCloseText' => 'close', ]); ?> , _(*11)

this is on html element between ivewer items

test one element