0

Yii2-iViewer

iViewer is an jquery ui widget representing image viewer component used to load and view image with ability to zoom image and to drag it with mouse in container.

Plugin is expected to work in ie6+, ff2+, google chrome, opera 9+, safari.

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

iViewer

Demo: Click here

Once the extension is installed, simply use it in your code by :

Or you can use it as image gallery one or more in a page that open in a bootstrap modal with next and preview buttons like this:

first config iviewer module in config of application

Options are:

  • src – url to the image
  • ui_disabled – if true, toolbar buttons will not be added
  • zoom – zoom at plugin start (% or “fit” to fit image in container);
  • zoom_max – max zoom, that can be achieved (%)
  • zoom_min – minimal zoom, that can be achieved (%)
  • zoom_delta – zoom scale step when pressing controls or scrolling with mouse ( default 1.4)
  • zoom_animation – whether the zoom change should be animated ( default true)
  • zoom_base – value in %, which is used in calculation of image scale. Zoom is calculated by formula zoom_base * pow(zoom_delta, n)
  • update_on_resize – boolean; if false plugin doesn’t update on window resize and this can be controlled manually (default true)

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

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.

 

 

Prakash S

Prakash S

I would like to introduce myself as a Software professional opting for the career in software industry. I’m Prakash S, a MCA graduate and trained as industry level practice for Software technology. Basically I am a PHP Developer but now days exploring more in HTML5, CSS, AngularJS and jQuery libraries.