hooman-mirghasemi / yii2-iviewer

php yii2 extention

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

Note : you should load fontAsome in your project before use it. 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">در حال بارگذاری تصویر</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

'modules' => [

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

for use it in a view file write code like this:

<?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

yii2-iviewer's Issues

Keeps on Loading ...

If I use it using config method, after clicking the image, a popup come and the loader keeps on loading..

I checked through Inspect element. 1 error
index.php?r=sprofile%2Fview&id=125:417 Uncaught ReferenceError: $ is not defined

If I use it using direct method, the image captures the entire page. But the zoom and rotate functionality works perfectly.