PHP调用窗口组件,Yii2-iViewer 图像查看器组件的jquery ui窗口小部件的使用方法

[导读]iViewer是一个表示图像查看器组件的jquery ui窗口小部件，用于加载和查看具有放大图像功能的图像，并将鼠标拖动到容器中。插件预计在ie6 +，ff2 +，谷歌chrome，歌剧9+，safari工作。

iViewer是一个表示图像查看器组件的jquery ui窗口小部件，用于加载和查看具有放大图像功能的图像，并将鼠标拖动到容器中。

插件预计在ie6 +，ff2 +，谷歌chrome，歌剧9+，safari工作。

安装

安装此扩展程序的首选方法是通过composer工具来安装

运行下面代码php composer.phar require --prefer-dist hooman.mirghasemi/yii2-iviewer "*"

或者是"hooman.mirghasemi/yii2-iviewer": "*"

添加到composer.json文件的require部分。

示例：

扩展程序安装完成后，只需在代码中使用它即可：<?php

echo hoomanMirghasemiiviewerIviewer::widget([

'selector' => '#iviewer-content',

'loadingSelector'=>'#iv-loading',

'beforeIviewer'=>'$("#iviewer-content").html("");',

'imageSrc' => 'path to your image',

]);

?>

در حال بارگذاری تصویر

或者您可以使用它作为图像库中的一个或多个在一个页面中打开一个引导模态与下一个和previwe按钮像这样：

在应用程序配置中首先配置iviewer模块'modules' => [

'iviewer' => [

'class' => 'hoomanMirghasemiiviewerModule',

'loadingText' => 'loading ...',

],

],

选项是：

src - url到图像

ui_disabled - 如果为true，则不会添加工具栏按钮放大 - 缩放插件开始(％或“适合”适合容器中的图像);

zoom_max - 最大缩放，可以实现(％)

zoom_min - 可以实现的最小缩放(％)

zoom_delta - 按下控件或使用鼠标滚动时的缩放比例尺(默认为1.4)

zoom_animation - 缩放变化是否应该动画(默认为true)

zoom_base - 以％为单位的值，用于计算图像比例。 缩放由公式计算zoom_base * pow(zoom_delta，n)

update_on_resize - boolean; 如果false插件在窗口大小上不更新，并且可以手动控制(默认为true)

在一个视图文件中使用它写这样的代码：<?php

echo hoomanMirghasemiiviewerIviewerGallery::widget([

'selectorId' => 'iviewer-gallery-1',

'modalCloseText' => 'close',

]);

?>

        

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"/>

        

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"/>

        

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"/>

        

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"/>

echo hoomanMirghasemiiviewerIviewerGallery::widget([

'selectorId' => 'iviewer-gallery-2',

'modalCloseText' => 'close',

]);

?>

        

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"/>

        

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"/>

this is on html element between ivewer items

        

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"/>

test one element

要点：请确保selectorId和html元素包含iviwer元素是一样的。 并为元素使用iviewer-gallery-item-holder和iviewer-gallery-item类。 data-target应与selectorId +“ - modal”相同。 data-iviewer-src也是必需的字段。