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

iviewer

  1. Installation
  2. Usage

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
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',
 ]);
 ?>
 <div id="ivwever-gallery-1">
     <div class="iviewer-gallery-item-holder">
         <img 
              src="https://example.com/images/xVwSS9.jpg"
              data-iviewer-src="https://example.com/images/big-size/xVwSS9.jpg"
              class="iviewer-gallery-item" data-target="#iviewer-gallery-1-modal" data-toggle="modal"/>
     </div>
     <div class="iviewer-gallery-item-holder">
         <img 
              src="https://example.com/images/xVwSS9.jpg"
              data-iviewer-src="https://example.com/images/big-size/xVwSS9.jpg"
              class="iviewer-gallery-item" data-target="#iviewer-gallery-1-modal" data-toggle="modal"/>
     </div>
     <div class="iviewer-gallery-item-holder">
         <img 
            src="https://example.com/images/xVwSS9.jpg"
            data-iviewer-src="https://example.com/images/big-size/xVwSS9.jpg"
            class="iviewer-gallery-item" data-target="#iviewer-gallery-1-modal" data-toggle="modal"/>
     </div>
     <div class="iviewer-gallery-item-holder">
         <img 
            src="https://example.com/images/xVwSS9.jpg"
             data-iviewer-src="https://example.com/images/big-size/xVwSS9.jpg"
             class="iviewer-gallery-item" data-target="#iviewer-gallery-1-modal" data-toggle="modal"/>
     </div>
 </div>
 
 
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 
 <?php
 echo \hoomanMirghasemi\iviewer\IviewerGallery::widget([
     'selectorId' => 'iviewer-gallery-2',
     'modalCloseText' => 'close',
 ]);
 ?>
 <div id="ivwever-gallery-2">
     <div class="iviewer-gallery-item-holder">
         <img
                 src="https://example.com/images/xVwSS9.jpg"
                 data-iviewer-src="https://example.com/images/big-size/xVwSS9.jpg"
                 class="iviewer-gallery-item" data-target="#iviewer-gallery-2-modal" data-toggle="modal"/>
     </div>
     <div class="iviewer-gallery-item-holder">
         <img 
            src="https://example.com/images/xVwSS9.jpg"
            data-iviewer-src="https://example.com/images/big-size/xVwSS9.jpg"
            class="iviewer-gallery-item" data-target="#iviewer-gallery-2-modal" data-toggle="modal"/>
     </div>
     <div>
         this is on html element between ivewer items
     </div>
     <div class="iviewer-gallery-item-holder">
         <img 
            src="https://example.com/images/xVwSS9.jpg"
            data-iviewer-src="https://example.com/images/big-size/xVwSS9.jpg"
            class="iviewer-gallery-item" 
            data-target="#iviewer-gallery-2-modal" 
            data-toggle="modal"/>
     </div>
     <span>test one element</span>
 </div>
 ```
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](https://github.com/hooman-pro/yii2-iviewer "git hub")

**packagist link**
[packagist link](https://packagist.org/packages/hooman.mirghasemi/yii2-iviewer "packagist")
0 0
1 follower
0 downloads
Yii Version: 2.0
License: GPL-3.0
Category: User Interface
Tags: image, rotate, ui, zoom
Developed by: hooman.programmer
Created on: Apr 11, 2017
Last updated: a year ago

Related Extensions