Yii 2.0: yii2-iviewer

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

iviewer

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

Installation

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.

Usage

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
Downloads
No downloadable files yet