-
Notifications
You must be signed in to change notification settings - Fork 9
/
ElevateZoom.php
122 lines (104 loc) · 3.02 KB
/
ElevateZoom.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<?php
/**
* @link https://github.com/amilna/yii2-elevatezoom
* @copyright Copyright (c) 2015 Amilna
* @license http://opensource.org/licenses/MIT MIT
*/
namespace amilna\elevatezoom;
use Yii;
use yii\helpers\Html;
use yii\base\Widget;
use yii\helpers\Json;
/**
* Usage example:
*
* use amilna\elevatezoom\ElevateZoom;
*
* echo ElevateZoom::widget([
* 'images'=>$images,
* 'baseUrl'=>Yii::$app->urlManager->baseUrl.'/upload',
* 'smallPrefix'=>'/.thumbs',
* 'mediumPrefix'=>'',
* ]);
*/
class ElevateZoom extends Widget
{
public $images = null; // array of images (1 or 3 dimensions, if 1 dimensions then you should set baseUrl, smallPrefix and mediumPrefix) or activeDataProvider (if activeDataProvider you should set imageKey, smallKey and mediumKey)
public $targetId = 'elevatezoom';
public $css = null;
public $baseUrl = null;
public $smallPrefix = null;
public $mediumPrefix = null;
public $imageKey = null;
public $smallKey = null;
public $mediumKey = null;
public $options = [
'zoomType'=> "lens",
'containLensZoom'=> false,
'borderSize'=>0,
'scrollZoom'=> true,
'gallery'=>'galez',
'cursor'=>'crosshair',
];
private $bundle = null;
public function init()
{
parent::init();
$view = $this->getView();
$bundle = ElevateZoomAsset::register($view);
$this->bundle = $bundle;
if ($this->css == null) {
//$view->registerCssFile("{$bundle->baseUrl}/css/style.css");
}
else
{
$view->registerCssFile("@web/{$this->css}");
}
$images = (is_object($this->images)?$this->images->getModels():$this->images);
if (count($this->images) > 0)
{
echo '<div id="'.$this->targetId.'" class="elevatezoom">';
$n = 0;
$thumb = '';
$img = null;
foreach ($this->images as $i)
{
if (is_object($this->images))
{
$image = $i->$imageKey;
$small = $i->$smallKey;
$medium = $i->$mediumKey;
}
else
{
if (is_array($i))
{
$image = $i['image'];
$small = $i['small'];
$medium = $i['medium'];
}
else
{
$image = $i;
$small = str_replace($this->baseUrl,$this->baseUrl.$this->smallPrefix,$i);
$medium = str_replace($this->baseUrl,$this->baseUrl.$this->mediumPrefix,$i);
}
}
if ($n == 0)
{
echo Html::img($medium,["id"=>"elevatezoom-".$n,"data-zoom-image"=>$image,"style"=>"width:100%;"]);
$img = $i;
}
$thumb .= Html::a(Html::img($small,["class"=>"elevatethumb thumbnail col-xs-3"]),"#",["class"=>"elevatezoom-gallery","data-zoom-image"=>$image,"data-image"=>$medium]);
$n += 1;
}
echo ($thumb != ""?"<div id='galez'>".$thumb."</div>":"").'</div>';
$script = "
//var ez = $('#elevatezoom-0').data('elevateZoom');
//ez.swaptheimage(smallImage, largeImage);
$('#elevatezoom-0').elevateZoom(".json_encode($this->options).");
" . PHP_EOL;
$view->registerJs($script);
}
}
}