AJAX_ZOOM - Version 1.2.3

Version Notes

Added visual hotspot editor, few other changes

Release Info

Developer	AJAX-ZOOM
Extension	AJAX_ZOOM
Version	1.2.3
Comparing to
See all releases

Code changes from version 1.2.2 to 1.2.3

Files changed (10) hide show

app/code/local/Ax/Zoom/Model/Ax360.php +37 -8
app/code/local/Ax/Zoom/controllers/AxzoomController.php +48 -3
app/code/local/Ax/Zoom/etc/config.xml +4 -4
app/code/local/Ax/Zoom/etc/system.xml +3 -3
app/design/adminhtml/default/default/template/axzoom/tab360-sets.phtml +51 -14
app/design/frontend/base/default/template/ax_zoom/catalog/product/view/media.phtml +3 -3
js/axzoom/preview/cropeditor.php +231 -206
js/axzoom/preview/hotspoteditor.php +3604 -0
js/axzoom/preview/preview.php +1 -1
package.xml +5 -5

app/code/local/Ax/Zoom/Model/Ax360.php CHANGED Viewed

	@@ -3,9 +3,9 @@
3	* Module: jQuery AJAX-ZOOM for Magento, /app/code/local/Ax/Zoom/Model/Ax360.php
4	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
5	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
6	- * Version: 1.2.1
7	- * Date: 2016-05-15
8	- * Review: 2016-05-15
9	* URL: http://www.ajax-zoom.com
10	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
11	*
	@@ -77,16 +77,31 @@ class Ax_Zoom_Model_Ax360 extends Mage_Core_Model_Abstract
77	if ($group['qty'] > 0) {
78
79	$crop = empty($group['crop']) ? '[]' : trim(preg_replace('/\s+/', ' ', $group['crop']));
80	-
81	- if ($group['qty'] == 1) {
82	$json .= "'" . $group['id_360'] . "'" . ": {'path': '" . $this->rootFolder() . "js/axzoom/pic/360/" . $productId . "/" . $group['id_360'] . "/" . $group['id_360set'] . "'" . $settings . ", 'combinations': [" . $group['combinations'] . "]";
83	} else {
84	$json .= "'" . $group['id_360'] . "'" . ": {'path': '" . $this->rootFolder() . "js/axzoom/pic/360/" . $productId . "/" . $group['id_360'] . "'" . $settings . ", 'combinations': [" . $group['combinations'] . "]";






85	}
86
87	if ($crop && $crop != '[]') {


88	$json .= ', "crop": '.$crop;
89	}







90
91	$json .= '}';
92
	@@ -111,12 +126,20 @@ class Ax_Zoom_Model_Ax360 extends Mage_Core_Model_Abstract
111	if (!empty($settings)) $settings = ", $settings";
112
113	if ($group['qty'] > 0) {

114	$crop = empty($group['crop']) ? '[]' : trim(preg_replace('/\s+/', ' ', $group['crop']));

115
116	- if ($group['qty'] == 1) {
117	$json .= "'" . $group['id_360'] . "'" . ": {'path': '" . $this->rootFolder() . "js/axzoom/pic/360/" . $group['id_product'] . "/" . $group['id_360'] . "/" . $group['id_360set'] . "'" . $settings . ", 'combinations': [" . $group['combinations'] . "]";
118	} else {
119	$json .= "'" . $group['id_360'] . "'" . ": {'path': '" . $this->rootFolder() . "js/axzoom/pic/360/" . $group['id_product'] . "/" . $group['id_360'] . "'" . $settings . ", 'combinations': [" . $group['combinations'] . "]";






120	}
121
122	if ($crop && $crop != '[]') {
	@@ -125,6 +148,12 @@ class Ax_Zoom_Model_Ax360 extends Mage_Core_Model_Abstract
125	$json .= ', "crop": '.$crop;
126	}
127






128	$json .= '}';
129
130	$cnt++;
	@@ -144,9 +173,9 @@ class Ax_Zoom_Model_Ax360 extends Mage_Core_Model_Abstract
144	$settings = (array)Mage::helper('core')->jsonDecode($str);
145	foreach ($settings as $key => $value) {
146	if ($value == 'false' \|\| $value == 'true' \|\| $value == 'null' \|\| is_numeric($value) \|\| substr($value, 0, 1) == '{' \|\| substr($value, 0, 1) == '[') {
147	- $res[] = "'$key': $value";
148	} else {
149	- $res[] = "'$key': '$value'";
150	}
151	}
152	return implode(', ', $res);


3	* Module: jQuery AJAX-ZOOM for Magento, /app/code/local/Ax/Zoom/Model/Ax360.php
4	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
5	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
6	+ * Version: 1.2.3
7	+ * Date: 2016-08-12
8	+ * Review: 2016-08-12
9	* URL: http://www.ajax-zoom.com
10	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
11	*

77	if ($group['qty'] > 0) {
78
79	$crop = empty($group['crop']) ? '[]' : trim(preg_replace('/\s+/', ' ', $group['crop']));
80	+ $hotspot = empty($group['hotspot']) ? '[]' : trim(preg_replace('/\s+/', ' ', $group['hotspot']));
81	+ /*if ($group['qty'] == 1) {
82	$json .= "'" . $group['id_360'] . "'" . ": {'path': '" . $this->rootFolder() . "js/axzoom/pic/360/" . $productId . "/" . $group['id_360'] . "/" . $group['id_360set'] . "'" . $settings . ", 'combinations': [" . $group['combinations'] . "]";
83	} else {
84	$json .= "'" . $group['id_360'] . "'" . ": {'path': '" . $this->rootFolder() . "js/axzoom/pic/360/" . $productId . "/" . $group['id_360'] . "'" . $settings . ", 'combinations': [" . $group['combinations'] . "]";
85	+ }*/
86	+
87	+ if ($group['qty'] == 1) {
88	+ $json .= '"' . $group['id_360'] . '"' . ': {"path": "' . $this->rootFolder() . 'js/axzoom/pic/360/' . $productId . '/' . $group['id_360'] . '/' . $group['id_360set'] . '"' . $settings . ', "combinations": [' . $group['combinations'] . ']';
89	+ } else {
90	+ $json .= '"' . $group['id_360'] . '"' . ': {"path": "' . $this->rootFolder() . 'js/axzoom/pic/360/' . $productId . '/' . $group['id_360'] . '"' . $settings . ', "combinations": [' . $group['combinations'] . ']';
91	}
92
93	if ($crop && $crop != '[]') {
94	+ // this goes over parseJson
95	+ $crop = str_replace('\\', '\\\\', $crop);
96	$json .= ', "crop": '.$crop;
97	}
98	+
99	+ if ($hotspot && $hotspot != '{}') {
100	+ // this goes over parseJson
101	+ $hotspot = str_replace('\\', '\\\\', $hotspot);
102	+ $json .= ', "hotspotFilePath": '.$hotspot;
103	+ }
104	+
105
106	$json .= '}';
107

126	if (!empty($settings)) $settings = ", $settings";
127
128	if ($group['qty'] > 0) {
129	+
130	$crop = empty($group['crop']) ? '[]' : trim(preg_replace('/\s+/', ' ', $group['crop']));
131	+ $hotspot = empty($group['hotspot']) ? '[]' : trim(preg_replace('/\s+/', ' ', $group['hotspot']));
132
133	+ /*if ($group['qty'] == 1) {
134	$json .= "'" . $group['id_360'] . "'" . ": {'path': '" . $this->rootFolder() . "js/axzoom/pic/360/" . $group['id_product'] . "/" . $group['id_360'] . "/" . $group['id_360set'] . "'" . $settings . ", 'combinations': [" . $group['combinations'] . "]";
135	} else {
136	$json .= "'" . $group['id_360'] . "'" . ": {'path': '" . $this->rootFolder() . "js/axzoom/pic/360/" . $group['id_product'] . "/" . $group['id_360'] . "'" . $settings . ", 'combinations': [" . $group['combinations'] . "]";
137	+ }*/
138	+
139	+ if ($group['qty'] == 1) {
140	+ $json .= '"' . $group['id_360'] . '"' . ': {"path": "' . $this->rootFolder() . 'js/axzoom/pic/360/' . $group['id_product'] . '/' . $group['id_360'] . '/' . $group['id_360set'] . '"' . $settings . ', "combinations": [' . $group['combinations'] . ']';
141	+ } else {
142	+ $json .= '"' . $group['id_360'] . '"' . ': {"path": "' . $this->rootFolder() . 'js/axzoom/pic/360/' . $group['id_product'] . '/' . $group['id_360'] . '"' . $settings . ', "combinations": [' . $group['combinations'] . ']';
143	}
144
145	if ($crop && $crop != '[]') {

148	$json .= ', "crop": '.$crop;
149	}
150
151	+ if ($hotspot && $hotspot != '{}') {
152	+ // this goes over parseJson
153	+ $hotspot = str_replace('\\', '\\\\', $hotspot);
154	+ $json .= ', "hotspotFilePath": '.$hotspot;
155	+ }
156	+
157	$json .= '}';
158
159	$cnt++;

173	$settings = (array)Mage::helper('core')->jsonDecode($str);
174	foreach ($settings as $key => $value) {
175	if ($value == 'false' \|\| $value == 'true' \|\| $value == 'null' \|\| is_numeric($value) \|\| substr($value, 0, 1) == '{' \|\| substr($value, 0, 1) == '[') {
176	+ $res[] = '"'.$key.'": '.$value;
177	} else {
178	+ $res[] = '"'.$key.'": "'.$value.'"';
179	}
180	}
181	return implode(', ', $res);

app/code/local/Ax/Zoom/controllers/AxzoomController.php CHANGED Viewed

@@ -3,9 +3,9 @@
             *  Module: jQuery AJAX-ZOOM for Magento, /app/code/local/Ax/Zoom/controllers/IndexController.php
             *  Copyright: Copyright (c) 2010-2016 Vadim Jacobi
             *  License Agreement: http://www.ajax-zoom.com/index.php?cid=download
-            -
            *  Version: 1.2.2
-            -
            *  Date: 2016-08-03
-            -
            *  Review: 2016-08-03
             *  URL: http://www.ajax-zoom.com
             *  Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
+            *
@@ -170,6 +170,9 @@ class Ax_Zoom_AxzoomController extends Mage_Adminhtml_Controller_Action
             			if (!in_array('crop', $check_crop_field_fetch)){
             				$db->query('ALTER TABLE `'.$db_prefix.'ajaxzoom360` ADD `crop` TEXT NOT NULL');
+            			}
+            		}
             		$row = $db->fetchAll('SELECT * FROM `'.$db_prefix.'ajaxzoom360` WHERE id_360 = '.(int)$id_360.' LIMIT 1');
@@ -193,6 +196,48 @@ class Ax_Zoom_AxzoomController extends Mage_Adminhtml_Controller_Action
             			'status' => $result->rowCount()
             		)));
+            	}
                 public function AddSetAction()
+                {


3	* Module: jQuery AJAX-ZOOM for Magento, /app/code/local/Ax/Zoom/controllers/IndexController.php
4	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
5	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
6	+ * Version: 1.2.3
7	+ * Date: 2016-08-12
8	+ * Review: 2016-08-12
9	* URL: http://www.ajax-zoom.com
10	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
11	*

170	if (!in_array('crop', $check_crop_field_fetch)){
171	$db->query('ALTER TABLE `'.$db_prefix.'ajaxzoom360` ADD `crop` TEXT NOT NULL');
172	}
173	+ if (!in_array('hotspot', $check_crop_field_fetch)){
174	+ $db->query('ALTER TABLE `'.$db_prefix.'ajaxzoom360` ADD `hotspot` TEXT NOT NULL');
175	+ }
176	}
177
178	$row = $db->fetchAll('SELECT * FROM `'.$db_prefix.'ajaxzoom360` WHERE id_360 = '.(int)$id_360.' LIMIT 1');

196	'status' => $result->rowCount()
197	)));
198	}
199	+
200	+ public function GetHotspotJsonAction()
201	+ {
202	+ $get = Mage::app()->getRequest();
203	+ $id_360 = $get->getParam('id_360');
204	+
205	+ $db = Mage::getSingleton('core/resource')->getConnection('core_write');
206	+ $db_prefix = (string)Mage::getConfig()->getTablePrefix();
207	+
208	+ $check_crop_field = $db->query('SHOW FIELDS FROM `'.$db_prefix.'ajaxzoom360`');
209	+ if ($check_crop_field){
210	+ $check_crop_field_fetch = $check_crop_field->fetchAll(PDO::FETCH_COLUMN);
211	+ // Update table
212	+ if (!in_array('crop', $check_crop_field_fetch)){
213	+ $db->query('ALTER TABLE `'.$db_prefix.'ajaxzoom360` ADD `crop` TEXT NOT NULL');
214	+ }
215	+ if (!in_array('hotspot', $check_crop_field_fetch)){
216	+ $db->query('ALTER TABLE `'.$db_prefix.'ajaxzoom360` ADD `hotspot` TEXT NOT NULL');
217	+ }
218	+ }
219	+
220	+ $row = $db->fetchAll('SELECT * FROM `'.$db_prefix.'ajaxzoom360` WHERE id_360 = '.(int)$id_360.' LIMIT 1');
221	+ if ($row[0]['hotspot']){
222	+ die(stripslashes($row[0]['hotspot']));
223	+ }else{
224	+ die('{}');
225	+ }
226	+ }
227	+
228	+ public function SetHotspotJsonAction()
229	+ {
230	+ $json = $this->getRequest()->getPost('json');
231	+ $id_360 = Mage::app()->getRequest()->getParam('id_360');
232	+ $db_prefix = (string)Mage::getConfig()->getTablePrefix();
233	+ $db = Mage::getSingleton('core/resource')->getConnection('core_write');
234	+ $query = 'UPDATE `'.$db_prefix.'ajaxzoom360` SET hotspot = \''.addslashes($json).'\' WHERE id_360 = '.(int)$id_360;
235	+ $result = $db->query($query);
236	+
237	+ die(Mage::helper('core')->jsonEncode(array(
238	+ 'status' => $result->rowCount()
239	+ )));
240	+ }
241
242	public function AddSetAction()
243	{

app/code/local/Ax/Zoom/etc/config.xml CHANGED Viewed

	@@ -4,9 +4,9 @@
4	* Module: jQuery AJAX-ZOOM for Magento, /app/code/local/Ax/Zoom/etc/config.xml
5	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
6	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
7	- * Version: 1.2.2
8	- * Date: 2016-08-03
9	- * Review: 2016-08-03
10	* URL: http://www.ajax-zoom.com
11	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
12	*
	@@ -20,7 +20,7 @@
20
21	<modules>
22	<Ax_Zoom>
23	- <version>1.2.2</version>
24	</Ax_Zoom>
25	</modules>
26


4	* Module: jQuery AJAX-ZOOM for Magento, /app/code/local/Ax/Zoom/etc/config.xml
5	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
6	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
7	+ * Version: 1.2.3
8	+ * Date: 2016-08-12
9	+ * Review: 2016-08-12
10	* URL: http://www.ajax-zoom.com
11	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
12	*

20
21	<modules>
22	<Ax_Zoom>
23	+ <version>1.2.3</version>
24	</Ax_Zoom>
25	</modules>
26

app/code/local/Ax/Zoom/etc/system.xml CHANGED Viewed

	@@ -4,9 +4,9 @@
4	* Module: jQuery AJAX-ZOOM for Magento, /app/code/local/Ax/Zoom/etc/system.xml
5	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
6	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
7	- * Version: 1.2.2
8	- * Date: 2016-08-03
9	- * Review: 2016-08-03
10	* URL: http://www.ajax-zoom.com
11	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
12	*


4	* Module: jQuery AJAX-ZOOM for Magento, /app/code/local/Ax/Zoom/etc/system.xml
5	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
6	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
7	+ * Version: 1.2.3
8	+ * Date: 2016-08-12
9	+ * Review: 2016-08-12
10	* URL: http://www.ajax-zoom.com
11	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
12	*

app/design/adminhtml/default/default/template/axzoom/tab360-sets.phtml CHANGED Viewed

	@@ -3,9 +3,9 @@
3	* Module: jQuery AJAX-ZOOM for Magento, /app/design/adminhtml/default/default/template/axzoom/tab360-sets.phtml
4	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
5	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
6	- * Version: 1.2.1
7	- * Date: 2016-05-14
8	- * Review: 2016-05-14
9	* URL: http://www.ajax-zoom.com
10	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
11	*
	@@ -57,13 +57,18 @@ $conf = Mage::getStoreConfig('axzoom_options');
57	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAABX0lEQVQYGXXBPyiEcRgH8O/wJunSdRkvGSSZDDJckmSQZDCYrhskg0xGm3RJBoMMMkoGww2XJBkMMhh06XqTZJDOFV3e+/e+v+d5fo97ryuu+HzwmxnmIzOFdkWnHEeDF6WUPKragpkvOvjB11b5lLN8SatmQQpmkZYoy+laXzniT5YjkJKq/arNoOGtg47R5I/QgXyqSh5mVIr+OB9wxk9UBziNFi9uVdUSAHbRUOvlPb6nja8uk/QTtCJPfCEuJQGwixazxhl5VbXKx9Ue3g8mEGIXTZU+W+c0bVm1pXoc4Nx7B0LsAl6E1ilL23REh3xVjgG1QckgxLtW+ITOg2k00R7ngkmvm3doCSG5UBXXi6KFbypDtCEFVZNCqBoL5mhZHoIxNHgxzgP1Xnmz1WACP/wBvqXND8ckedfM8mW9P+eg3YdDm/JsRV5ov9SJv8mdqpVSDP8xY3xGK2jzDTL14vqSI1apAAAAAElFTkSuQmCC);
58	background-repeat: no-repeat;
59	}
60	-





61	#file360-add-button span{
62	padding-left: 20px;
63	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAulBMVEUAAADj4+Pi4uLk5OTm5ubn5+fo6Ojy8vLn5+fv7+/w8PDo6Oj29vbv7+/29vb19fX39/f7+/v6+vr8/Pz7+/v+/v77+/v8/Pz8/Pz7+/v7+/v8/Pz9/f38/Pz9/f38/Pz8/Pz9/f37+/v9/f39/f38/Pz9/f38/Pz9/f3+/v7////7+/v8/Pz9/f39/f39/f39/f39/f39/f39/f38/Pz8/Pz9/f39/f3+/v7+/v79/f3+/v7+/v7///84WsHxAAAAPHRSTlMAAgQEBAQEBAYIDBAYHBweLD5ESlBgbnJ4h42PkZmdn6Ghp6eztbm7u729y8vP1dvd3+Hp7e/v8fP3+f27bAlAAAAAjklEQVR42mXIxwKCMBRE0WfvqIiKYseCFWyAZvL/v+WLISvurOZQvsPNtNMAdwQJ1TcDfy11Gbgz01jDdGOaaACkmvzs5xr0xbZt9a0/+McTb9FcCYhlg2EwVFU9xLUYHoOQ3L2URhc6RykDVNcWOmWqdMHwVBAXQ7zphZChUFeRI5JeIhwGkx08Apvy/QCdyxpVfEL2sAAAAABJRU5ErkJggg==);
64	background-repeat: no-repeat;
65	}
66	-
67	.link_add{
68	margin-top: 2px;
69	margin-bottom: 2px;
	@@ -180,8 +185,8 @@ $conf = Mage::getStoreConfig('axzoom_options');
180	<tr class="headings">
181	<th><?php echo $this->__('Cover Image'); ?></th>
182	<th><?php echo $this->__('Name'); ?></th>
183	- <th><?php echo $this->__('Active'); ?></th>
184	- <th class="last" style="width:~~400px~~;"><?php echo $this->__('Actions'); ?></th>
185	</tr>
186	</thead>
187	<tbody id="imageTableSetsRows">
	@@ -203,10 +208,11 @@ $conf = Mage::getStoreConfig('axzoom_options');
203	</span>
204	</td>
205	<td>
206	- <button class="delete_set scalable delete"><span><?php echo $this->__('Delete'); ?></span></button>
207	<button class="images_set scalable"><span><?php echo $this->__('Images'); ?></span></button>
208	<button class="scalable preview_set hide_class"><span><?php echo $this->__('Preview'); ?></span></button>
209	- <button class="~~crop_set~~ scalable"><span><?php echo $this->__('~~360° Product Tour~~'); ?></span></button>


210	</td>
211	</tr>
212	</table>
	@@ -377,26 +383,57 @@ $conf = Mage::getStoreConfig('axzoom_options');
377
378	var id360 = $(this).parent().parent().data('group');
379	var id360set = $(this).parent().parent().attr('id');
380	-
381	- $.openAjaxZoomInFancyBox({href: '<?php echo Mage::getBaseUrl('js') ?>axzoom/preview/preview.php?3dDir=<?php echo Mage::getModel('axzoom/ax360')->rootFolder() ?>js/axzoom/pic/360/' + id_product + '/' + id360+'&group='+id360+'&id='+id360set, iframe: true});







382	});
383
384	-
385	$('.crop_set').die().live('click', function(e) {
386	e.preventDefault();
387
388	var id360 = $(this).parent().parent().data('group');
389	var id360set = $(this).parent().parent().attr('id');
390	-

391	var cropHref = '<?php echo Mage::getBaseUrl('js'); ?>axzoom/preview/cropeditor.php?';
392	cropHref += '3dDir=<?php echo Mage::getModel('axzoom/ax360')->rootFolder(); ?>js/axzoom/pic/360/' + id_product + '/' + id360;



393	cropHref += '&group='+id360+'&id='+id360set;
394	cropHref += '&url_get=<?php echo Mage::helper("adminhtml")->getUrl("adminhtml/axzoom/getCropJson"); ?>';
395	cropHref += '&url_set=<?php echo Mage::helper("adminhtml")->getUrl("adminhtml/axzoom/setCropJson"); ?>';
396	cropHref += '&form_key=<?php echo Mage::getSingleton('core/session')->getFormKey(); ?>';
397	-

398	$.openAjaxZoomInFancyBox({href: cropHref, iframe: true, scrolling: 1});
399




















400	});
401
402	$('.images_set').die().live('click', function(e) {


3	* Module: jQuery AJAX-ZOOM for Magento, /app/design/adminhtml/default/default/template/axzoom/tab360-sets.phtml
4	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
5	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
6	+ * Version: 1.2.3
7	+ * Date: 2016-08-12
8	+ * Review: 2016-08-12
9	* URL: http://www.ajax-zoom.com
10	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
11	*

57	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAABX0lEQVQYGXXBPyiEcRgH8O/wJunSdRkvGSSZDDJckmSQZDCYrhskg0xGm3RJBoMMMkoGww2XJBkMMhh06XqTZJDOFV3e+/e+v+d5fo97ryuu+HzwmxnmIzOFdkWnHEeDF6WUPKragpkvOvjB11b5lLN8SatmQQpmkZYoy+laXzniT5YjkJKq/arNoOGtg47R5I/QgXyqSh5mVIr+OB9wxk9UBziNFi9uVdUSAHbRUOvlPb6nja8uk/QTtCJPfCEuJQGwixazxhl5VbXKx9Ue3g8mEGIXTZU+W+c0bVm1pXoc4Nx7B0LsAl6E1ilL23REh3xVjgG1QckgxLtW+ITOg2k00R7ngkmvm3doCSG5UBXXi6KFbypDtCEFVZNCqBoL5mhZHoIxNHgxzgP1Xnmz1WACP/wBvqXND8ckedfM8mW9P+eg3YdDm/JsRV5ov9SJv8mdqpVSDP8xY3xGK2jzDTL14vqSI1apAAAAAElFTkSuQmCC);
58	background-repeat: no-repeat;
59	}
60	+ #imageTableSetsRows .hotspot_set>span {
61	+ padding-left: 20px;
62	+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAllBMVEUAAADs7Ozy8vL29vb29vb39/f4+Pj4+Pj4+Pj4+Pj4+Pj5+fn5+fn4+Pj5+fn6+vr6+vr6+vr6+vr5+fn6+vr6+vr6+vr8/Pz8/Pz8/Pz9/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f3+/v7+/v7+/v79/f3+/v7+/v7+/v7+/v7+/v7////Ln3C7AAAAMHRSTlMABA4SGhoiJCYqLjA2ODg4PEBESEhMUHyBmaOpr7O3u72/yc/R19/j5+vx9/f5+/1Qz7jwAAAAcUlEQVR4AXXBBw6CQBBA0W8vYFfsRexl3Jn7X85NEIRE3+O3YPOQXY9M/6mejEmd7BhNYruUSDRValC5a0iio2e8g45IlMUF0BBX5WNut9n0aktS9Zd6rk1mod6ar5Yz0y45K9U9eaHakIJtTNEg4o83rY4LEIWzwoYAAAAASUVORK5CYII=);
63	+ background-repeat: no-repeat;
64	+ }
65	+
66	#file360-add-button span{
67	padding-left: 20px;
68	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAulBMVEUAAADj4+Pi4uLk5OTm5ubn5+fo6Ojy8vLn5+fv7+/w8PDo6Oj29vbv7+/29vb19fX39/f7+/v6+vr8/Pz7+/v+/v77+/v8/Pz8/Pz7+/v7+/v8/Pz9/f38/Pz9/f38/Pz8/Pz9/f37+/v9/f39/f38/Pz9/f38/Pz9/f3+/v7////7+/v8/Pz9/f39/f39/f39/f39/f39/f39/f38/Pz8/Pz9/f39/f3+/v7+/v79/f3+/v7+/v7///84WsHxAAAAPHRSTlMAAgQEBAQEBAYIDBAYHBweLD5ESlBgbnJ4h42PkZmdn6Ghp6eztbm7u729y8vP1dvd3+Hp7e/v8fP3+f27bAlAAAAAjklEQVR42mXIxwKCMBRE0WfvqIiKYseCFWyAZvL/v+WLISvurOZQvsPNtNMAdwQJ1TcDfy11Gbgz01jDdGOaaACkmvzs5xr0xbZt9a0/+McTb9FcCYhlg2EwVFU9xLUYHoOQ3L2URhc6RykDVNcWOmWqdMHwVBAXQ7zphZChUFeRI5JeIhwGkx08Apvy/QCdyxpVfEL2sAAAAABJRU5ErkJggg==);
69	background-repeat: no-repeat;
70	}
71	+
72	.link_add{
73	margin-top: 2px;
74	margin-bottom: 2px;

185	<tr class="headings">
186	<th><?php echo $this->__('Cover Image'); ?></th>
187	<th><?php echo $this->__('Name'); ?></th>
188	+ <th style="width: 100px;"><?php echo $this->__('Active'); ?></th>
189	+ <th class="last" style="width: 250px;"><?php echo $this->__('Actions'); ?></th>
190	</tr>
191	</thead>
192	<tbody id="imageTableSetsRows">

208	</span>
209	</td>
210	<td>

211	<button class="images_set scalable"><span><?php echo $this->__('Images'); ?></span></button>
212	<button class="scalable preview_set hide_class"><span><?php echo $this->__('Preview'); ?></span></button>
213	+ <button class="delete_set scalable delete"><span><?php echo $this->__('Delete'); ?></span></button>
214	+ <button class="hotspot_set scalable" style="margin-top: 5px"><span><?php echo $this->__('Hotspots'); ?></span></button>
215	+ <button class="crop_set scalable" style="margin-top: 5px"><span><?php echo $this->__('360° Product Tour'); ?></span></button>
216	</td>
217	</tr>
218	</table>

383
384	var id360 = $(this).parent().parent().data('group');
385	var id360set = $(this).parent().parent().attr('id');
386	+ var qty = $('tr[data-group=' + id360 + ']').length;
387	+
388	+ var href = '<?php echo Mage::getBaseUrl('js') ?>axzoom/preview/preview.php?';
389	+ href += '3dDir=<?php echo Mage::getModel('axzoom/ax360')->rootFolder() ?>js/axzoom/pic/360/' + id_product + '/' + id360;
390	+ if (qty < 2){
391	+ href += '/' + id360set;
392	+ }
393	+ href += '&group='+id360+'&id='+id360set;
394	+ $.openAjaxZoomInFancyBox({href: href, iframe: true});
395	});
396

397	$('.crop_set').die().live('click', function(e) {
398	e.preventDefault();
399
400	var id360 = $(this).parent().parent().data('group');
401	var id360set = $(this).parent().parent().attr('id');
402	+ var qty = $('tr[data-group=' + id360 + ']').length;
403	+
404	var cropHref = '<?php echo Mage::getBaseUrl('js'); ?>axzoom/preview/cropeditor.php?';
405	cropHref += '3dDir=<?php echo Mage::getModel('axzoom/ax360')->rootFolder(); ?>js/axzoom/pic/360/' + id_product + '/' + id360;
406	+ if (qty < 2){
407	+ cropHref += '/' + id360set;
408	+ }
409	cropHref += '&group='+id360+'&id='+id360set;
410	cropHref += '&url_get=<?php echo Mage::helper("adminhtml")->getUrl("adminhtml/axzoom/getCropJson"); ?>';
411	cropHref += '&url_set=<?php echo Mage::helper("adminhtml")->getUrl("adminhtml/axzoom/setCropJson"); ?>';
412	cropHref += '&form_key=<?php echo Mage::getSingleton('core/session')->getFormKey(); ?>';
413	+ cropHref += '&hs_get=<?php echo Mage::helper("adminhtml")->getUrl("adminhtml/axzoom/getHotspotJson"); ?>';
414	+
415	$.openAjaxZoomInFancyBox({href: cropHref, iframe: true, scrolling: 1});
416
417	+ });
418	+
419	+ $('.hotspot_set').die().live('click', function(e) {
420	+ e.preventDefault();
421	+
422	+ var id360 = $(this).parent().parent().data('group');
423	+ var id360set = $(this).parent().parent().attr('id');
424	+ var qty = $('tr[data-group=' + id360 + ']').length;
425	+
426	+ var hotspotHref = '<?php echo Mage::getBaseUrl('js'); ?>axzoom/preview/hotspoteditor.php?';
427	+ hotspotHref += '3dDir=3dDir=<?php echo Mage::getModel('axzoom/ax360')->rootFolder(); ?>js/axzoom/pic/360/' + id_product + '/' + id360;
428	+ if (qty < 2){
429	+ hotspotHref += '/' + id360set;
430	+ }
431	+ hotspotHref += '&group='+id360+'&id='+id360set;
432	+ hotspotHref += '&url_get=<?php echo Mage::helper("adminhtml")->getUrl("adminhtml/axzoom/getHotspotJson"); ?>';
433	+ hotspotHref += '&url_set=<?php echo Mage::helper("adminhtml")->getUrl("adminhtml/axzoom/setHotspotJson"); ?>';
434	+ hotspotHref += '&form_key=<?php echo Mage::getSingleton('core/session')->getFormKey(); ?>';
435	+ $.openAjaxZoomInFancyBox({href: hotspotHref, iframe: true, scrolling: 1});
436	+
437	});
438
439	$('.images_set').die().live('click', function(e) {

app/design/frontend/base/default/template/ax_zoom/catalog/product/view/media.phtml CHANGED Viewed

	@@ -3,9 +3,9 @@
3	* Module: jQuery AJAX-ZOOM for Magento, /app/design/frontend/base/default/template/ax_zoom/catalog/product/view/media.phtml
4	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
5	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
6	- * Version: 1.2.0
7	- * Date: 2016-05-07
8	- * Review: 2016-05-07
9	* URL: http://www.ajax-zoom.com
10	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
11	*


3	* Module: jQuery AJAX-ZOOM for Magento, /app/design/frontend/base/default/template/ax_zoom/catalog/product/view/media.phtml
4	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
5	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
6	+ * Version: 1.2.3
7	+ * Date: 2016-08-12
8	+ * Review: 2016-08-12
9	* URL: http://www.ajax-zoom.com
10	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
11	*

js/axzoom/preview/cropeditor.php CHANGED Viewed

	@@ -3,9 +3,9 @@
3	* Module: jQuery AJAX-ZOOM for Magento, /jss/axzoom/preview.php
4	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
5	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
6	- * Version: 1.2.1
7	- * Date: 2016-05-15
8	- * Review: 2016-05-15
9	* URL: http://www.ajax-zoom.com
10	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
11	*
	@@ -31,7 +31,11 @@
31	}
32
33	/* Set to true to remove certain things not needed if included in shops / cms */


34	$axzm_cms_mode = true;


35	$first_load360_dir = Mage::app()->getRequest()->getParam('3dDir');
36	$default_thumb_size = $axzm_cms_mode ? 140 : 180;
37	$player_responsive = $axzm_cms_mode ? true : false;
	@@ -52,92 +56,94 @@
52	$id_360set = Mage::app()->getRequest()->getParam('id');
53	$first_load_crop_json = Mage::app()->getRequest()->getParam('url_get')."?id_360set=$id_360set&id_360=$id_360";
54	$save_crop_json = Mage::app()->getRequest()->getParam('url_set')."?id_360set=$id_360set&id_360=$id_360&form_key=".Mage::app()->getRequest()->getParam('form_key');



55	?>
56
57	- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
58	- <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/">
59	- <head>
60	- <title>jCrop AJAX-ZOOM zoomTo and crop on large images</title>
61	- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
62	- <meta http-equiv="imagetoolbar" content="no">
63	-
64	<?php
65	- if (!$~~axzm_cms_mode~~)
66	{
67	?>
68	- <meta property="og:type" content="article"/>
69	- <meta property="og:title" content="jCrop AJAX-ZOOM"/>
70	- <meta property="og:description" content="Crop high resolution images with jCrop and AJAX-ZOOM."/>
71	- <meta name="description" content="Crop high resolution images with jCrop and AJAX-ZOOM." />
72	- <meta property="og:image" content="http://www.ajax-zoom.com/pic/layout/image-zoom_35.jpg"/>
73	- <?php
74	- }
75	- ?>
76
















77	<?php


78	if (strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone'))
79	echo '<meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">';
80	else
81	echo '<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no">';
82	- ?>



83	<!-- jQuery core -->
84	- <script type="text/javascript" src="~~../axZm/~~plugins/jquery-1.8.3.min.js"></script>
85
86	<!-- AJAX-ZOOM -->
87	- <link rel="stylesheet" href="~~../~~axZm~~/axZm~~.css" type="text/css" media="screen">
88	- <script type="text/javascript" src="~~../axZm/~~jquery.axZm.js"></script>
89
90	<!-- jCrop (external jQuery plugin utilized for this crop editor) -->
91	- <link type="text/css" href="~~../axZm/~~plugins/jCrop/css/jquery.Jcrop.css" rel="stylesheet" />
92	- <script type="text/javascript" src="~~../axZm/~~plugins/jCrop/js/jquery.Jcrop.js"></script>
93
94	<!-- Include mousewheel script -->
95	- <script type="text/javascript" src="~~../axZm/~~extensions/axZmThumbSlider/lib/jquery.mousewheel.min.js"></script>
96
97	<!-- Only needed for the 360 hotspot example where fancybox is applied for one hotspot click event -->
98	- <link href="~~../axZm/~~plugins/demo/jquery.fancybox/jquery.fancybox-1.3.4.zIndex.css" type="text/css" media="screen" rel="stylesheet">
99	- <script type="text/javascript" src="~~../axZm/~~plugins/demo/jquery.fancybox/jquery.fancybox-1.3.4.js"></script>
100	-
101	<!-- Include thumbSlider CSS && JS. -->
102	- <link rel="stylesheet" type="text/css" href="~~../axZm/~~extensions/axZmThumbSlider/skins/default/jquery.axZm.thumbSlider.css" />
103	- <script type="text/javascript" src="~~../axZm/~~extensions/axZmThumbSlider/lib/jquery.axZm.thumbSlider.js"></script>
104
105	<!-- Set of functions for this image cropping tool -->
106	- <link rel="stylesheet" type="text/css" href="~~../axZm/~~extensions/jquery.axZm.imageCropEditor.css">
107	- <script type="text/javascript" src="~~../axZm/~~extensions/jquery.axZm.imageCropEditor.js"></script>
108
109	<!-- A small function to add title button which will expend to full description -->
110	- <link rel="stylesheet" type="text/css" href="~~../axZm/~~extensions/jquery.axZm.expButton.css">
111	- <script type="text/javascript" src="~~../axZm/~~extensions/jquery.axZm.expButton.js"></script>
112
113	<!-- Some other JavaScripts for the editor -->
114	- <script type="text/javascript" src="~~../axZm/~~plugins/JSON/jquery.json-2.3.min.js"></script>
115	- <script type="text/javascript" src="~~../axZm/~~plugins/js-beautify/beautify-all.min.js"></script>
116	- <script type="text/javascript" src="~~../axZm/~~plugins/jquery.scrollTo.min.js"></script>
117
118	<!-- Because of "sortable" used here, only needed for the editor! -->
119	- <link href="~~../axZm/~~plugins/jquery.ui/themes/ajax-zoom/jquery-ui.css" type="text/css" rel="stylesheet" />
120	- <script type="text/javascript" src="~~../axZm/~~plugins/jquery.ui/js/jquery-ui-1.8.24.custom.min.js"></script>
121
122	<!-- CLEditor - WYSIWYG Editor (external jQuery plugin) -->
123	- <link rel="stylesheet" type="text/css" href="~~../axZm/~~plugins/CLEditor/jquery.cleditor.css" />
124	- <script type="text/javascript" src="~~../axZm/~~plugins/CLEditor/jquery.cleditor.min.js"></script>
125	- <script type="text/javascript" src="~~../axZm/~~plugins/CLEditor/jquery.cleditor.table.min.js"></script>
126
127	<?php
128	if (!$axzm_cms_mode)
129	{
130	?>
131	<!-- Javascript to style the syntax, not needed! -->
132	- <link href="~~../axZm/~~plugins/demo/~~syntaxhighlighter~~/~~styles/shCore~~.css" type="text/css" ~~rel~~="~~stylesheet~~" />
133	- <~~link~~ ~~href~~="~~../axZm~~/plugins/demo/~~syntaxhighlighter~~/~~styles/shThemeCustom~~.~~css~~" ~~type="text/css" rel="stylesheet" />~~
134	- <style type="text/css">.syntaxhighlighter .line .number code{width: auto !important;} </style>
135	- <script type="text/javascript" src="../axZm/plugins/demo/syntaxhighlighter/src/shCore.js"></script>
136	- <script type="text/javascript" src="../axZm/plugins/demo/syntaxhighlighter/scripts/shBrushJScript.js"></script>
137	- <script type="text/javascript" src="../axZm/plugins/demo/syntaxhighlighter/scripts/shBrushPhp.js"></script>
138	- <script type="text/javascript" src="../axZm/plugins/demo/syntaxhighlighter/scripts/shBrushCss.js"></script>
139	- <script type="text/javascript" src="../axZm/plugins/demo/syntaxhighlighter/scripts/shBrushXml.js"></script>
140	- <script type="text/javascript">SyntaxHighlighter.all();</script>
141	<?php
142	}
143	?>
	@@ -151,13 +157,27 @@ if (!$axzm_cms_mode)
151	echo 'jQuery.aZcropEd.errors = false;';
152	?>
153	</script>
154	-



155	</head>
156	<body>
157
158	<?php
159	if (!$axzm_cms_mode)
160	include ('navi.php');











161	?>
162
163	<div id="outerWrap" style="width: 821px; margin: 0 auto;">
	@@ -201,9 +221,9 @@ if (!$axzm_cms_mode)
201	<ul>
202	<li><a href="#aZcR_tabs-about">About</a></li>
203	<li><a href="#aZcR_tabs-sel">Crop settings</a></li>
204	- <li><a href="#aZcR_tabs-crops">~~Cropped images~~</a></li>
205	- <li><a href="#aZcR_tabs-descr">~~Description / Settings~~</a></li>
206	- <li><a href="#aZcR_tabs-import"><?php echo !$axzm_cms_mode ? 'Import' : 'Save'; ?></a></li>
207	<?php
208	if (!$axzm_cms_mode)
209	{
	@@ -221,7 +241,10 @@ if (!$axzm_cms_mode)
221	if (!$axzm_cms_mode)
222	{
223	?>
224	- <div class="legend">About AJAX-ZOOM crop editor ~~[Last updated: 2016-04-25]</div~~>



225	<p>With this tool you can easily create several crops from 2D images / galleries,
226	360 spins or 3D multirow which are loaded into AJAX-ZOOM player.
227	Besides other thinkable purposes the goal here is to make a "crop gallery" placed outside of the AJAX-ZOOM player.
	@@ -259,15 +282,15 @@ if (!$axzm_cms_mode)
259	</script>
260	<div class="legend">Demo other content</div>
261	<p>Press on the buttons below to load a different content into the player.</p>
262	- <input type="button" value="360 example"
263	onclick="jQuery.aZcropEd.changeAxZmContentPHP(loadDemo[1])">
264	- <input type="button" value="2d example (single image)"
265	onclick="jQuery.aZcropEd.changeAxZmContentPHP(loadDemo[2])">
266	- <input type="button" value="2d gallery (many images)"
267	onclick="jQuery.aZcropEd.changeAxZmContentPHP(loadDemo[3])">
268	- <input type="button" value="3d example (multirow)"
269	onclick="jQuery.aZcropEd.changeAxZmContentPHP(loadDemo[4])">
270	- <input type="button" value="360 with hotspots"
271	onclick="jQuery.aZcropEd.changeAxZmContentPHP(loadDemo[5])">
272	</div>
273	<?php
	@@ -280,17 +303,17 @@ if (!$axzm_cms_mode)
280	<div class="legend">How to</div>
281	<ol>
282	<li style="margin-bottom: 10px">
283	- <img src="~~../axZm/~~icons/default/button_iPad_settings.png" width="25" style="vertical-align: middle; margin: 2px 5px 2px 0px">
284	Optionally hit crop settings button or
285	<a class="linkShowTab" href="javascript: void(0)" onclick="jQuery('#aZcR_tabs').tabs('select','#aZcR_tabs-sel');">
286	Crop settings</a>tab to adjust crop selector e.g. set aspect ratio and output parameters for the thumbnail.
287	</li>
288	<li style="margin-bottom: 10px">
289	- <img src="~~../axZm/~~icons/default/button_iPad_jcrop.png" width="25" style="vertical-align: middle; margin: 2px 5px 2px 0px">
290	Hit the crop button to toggle crop and select region to crop.
291	</li>
292	<li style="margin-bottom: 10px">
293	- <img src="~~../axZm/~~icons/default/button_iPad_fire.png" width="25" style="vertical-align: middle; margin: 2px 5px 2px 0px">
294	When ready hit the red "fire crop" button.
295	</li>
296	<li style="margin-bottom: 10px">
	@@ -301,7 +324,7 @@ if (!$axzm_cms_mode)
301	<li style="margin-bottom: 10px">
302	Optionally add thumb title, title and description to the crop regions in
303	<a class="linkShowTab" href="javascript: void(0)"
304	- onclick="jQuery('#aZcR_tabs').tabs('select','#aZcR_tabs-descr');">~~Description / Settings~~</a> tab.
305	</li>
306	<li>
307	<a class="linkShowTab" href="javascript: void(0)"
	@@ -339,28 +362,28 @@ if (!$axzm_cms_mode)
339	<div class="azMsg clearfix">
340	<a href="example35_clean.php">
341	<img src="http://www.ajax-zoom.com/pic/layout/image-zoom_35_clean.jpg"
342	- width="100" align="left" style="margin~~-right~~: 10px; vertical-align: top; ~~border: 2px groove #ffffff;~~">
343	</a>
344	<a href="example35_clean.php">example35_clean.php</a> basically has the same setup as this editor but without the toolbar under the player.
345	</div>
346	<div class="azMsg clearfix">
347	<a href="example35_clean_horizontal.php">
348	<img src="http://www.ajax-zoom.com/pic/layout/image-zoom_35_clean_horizontal.jpg"
349	- width="100" align="left" style="margin~~-right~~: 10px; vertical-align: top; ~~border: 2px groove #ffffff;~~">
350	</a>
351	If you want to have a horizontal gallery please check out <a href="example35_clean_horizontal.php">example35_clean_horizontal.php</a>
352	</div>
353	<div class="azMsg clearfix">
354	<a href="example35_responsive.php">
355	<img src="http://www.ajax-zoom.com/pic/layout/image-zoom_35_responsive.jpg"
356	- width="100" align="left" style="margin~~-right~~: 10px; vertical-align: top; ~~border: 2px groove #ffffff;~~">
357	</a>
358	For responsive integrations please use <a href="example35_responsive.php">example35_responsive.php</a>
359	</div>
360	<div class="azMsg clearfix">
361	<a href="example35_gallery.php">
362	<img src="http://www.ajax-zoom.com/pic/layout/image-zoom_35_gallery.jpg"
363	- width="100" align="left" style="margin~~-right~~: 10px; vertical-align: top; ~~border: 2px groove #ffffff;~~">
364	</a>
365	Of course the cropped thumbnails do not need to be loaded into the thumb slider.
366	In <a href="example35_gallery.php">example35_gallery.php</a> they are appended to some div.
	@@ -368,16 +391,15 @@ if (!$axzm_cms_mode)
368	<div class="azMsg clearfix">
369	<a href="example32_responsive.php">
370	<img src="http://www.ajax-zoom.com/pic/layout/image-zoom_32_responsive.jpg"
371	- width="100" align="left" style="margin~~-right~~: 10px; vertical-align: top; ~~border: 2px groove #ffffff;~~">
372	</a>
373	<a href="example32_responsive.php">example32_responsive.php</a>
374	optionally loads the results of this crop editor into mouseover zoom / 360 combination
375	and instantly attaches the crop gallery to the player. Very convenient for e-commerce.
376	</div>
377
378	- <~~div class="azMsg"><~~a href="http://www.ajax-zoom.com/index.php?cid=contact">On request</a>
379	AJAX-ZOOM team will deliver to you exactly what you need as a different example or integrated into your page layout / html.
380	- </div>
381
382	<div class="legend">The final code example</div>
383	The only difference between basic AJAX-ZOOM implementation / example
	@@ -386,7 +408,7 @@ if (!$axzm_cms_mode)
386	the thumbsnails; all codes for implementing can be also found in the example35_*.php files.
387	<div class="legend">JavaScript & CSS files in Head</div>
388	<?php
389	- echo "<pre class='brush: html'>";
390	echo htmlspecialchars ('
391	<!-- jQuery core -->
392	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	@@ -407,12 +429,12 @@ if (!$axzm_cms_mode)
407	<link rel="stylesheet" href="../axZm/extensions/jquery.axZm.expButton.css" type="text/css" />
408	<script type="text/javascript" src="../axZm/extensions/jquery.axZm.expButton.js"></script>
409	');
410	- echo '</pre>';
411	?>
412
413	<div class="legend">CSS</div>
414	<?php
415	- echo '<pre class="brush: css">';
416	echo htmlspecialchars ('
417	#playerInnerWrap{
418	position: relative; border-left: 1px solid #AAAAAA; border-top: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA;
	@@ -431,12 +453,12 @@ if (!$axzm_cms_mode)
431	}
432
433	');
434	- echo '</pre>';
435	?>
436
437	<div class="legend">HTML markup (taken from <a href="http://www.ajax-zoom.com/examples/example35_clean.php">example35_clean.php</a>)</div>
438	<?php
439	- echo "<pre class='brush: html'>";
440	echo htmlspecialchars ('
441	<div id="playerInnerWrap" style="min-height: 480px;">
442	<div id="azPlayer" style="width: 721px;">
	@@ -452,12 +474,12 @@ if (!$axzm_cms_mode)
452	</div>
453	</div>
454	');
455	- echo '</pre>';
456	?>
457
458	<div class="legend">Javascript</div>
459	<?php
460	- echo "<pre class='brush: js'>";
461	echo htmlspecialchars ('
462	// Init the slider
463	// Thumbs will be appended instantly
	@@ -494,7 +516,7 @@ ajaxZoom.parameter = "example=spinIpad&3dDir=../pic/zoom3d/Canon_1100D";
494
495	// Id of element where AJAX-ZOOM will be loaded into
496	ajaxZoom.divID = "azPlayer";
497	-
498	// Define callbacks, for complete list check the docs
499	ajaxZoom.opt = {
500	onLoad: function(){
	@@ -581,29 +603,9 @@ jQuery.fn.axZm.load({
581	//window.fullScreenStartSplash = {enable: false, className: false, opacity: 0.75};
582	//jQuery.fn.axZm.openFullScreen(ajaxZoom.path, ajaxZoom.parameter, ajaxZoom.opt, ajaxZoom.divID, false, false);
583	');
584	- echo '</pre>';
585	?>
586
587	- <div class="legend">Is it free?</div>
588	-
589	- <ul style="margin: 0;">
590	- <li style="margin-top: 10px">
591	- The answer is Yes and No. AJAX-ZOOM has it's own
592	- <a href="http://www.ajax-zoom.com/index.php?cid=download#heading_4">License Agreement</a>, please read!
593	- </li>
594	- <li style="margin-top: 10px">
595	- Under certain conditions You can use it totally for free!
596	- </li>
597	- <li style="margin-top: 10px">
598	- In any case you can and should <a href="http://www.ajax-zoom.com/index.php?cid=download" target="_blank">download</a>
599	- and test AJAX-ZOOM without any further obligations. If you like it and would have certain features enabled - You can buy it.
600	- </li>
601	- <li style="margin-top: 10px">
602	- In case after all you have any doubts or questions please contact the
603	- <a href="http://www.ajax-zoom.com/index.php?cid=contact" target="_blank">support</a>.
604	- </li>
605	- </ul>
606	-
607	<?php
608	/* This include is just for the demo, you can remove it */
609	include ('footer.php');
	@@ -629,28 +631,37 @@ jQuery.fn.axZm.load({
629	</div>
630	<div id="cropOpt_ratioBox" style="clear: both; margin: 5px 0px 5px 0px;">
631	<label>Aspect ratio:</label>
632	- W: <input id="cropOpt_ratio1" type="text" value="1" ~~style~~="~~width: 50px~~" ~~onchange="jQuery.aZcropEd.jCropAspectRatio()">~~
633	- ~~<input type="button"~~ style="width: ~~30px;~~" ~~value~~="~~⇔" onclick="~~jQuery.aZcropEd.~~jCropAspectFlipValues~~()">
634	- H: <input id="~~cropOpt_ratio2~~" ~~type~~="~~text~~" value="1" ~~style~~="~~width: 50px~~" ~~onchange="jQuery.aZcropEd.jCropAspectRatio()">~~



635	<div>
636	<label></label>
637	- <input type="button" value="as thumb" ~~style~~="~~margin-top: 3px; width: 80px;~~" ~~onclick="jQuery.aZcropEd.jCropAspectAsThumb()">~~
638	- ~~<input type="button" value="as image"~~ style="margin-top: 3px; width: 80px;" onclick="jQuery.aZcropEd.~~jCropAspectAsImage~~()">


639	</div>
640	</div>
641	<div id="cropOpt_sizeBox" style="clear: both; margin: 5px 0px 5px 0px; display: none;">
642	<label>Fixed size:</label>
643	- W: <input id="cropOpt_sizeW" type="text" value="" ~~style~~="~~width: 50px~~" ~~onchange="jQuery.aZcropEd.jCropFixedSize()">~~
644	- ~~H: <input id="cropOpt_sizeH" type="text" value=""~~ style="width: 50px" onchange="jQuery.aZcropEd.jCropFixedSize()"> px


645	</div>
646
647	<div class="legend">Thumbnail settings</div>
648
649	<div style="clear: both; margin: 5px 0px 5px 0px;">
650	<label>Thumbnail size:</label>
651	- W: <input id="cropOpt_thumbSizeW" type="text" ~~value="<?php echo $default_thumb_size; ?>"~~

652	style="width: 50px" onchange="jQuery.aZcropEd.jCropInitSettings()">
653	- H: <input id="cropOpt_thumbSizeH" type="text" ~~value="<?php echo $default_thumb_size; ?>"~~

654	style="width: 50px" onchange="jQuery.aZcropEd.jCropInitSettings()"> px
655	</div>
656
	@@ -665,20 +676,22 @@ jQuery.fn.axZm.load({
665
666	<div id="cropOpt_colorBox" style="clear: both; margin: 5px 0px 5px 0px; display: none;">
667	<label>Background color (hex):</label>
668	- #<input id="cropOpt_backColor" type="text" value="FFFFFF" ~~style~~="~~width: 100px~~" ~~onchange="jQuery.aZcropEd.jCropInitSettings()">~~

669	</div>
670	<div style="clear: both; margin: 5px 0px 5px 0px;">
671	<label>Jpeg quality:</label>
672	- <input id="cropOpt_jpgQual" type="text" value="90" style="width: 40px" ~~onchange~~="~~jQuery.aZcropEd.jCropInitSettings()~~">

673	(10 - 100)
674	</div>
675	<div style="clear: both; margin: 5px 0px 5px 0px;">
676	<label>Cache (can be set later):</label>
677	- <input id="cropOpt_cache" type="checkbox" value="1" ~~onchange~~="~~jQuery.aZcropEd.jCropInitSettings()~~">

678	</div>
679	</div>
680	</div>
681	-
682	</div>
683
684	<!-- Cropped images -->
	@@ -702,7 +715,8 @@ jQuery.fn.axZm.load({
702	if (!$axzm_cms_mode)
703	{
704	?>
705	- <div class="azMsg">Drag & drop to reorder the thumbs, ~~click to get the paths and other information (see below),~~

706	double click to zoom.
707	</div>
708	<?php
	@@ -711,7 +725,8 @@ jQuery.fn.axZm.load({
711
712	<!-- Crop results real size -->
713	<div id="aZcR_cropResults"></div>
714	- <input type="button" value="Reamove all crops" ~~style~~="~~margin-top: 5px~~" ~~onclick="jQuery.aZcropEd.clearAll()" />~~

715	<?php
716	if (!$axzm_cms_mode)
717	{
	@@ -722,19 +737,22 @@ jQuery.fn.axZm.load({
722
723	<div style="clear: both; margin: 5px 0px 5px 0px;">
724	<label>Query string:</label>
725	- <input id="aZcR_qString" type="text" onClick="this.select();" ~~style~~="~~margin-bottom: 5px; width: 100%~~" ~~value="">~~

726	</div>
727
728	<div style="clear: both; margin: 5px 0px 5px 0px;">
729	<label>Url:</label>
730	(please note that full Url might differ if this editor is implemented in a backend of some CMS)
731	- <input id="aZcR_url" type="text" onClick="this.select();" ~~style~~="~~margin-bottom: 5px; width: 100%~~" ~~value="">~~

732	</div>
733
734	<div style="clear: both; margin: 5px 0px 5px 0px;">
735	<label>Cached image url:</label>
736	(only available if "cache" option is chacked under "crop settings" tab)
737	- <input id="aZcR_contentLocation" type="text" onClick="this.select();" ~~style~~="~~margin-bottom: 5px; width: 100%~~" ~~value="">~~

738	</div>
739	<?php
740	}
	@@ -743,12 +761,9 @@ jQuery.fn.axZm.load({
743
744	<!-- Description -->
745	<div id="aZcR_tabs-descr">
746	- <div class="legend">Crop ~~description~~</div>
747
748	<div class="azMsg">
749	- <img border="0" style="position: relative; cursor: pointer; float: right; margin-right: -5px; margin-top: -5px;"
750	- alt="close this box" title="close this message" onclick="jQuery(this).parent().remove()" src="../axZm/icons/default/zoombutton_close.png">
751	-
752	<?php
753	if (!$axzm_cms_mode)
754	{
	@@ -757,19 +772,21 @@ jQuery.fn.axZm.load({
757	In this editor and also in the derived "clean" examples like
758	<a href="example35_clean.php">example35_clean.php</a>
759	we use "axZmEb" - expandable button (AJAX-ZOOM additional plugin) to display these titles \|\| descriptions
760	- over the image respectively inside the player. ~~You could however easily change the usage of title \|\| description in your implementation,~~

761	e.g. display them under the player or whatever. Just change the "handleTexts" property of the options object
762	- when passing it to jQuery.axZmImageCropLoad - see source code of e.g. ~~<a href="example35_clean.php">example35_clean.php</a>;<br><hr />~~

763
764	Besides HTML or your text you could also load external content in iframe! The prefix for the source is "iframe:"<br><br>
765	- e.g. to load an ~~extennal~~ page simply put something like this in the descripion:<br>
766	- iframe://www.canon.co.uk/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1100D
767	<br><br>
768	To load a YouTube video you could put this (replace eLvvPr6WPdg with your video code): <br>
769	- iframe://www.youtube.com/embed/eLvvPr6WPdg?feature=player_detailpage
770	<br><br>
771	To load some dynamic content over AJAX use "ajax:" as prefix, e.g.<br>
772	- ajax:/test/some_content_data.php?req=123
773	<br><br>
774	If you do not define the title, then the content will be loaded instantly as soon as the spin animation finishes.
775
	@@ -781,7 +798,7 @@ jQuery.fn.axZm.load({
781	Optionally add a title and/or description.
782	Besides HTML or your text you could also load external content in iframe!
783	The prefix for the source is "iframe:"<br><br>
784	- e.g. to load an ~~extennal~~ page simply put something like this in the descripion:<br>
785	iframe://www.canon.co.uk/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1100D
786	<br><br>
787	To load a YouTube video you could put this (replace eLvvPr6WPdg with your video code): <br>
	@@ -831,31 +848,32 @@ jQuery.fn.axZm.load({
831	if (!$axzm_cms_mode)
832	{
833	?>
834	- <input type="button" value="Get all" onclick="jQuery.aZcropEd.getAllThumbs()">
835
836	- <select onchange="jQuery.aZcropEd.getAllThumbs()" autocomplete=off>
837	<option value="qString">Query string</option>
838	<option value="url">Url</option>
839	<option value="contentLocation">Cached image url</option>
840	</select>
841
842	- <select onchange="handleDisplayLongLine(this)" autocomplete=off>
843	<option value="JSON_data">JSON with data</option>
844	<option value="JSON">JSON</option>
845	<option value="CSV">CSV</option>
846	</select>
847
848	- <span style="display: none;">separated with <input type="text" value="\|" style="width: 20px;" ~~onchange~~="~~jQuery.aZcropEd.getAllThumbs()~~"~~></span>~~

849	<br>and convert to be cached
850	- <input type="checkbox" value="1" onclick="jQuery.aZcropEd.getAllThumbs()" checked="true" autocomplete=off>
851	and replace thumb size
852	- <input type="checkbox" value="1" onclick="jQuery(this).next().toggle(); jQuery.aZcropEd.getAllThumbs();" autocomplete=off>
853	<span style="display: none">
854	- W: <input type="text" style="width: 50px" onchange="jQuery.aZcropEd.getAllThumbs();" autocomplete=off>
855	- H: <input type="text" style="width: 50px" onchange="jQuery.aZcropEd.getAllThumbs();" autocomplete=off> px
856	</span>
857	<br>and convert px coordinates to percentage
858	- <input type="checkbox" value="1" onclick="jQuery.aZcropEd.getAllThumbs();" autocomplete=off>
859	<?php
860	}
861	else
	@@ -863,13 +881,13 @@ jQuery.fn.axZm.load({
863	?>
864	<input type="button" value="Refresh" onclick="jQuery.aZcropEd.getAllThumbs()">
865
866	- <select style="display: none;" onchange="jQuery.aZcropEd.getAllThumbs()" autocomplete=off>
867	<option value="qString">Query string</option>
868	<option value="url">Url</option>
869	<option value="contentLocation">Cached image url</option>
870	</select>
871
872	- <select style="display: none;" onchange="handleDisplayLongLine(this)" autocomplete=off>
873	<option value="JSON_data">JSON with data</option>
874	<option value="JSON">JSON</option>
875	<option value="CSV">CSV</option>
	@@ -877,30 +895,30 @@ jQuery.fn.axZm.load({
877
878	<span style="display: none;"> <input type="text" value="\|" style="width: 20px; display: none;"
879	onchange="jQuery.aZcropEd.getAllThumbs()" autocomplete=off></span>
880	- <input style="display: none;" type="checkbox" value="1" onclick="jQuery.aZcropEd.getAllThumbs()" checked="true" autocomplete=off>
881	and replace thumb size
882	- <input type="checkbox" value="1" onclick="jQuery(this).next().toggle(); jQuery.aZcropEd.getAllThumbs();" autocomplete=off>
883	<span style="display: none">
884	- W: <input type="text" style="width: 50px" onchange="jQuery.aZcropEd.getAllThumbs();" autocomplete=off>
885	- H: <input type="text" style="width: 50px" onchange="jQuery.aZcropEd.getAllThumbs();" autocomplete=off> px
886	</span>
887	- <input style="display: none;" type="checkbox" value="1" onclick="jQuery.aZcropEd.getAllThumbs();" autocomplete=off>
888
889	<?php
890	}
891	?>
892	</div>
893
894	- <form <?php echo !$axzm_cms_mode ? 'action="~~../axZm/~~saveCropJSON.php"' : ''; ?> id="aZcR_saveJSON">
895	- <textarea id="aZcR_getAllThumbs" style="width: 100%; height: 350px; font-size: 10px; margin-top: 5px;" ~~spellcheck="false"></textarea>~~

896	</form>
897	-
898	<?php
899	if ($axzm_cms_mode)
900	{
901	?>
902	- <input type="button" value="Save into database" id="btnSaveJSON">
903	- <input type="button" value="Remove line breaks" style="margin-top: 5px;"
904	onclick="jQuery('#aZcR_getAllThumbs').val(jQuery('#aZcR_getAllThumbs').val().replace(/(\r\n\|\n\|\r\|\t)/gm,''))">
905
906	<div id="dialog-saveJSON" title="JSON saved" style="display: none;">
	@@ -934,8 +952,9 @@ jQuery.fn.axZm.load({
934	{
935	?>
936	<!-- Just a button to select text in the textarea above, can be removed -->
937	- <input type="button" value="Select text" style="margin-top: 5px;" ~~onclick~~="~~jQuery('#aZcR_getAllThumbs')[0].select()~~">
938	- ~~<input type~~="~~button~~" ~~value="Remove line breaks" style="margin-top: 5px;"~~

939	onclick="jQuery('#aZcR_getAllThumbs').val(jQuery('#aZcR_getAllThumbs').val().replace(/(\r\n\|\n\|\r\|\t)/gm,''))">
940
941	<!-- Save -->
	@@ -948,8 +967,8 @@ jQuery.fn.axZm.load({
948	<div style="margin-top: 10px"><label>Create backup:</label><input type="checkbox" id="aZcR_jsBackUp" value="1" checked> -
949	creates backup of the current JSON file if present with a timestamp in file name</div>
950	<div style="margin-top: 10px"><label>Save JSON:</label>
951	- <input style="width: 100px;" type="button" value="Save" onClick="jQuery.aZcropEd.saveJSONtoFile();">
952	- to <input type="text" value="" id="aZcR_jsFileName">.json (a-zA-Z0-9-_)
953	</div>
954
955	<div style="margin-top: 10px"><label></label>
	@@ -962,11 +981,8 @@ jQuery.fn.axZm.load({
962	</div>
963
964	<div class="legend">Notes</div>
965	- ~~<ul>~~
966	- <li>~~In your final frontend presentation you can compose url out of query string with js~~
967	- <code>jQuery.fn.axZm.installPath()+'zoomLoad.php?'+queryString</code>
968	- </li>
969	- </ul>
970	<?php
971	}
972	?>
	@@ -986,43 +1002,43 @@ jQuery.fn.axZm.load({
986	</div>
987
988	<div style="clear: both; margin: 5px 0px 5px 0px;">
989	- <label>1. Path for 2D:</label> <input type="text" value="" ~~id="aZcR_pathToLoad2D" style="width: 400px;"> or~~

990	</div>
991
992	<div style="clear: both; margin: 5px 0px 5px 0px;">
993	- <label>2. Path for 360 or 3D:</label> <input type="text" value="" ~~id="aZcR_pathToLoad360" style="width: 400px;">~~

994	</div>
995
996	<div style="clear: both; margin: 15px 0px 5px 0px;">
997	- <label>3. Hotspot file path:</label> <input type="text" value="" ~~id="aZcR_hotspotFileToLoad" style="width: 350px;"> (optional)~~

998	</div>
999
1000	<div style="clear: both; margin: 5px 0px 5px 0px;">
1001	- <label>4. Crop file path:</label> <input type="text" value="" ~~id="aZcR_cropFileToLoad" style="width: 350px;"> (optional)~~

1002	</div>
1003
1004	<div style="clear: both; margin: 5px 0px 5px 0px;">
1005	- <input type="button" value="LOAD" onClick="jQuery.aZcropEd.changeAxZmContentPHP();">
1006	- <input type="button" value="GET" onClick="jQuery.aZcropEd.getLoadedParameters();">
1007	</div>
1008
1009	<div id="aZcR_pathToParameter"></div>
1010
1011	<div class="legend">How does it work:</div>
1012	-
1013	<div style="clear: both; margin: 5px 0px 5px 0px;">
1014	<ol>
1015	<li>
1016	- <ul>
1017	- ~~<li><strong>For~~ ~~2D</strong>~~ (~~single~~ ~~image~~ or ~~gallery~~ ~~with~~ ~~more images)~~
1018	- ~~please enter local path(s) to the image(s), e~~.g. <br>
1019	- ~~"<code>/pic/zoom/animals/test_animals1~~.~~png</code>"<~~br>
1020	- ~~or image set with image paths separated with vertical dash e~~.~~g.<~~br>
1021	- ~~"<code>/pic/zoom/animals/test_animals1~~.~~png\|/pic/zoom/animals/test_animals2~~.~~png</code>"~~<br>
1022	- ~~If you want to load all images from a folder please just enter the path to this folder e.g.~~ <br>
1023	- "<code>/pic/zoom/animals</code>"
1024	- </li>
1025	- </ul>
1026	</li>
1027	<li style="margin-top: 10px;">
1028	<ul>
	@@ -1040,37 +1056,28 @@ jQuery.fn.axZm.load({
1040	</ul>
1041	</li>
1042	<li style="margin-top: 10px;">
1043	- <ul>
1044	- <~~li style=~~"~~margin-top:~~ ~~5px;">~~
1045	- ~~<strong>Hotspot~~ ~~file~~ ~~path</strong>~~ is ~~the~~ ~~path to the~~ file ~~with~~ ~~hotspot~~ ~~configurations and positions, e~~.~~g.<br~~>
1046	- "<code>../pic/hotspotJS/eos_1100D.js</code>"<br>
1047	- You can create such a file in <a href="example33.php">example33.php</a>
1048	- </li>
1049	- </ul>
1050	</li>
1051	-
1052	<li style="margin-top: 10px;">
1053	- <ul>
1054	- <~~li style=~~"~~margin-top:~~ ~~5px;">~~
1055	- <strong>Crop file path</strong> is the path to the file with crop data which can be created with this editor, e.g.<br>
1056	- "<code>../pic/hotspotJS/eos_1100d.json</code>"<br>
1057	-
1058	- </li>
1059	- </ul>
1060	</li>
1061	</ol>
1062	</div>
1063
1064	<div class="legend">Load only JSON data from file into editor</div>
1065	- <div style="margin-top: 10px">
1066	- <label>Crop JSON file path:</label>
1067	- <input type="text" value="" id="aZcR_onlyJSONcropFile" style="width: 350px;">
1068	- </div>
1069	- <label></label>e.g.: "~~../~~pic/cropJSON/eos_1100d.json"
1070	- <div style="margin-top: 10px">
1071	- <label></label>
1072	- <input type="button" value="Load" ~~onclick~~="~~jQuery.aZcropEd.getJSONdataFromFile(jQuery('#aZcR_onlyJSONcropFile').val())~~">
1073	- ~~</div~~>

1074
1075	</div>
1076
	@@ -1093,6 +1100,18 @@ jQuery.fn.axZm.load({
1093	// First json to load
1094	onLoad: function(){ // onSpinPreloadEnd
1095	jQuery.aZcropEd.getJSONdataFromFile('<?php echo $first_load_crop_json;?>');












1096	},
1097
1098	onCropEnd: function(){
	@@ -1106,7 +1125,7 @@ jQuery.fn.axZm.load({
1106	}
1107	},
1108
1109	- onBeforeStart: function(){
1110	// Set background color, can also be done in css file
1111	jQuery('.axZm_zoomContainer').css({backgroundColor: '#FFFFFF'});
1112
	@@ -1245,7 +1264,7 @@ jQuery.fn.axZm.load({
1245	};
1246
1247	// Define the path to the axZm folder, adjust the path if needed!
1248	- ajaxZoom.path = "~~../axZm/~~";
1249
1250	// Define your custom parameter query string
1251	// example=spinIpad has many presets for 360 images
	@@ -1331,6 +1350,12 @@ jQuery.fn.axZm.load({
1331	});
1332
1333	</script>
1334	-



1335	</body>
1336	- </html>


3	* Module: jQuery AJAX-ZOOM for Magento, /jss/axzoom/preview.php
4	* Copyright: Copyright (c) 2010-2016 Vadim Jacobi
5	* License Agreement: http://www.ajax-zoom.com/index.php?cid=download
6	+ * Version: 1.2.3
7	+ * Date: 2016-08-12
8	+ * Review: 2016-08-12
9	* URL: http://www.ajax-zoom.com
10	* Documentation: http://www.ajax-zoom.com/index.php?cid=modules&module=magento
11	*

31	}
32
33	/* Set to true to remove certain things not needed if included in shops / cms */
34	+ $editor_version = '2.0.1';
35	+ $last_updated = '2016-08-05';
36	$axzm_cms_mode = true;
37	+ $axzm_tpl_mode = false;
38	+ $axzm_path = '../axZm/';
39	$first_load360_dir = Mage::app()->getRequest()->getParam('3dDir');
40	$default_thumb_size = $axzm_cms_mode ? 140 : 180;
41	$player_responsive = $axzm_cms_mode ? true : false;

56	$id_360set = Mage::app()->getRequest()->getParam('id');
57	$first_load_crop_json = Mage::app()->getRequest()->getParam('url_get')."?id_360set=$id_360set&id_360=$id_360";
58	$save_crop_json = Mage::app()->getRequest()->getParam('url_set')."?id_360set=$id_360set&id_360=$id_360&form_key=".Mage::app()->getRequest()->getParam('form_key');
59	+
60	+ // hotspots
61	+ $first_load_hotspot_json = Mage::app()->getRequest()->getParam('hs_get')."?id_360set=$id_360set&id_360=$id_360";
62	?>
63







64	<?php
65	+ if (!$axzm_tpl_mode)
66	{
67	?>








68
69	+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
70	+ <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/">
71	+ <head>
72	+ <title>jCrop AJAX-ZOOM zoomTo and crop on large images</title>
73	+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
74	+ <meta http-equiv="imagetoolbar" content="no">
75	+
76	+ <?php
77	+ if (!$axzm_cms_mode)
78	+ {
79	+ ?>
80	+ <meta property="og:type" content="article"/>
81	+ <meta property="og:title" content="jCrop AJAX-ZOOM"/>
82	+ <meta property="og:description" content="Crop high resolution images with jCrop and AJAX-ZOOM."/>
83	+ <meta name="description" content="Crop high resolution images with jCrop and AJAX-ZOOM." />
84	+ <meta property="og:image" content="http://www.ajax-zoom.com/pic/layout/image-zoom_35.jpg"/>
85	<?php
86	+ }
87	+
88	if (strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone'))
89	echo '<meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">';
90	else
91	echo '<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no">';
92	+
93	+ }
94	+ ?>
95	+
96	<!-- jQuery core -->
97	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/jquery-1.8.3.min.js"></script>
98
99	<!-- AJAX-ZOOM -->
100	+ <link name="az_editor_css_scripts" rel="stylesheet" href="<?php echo $axzm_path;?>axZm.css" type="text/css" media="screen">
101	+ <script type="text/javascript" src="<?php echo $axzm_path;?>jquery.axZm.js"></script>
102
103	<!-- jCrop (external jQuery plugin utilized for this crop editor) -->
104	+ <link name="az_editor_css_scripts" type="text/css" href="<?php echo $axzm_path;?>plugins/jCrop/css/jquery.Jcrop.css" rel="stylesheet" />
105	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/jCrop/js/jquery.Jcrop.js"></script>
106
107	<!-- Include mousewheel script -->
108	+ <script type="text/javascript" src="<?php echo $axzm_path;?>extensions/axZmThumbSlider/lib/jquery.mousewheel.min.js"></script>
109
110	<!-- Only needed for the 360 hotspot example where fancybox is applied for one hotspot click event -->
111	+ <link name="az_editor_css_scripts" href="<?php echo $axzm_path;?>plugins/demo/jquery.fancybox/jquery.fancybox-1.3.4.zIndex.css" type="text/css" media="screen" rel="stylesheet">
112	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/demo/jquery.fancybox/jquery.fancybox-1.3.4.js"></script>
113	+
114	<!-- Include thumbSlider CSS && JS. -->
115	+ <link name="az_editor_css_scripts" rel="stylesheet" type="text/css" href="<?php echo $axzm_path;?>extensions/axZmThumbSlider/skins/default/jquery.axZm.thumbSlider.css" />
116	+ <script type="text/javascript" src="<?php echo $axzm_path;?>extensions/axZmThumbSlider/lib/jquery.axZm.thumbSlider.js"></script>
117
118	<!-- Set of functions for this image cropping tool -->
119	+ <link name="az_editor_css_scripts" rel="stylesheet" type="text/css" href="<?php echo $axzm_path;?>extensions/jquery.axZm.imageCropEditor.css">
120	+ <script type="text/javascript" src="<?php echo $axzm_path;?>extensions/jquery.axZm.imageCropEditor.js"></script>
121
122	<!-- A small function to add title button which will expend to full description -->
123	+ <link name="az_editor_css_scripts" rel="stylesheet" type="text/css" href="<?php echo $axzm_path;?>extensions/jquery.axZm.expButton.css">
124	+ <script type="text/javascript" src="<?php echo $axzm_path;?>extensions/jquery.axZm.expButton.js"></script>
125
126	<!-- Some other JavaScripts for the editor -->
127	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/JSON/jquery.json-2.3.min.js"></script>
128	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/js-beautify/beautify-all.min.js"></script>
129	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/jquery.scrollTo.min.js"></script>
130
131	<!-- Because of "sortable" used here, only needed for the editor! -->
132	+ <link name="az_editor_css_scripts" href="<?php echo $axzm_path;?>plugins/jquery.ui/themes/ajax-zoom/jquery-ui.css" type="text/css" rel="stylesheet" />
133	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/jquery.ui/js/jquery-ui-1.8.24.custom.min.js"></script>
134
135	<!-- CLEditor - WYSIWYG Editor (external jQuery plugin) -->
136	+ <link name="az_editor_css_scripts" rel="stylesheet" type="text/css" href="<?php echo $axzm_path;?>plugins/CLEditor/jquery.cleditor.css" />
137	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/CLEditor/jquery.cleditor.min.js"></script>
138	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/CLEditor/jquery.cleditor.table.min.js"></script>
139
140	<?php
141	if (!$axzm_cms_mode)
142	{
143	?>
144	<!-- Javascript to style the syntax, not needed! -->
145	+ <link name="az_editor_css_scripts" rel="stylesheet" href="<?php echo $axzm_path;?>plugins/demo/prism/prism.css" type="text/css" media="screen">
146	+ <script type="text/javascript" src="<?php echo $axzm_path;?>plugins/demo/prism/prism.min.js"></script>







147	<?php
148	}
149	?>

157	echo 'jQuery.aZcropEd.errors = false;';
158	?>
159	</script>
160	+ <?php
161	+ if (!$axzm_tpl_mode)
162	+ {
163	+ ?>
164	</head>
165	<body>
166
167	<?php
168	if (!$axzm_cms_mode)
169	include ('navi.php');
170	+
171	+ }
172	+ else
173	+ {
174	+ ?>
175	+ <script type="text/javascript">
176	+ // Move css to head if template mode
177	+ jQuery('*[name=az_editor_css_scripts]').appendTo('head');
178	+ </script>
179	+ <?php
180	+ }
181	?>
182
183	<div id="outerWrap" style="width: 821px; margin: 0 auto;">

221	<ul>
222	<li><a href="#aZcR_tabs-about">About</a></li>
223	<li><a href="#aZcR_tabs-sel">Crop settings</a></li>
224	+ <li><a href="#aZcR_tabs-crops">Crops</a></li>
225	+ <li><a href="#aZcR_tabs-descr">Descriptions</a></li>
226	+ <li><a href="#aZcR_tabs-import"><?php echo !$axzm_cms_mode ? 'Import / Save' : 'Save'; ?></a></li>
227	<?php
228	if (!$axzm_cms_mode)
229	{

241	if (!$axzm_cms_mode)
242	{
243	?>
244	+ <div class="legend" style="line-height: 60%;">About AJAX-ZOOM crop editor <br>
245	+ <span style="font-size: 50%">[Editor version: <?php echo $editor_version; ?>, date: <?php echo $last_updated; ?>]</span>
246	+ </div>
247	+
248	<p>With this tool you can easily create several crops from 2D images / galleries,
249	360 spins or 3D multirow which are loaded into AJAX-ZOOM player.
250	Besides other thinkable purposes the goal here is to make a "crop gallery" placed outside of the AJAX-ZOOM player.

282	</script>
283	<div class="legend">Demo other content</div>
284	<p>Press on the buttons below to load a different content into the player.</p>
285	+ <input type="button" value="360 example" autocomplete="off"
286	onclick="jQuery.aZcropEd.changeAxZmContentPHP(loadDemo[1])">
287	+ <input type="button" value="2d example (single image)" autocomplete="off"
288	onclick="jQuery.aZcropEd.changeAxZmContentPHP(loadDemo[2])">
289	+ <input type="button" value="2d gallery (many images)" autocomplete="off"
290	onclick="jQuery.aZcropEd.changeAxZmContentPHP(loadDemo[3])">
291	+ <input type="button" value="3d example (multirow)" autocomplete="off"
292	onclick="jQuery.aZcropEd.changeAxZmContentPHP(loadDemo[4])">
293	+ <input type="button" value="360 with hotspots" autocomplete="off"
294	onclick="jQuery.aZcropEd.changeAxZmContentPHP(loadDemo[5])">
295	</div>
296	<?php

303	<div class="legend">How to</div>
304	<ol>
305	<li style="margin-bottom: 10px">
306	+ <img src="<?php echo $axzm_path;?>icons/default/button_iPad_settings.png" width="25" style="vertical-align: middle; margin: 2px 5px 2px 0px">
307	Optionally hit crop settings button or
308	<a class="linkShowTab" href="javascript: void(0)" onclick="jQuery('#aZcR_tabs').tabs('select','#aZcR_tabs-sel');">
309	Crop settings</a>tab to adjust crop selector e.g. set aspect ratio and output parameters for the thumbnail.
310	</li>
311	<li style="margin-bottom: 10px">
312	+ <img src="<?php echo $axzm_path;?>icons/default/button_iPad_jcrop.png" width="25" style="vertical-align: middle; margin: 2px 5px 2px 0px">
313	Hit the crop button to toggle crop and select region to crop.
314	</li>
315	<li style="margin-bottom: 10px">
316	+ <img src="<?php echo $axzm_path;?>icons/default/button_iPad_fire.png" width="25" style="vertical-align: middle; margin: 2px 5px 2px 0px">
317	When ready hit the red "fire crop" button.
318	</li>
319	<li style="margin-bottom: 10px">

324	<li style="margin-bottom: 10px">
325	Optionally add thumb title, title and description to the crop regions in
326	<a class="linkShowTab" href="javascript: void(0)"
327	+ onclick="jQuery('#aZcR_tabs').tabs('select','#aZcR_tabs-descr');">Descriptions</a> tab.
328	</li>
329	<li>
330	<a class="linkShowTab" href="javascript: void(0)"

362	<div class="azMsg clearfix">
363	<a href="example35_clean.php">
364	<img src="http://www.ajax-zoom.com/pic/layout/image-zoom_35_clean.jpg"
365	+ width="100" align="left" style="margin: -5px 10px -5px -5px; vertical-align: top;">
366	</a>
367	<a href="example35_clean.php">example35_clean.php</a> basically has the same setup as this editor but without the toolbar under the player.
368	</div>
369	<div class="azMsg clearfix">
370	<a href="example35_clean_horizontal.php">
371	<img src="http://www.ajax-zoom.com/pic/layout/image-zoom_35_clean_horizontal.jpg"
372	+ width="100" align="left" style="margin: -5px 10px -5px -5px; vertical-align: top;">
373	</a>
374	If you want to have a horizontal gallery please check out <a href="example35_clean_horizontal.php">example35_clean_horizontal.php</a>
375	</div>
376	<div class="azMsg clearfix">
377	<a href="example35_responsive.php">
378	<img src="http://www.ajax-zoom.com/pic/layout/image-zoom_35_responsive.jpg"
379	+ width="100" align="left" style="margin: -5px 10px -5px -5px; vertical-align: top;">
380	</a>
381	For responsive integrations please use <a href="example35_responsive.php">example35_responsive.php</a>
382	</div>
383	<div class="azMsg clearfix">
384	<a href="example35_gallery.php">
385	<img src="http://www.ajax-zoom.com/pic/layout/image-zoom_35_gallery.jpg"
386	+ width="100" align="left" style="margin: -5px 10px -5px -5px; vertical-align: top;">
387	</a>
388	Of course the cropped thumbnails do not need to be loaded into the thumb slider.
389	In <a href="example35_gallery.php">example35_gallery.php</a> they are appended to some div.

391	<div class="azMsg clearfix">
392	<a href="example32_responsive.php">
393	<img src="http://www.ajax-zoom.com/pic/layout/image-zoom_32_responsive.jpg"
394	+ width="100" align="left" style="margin: -5px 10px -5px -5px; vertical-align: top;">
395	</a>
396	<a href="example32_responsive.php">example32_responsive.php</a>
397	optionally loads the results of this crop editor into mouseover zoom / 360 combination
398	and instantly attaches the crop gallery to the player. Very convenient for e-commerce.
399	</div>
400
401	+ <a href="http://www.ajax-zoom.com/index.php?cid=contact">On request</a>
402	AJAX-ZOOM team will deliver to you exactly what you need as a different example or integrated into your page layout / html.

403
404	<div class="legend">The final code example</div>
405	The only difference between basic AJAX-ZOOM implementation / example

408	the thumbsnails; all codes for implementing can be also found in the example35_*.php files.
409	<div class="legend">JavaScript & CSS files in Head</div>
410	<?php
411	+ echo '<pre class="brush: html"><code class="language-markup">';
412	echo htmlspecialchars ('
413	<!-- jQuery core -->
414	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

429	<link rel="stylesheet" href="../axZm/extensions/jquery.axZm.expButton.css" type="text/css" />
430	<script type="text/javascript" src="../axZm/extensions/jquery.axZm.expButton.js"></script>
431	');
432	+ echo '</code></pre>';
433	?>
434
435	<div class="legend">CSS</div>
436	<?php
437	+ echo '<pre class="brush: html"><code class="language-css">';
438	echo htmlspecialchars ('
439	#playerInnerWrap{
440	position: relative; border-left: 1px solid #AAAAAA; border-top: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA;

453	}
454
455	');
456	+ echo '</code></pre>';
457	?>
458
459	<div class="legend">HTML markup (taken from <a href="http://www.ajax-zoom.com/examples/example35_clean.php">example35_clean.php</a>)</div>
460	<?php
461	+ echo '<pre class="brush: html"><code class="language-markup">';
462	echo htmlspecialchars ('
463	<div id="playerInnerWrap" style="min-height: 480px;">
464	<div id="azPlayer" style="width: 721px;">

474	</div>
475	</div>
476	');
477	+ echo '</code></pre>';
478	?>
479
480	<div class="legend">Javascript</div>
481	<?php
482	+ echo '<pre class="brush: html"><code class="language-js">';
483	echo htmlspecialchars ('
484	// Init the slider
485	// Thumbs will be appended instantly

516
517	// Id of element where AJAX-ZOOM will be loaded into
518	ajaxZoom.divID = "azPlayer";
519	+
520	// Define callbacks, for complete list check the docs
521	ajaxZoom.opt = {
522	onLoad: function(){

603	//window.fullScreenStartSplash = {enable: false, className: false, opacity: 0.75};
604	//jQuery.fn.axZm.openFullScreen(ajaxZoom.path, ajaxZoom.parameter, ajaxZoom.opt, ajaxZoom.divID, false, false);
605	');
606	+ echo '</code></pre>';
607	?>
608




















609	<?php
610	/* This include is just for the demo, you can remove it */
611	include ('footer.php');

631	</div>
632	<div id="cropOpt_ratioBox" style="clear: both; margin: 5px 0px 5px 0px;">
633	<label>Aspect ratio:</label>
634	+ W: <input id="cropOpt_ratio1" type="text" value="1" autocomplete="off"
635	+ style="width: 50px" onchange="jQuery.aZcropEd.jCropAspectRatio()">
636	+ <input type="button" style="width: 30px;" value="⇔" autocomplete="off"
637	+ onclick="jQuery.aZcropEd.jCropAspectFlipValues()">
638	+ H: <input id="cropOpt_ratio2" type="text" value="1" autocomplete="off"
639	+ style="width: 50px" onchange="jQuery.aZcropEd.jCropAspectRatio()">
640	<div>
641	<label></label>
642	+ <input type="button" value="as thumb" autocomplete="off"
643	+ style="margin-top: 3px; width: 80px;" onclick="jQuery.aZcropEd.jCropAspectAsThumb()">
644	+ <input type="button" value="as image" autocomplete="off"
645	+ style="margin-top: 3px; width: 80px;" onclick="jQuery.aZcropEd.jCropAspectAsImage()">
646	</div>
647	</div>
648	<div id="cropOpt_sizeBox" style="clear: both; margin: 5px 0px 5px 0px; display: none;">
649	<label>Fixed size:</label>
650	+ W: <input id="cropOpt_sizeW" type="text" value="" autocomplete="off"
651	+ style="width: 50px" onchange="jQuery.aZcropEd.jCropFixedSize()">
652	+ H: <input id="cropOpt_sizeH" type="text" value="" autocomplete="off"
653	+ style="width: 50px" onchange="jQuery.aZcropEd.jCropFixedSize()"> px
654	</div>
655
656	<div class="legend">Thumbnail settings</div>
657
658	<div style="clear: both; margin: 5px 0px 5px 0px;">
659	<label>Thumbnail size:</label>
660	+ W: <input id="cropOpt_thumbSizeW" type="text"
661	+ value="<?php echo $default_thumb_size; ?>" autocomplete="off"
662	style="width: 50px" onchange="jQuery.aZcropEd.jCropInitSettings()">
663	+ H: <input id="cropOpt_thumbSizeH" type="text"
664	+ value="<?php echo $default_thumb_size; ?>" autocomplete="off"
665	style="width: 50px" onchange="jQuery.aZcropEd.jCropInitSettings()"> px
666	</div>
667

676
677	<div id="cropOpt_colorBox" style="clear: both; margin: 5px 0px 5px 0px; display: none;">
678	<label>Background color (hex):</label>
679	+ #<input id="cropOpt_backColor" type="text" value="FFFFFF" autocomplete="off"
680	+ style="width: 100px" onchange="jQuery.aZcropEd.jCropInitSettings()">
681	</div>
682	<div style="clear: both; margin: 5px 0px 5px 0px;">
683	<label>Jpeg quality:</label>
684	+ <input id="cropOpt_jpgQual" type="text" value="90" style="width: 40px" autocomplete="off"
685	+ onchange="jQuery.aZcropEd.jCropInitSettings()">
686	(10 - 100)
687	</div>
688	<div style="clear: both; margin: 5px 0px 5px 0px;">
689	<label>Cache (can be set later):</label>
690	+ <input id="cropOpt_cache" type="checkbox" value="1" autocomplete="off"
691	+ onchange="jQuery.aZcropEd.jCropInitSettings()">
692	</div>
693	</div>
694	</div>

695	</div>
696
697	<!-- Cropped images -->

715	if (!$axzm_cms_mode)
716	{
717	?>
718	+ <div class="azMsg">Drag & drop to reorder the thumbs,
719	+ click to get the paths and other information (see below),
720	double click to zoom.
721	</div>
722	<?php

725
726	<!-- Crop results real size -->
727	<div id="aZcR_cropResults"></div>
728	+ <input type="button" value="Reamove all crops" autocomplete="off"
729	+ style="margin-top: 5px" onclick="jQuery.aZcropEd.clearAll()" />
730	<?php
731	if (!$axzm_cms_mode)
732	{

737
738	<div style="clear: both; margin: 5px 0px 5px 0px;">
739	<label>Query string:</label>
740	+ <input id="aZcR_qString" type="text" onClick="this.select();" autocomplete="off"
741	+ style="margin-bottom: 5px; width: 100%" value="">
742	</div>
743
744	<div style="clear: both; margin: 5px 0px 5px 0px;">
745	<label>Url:</label>
746	(please note that full Url might differ if this editor is implemented in a backend of some CMS)
747	+ <input id="aZcR_url" type="text" onClick="this.select();" autocomplete="off"
748	+ style="margin-bottom: 5px; width: 100%" value="">
749	</div>
750
751	<div style="clear: both; margin: 5px 0px 5px 0px;">
752	<label>Cached image url:</label>
753	(only available if "cache" option is chacked under "crop settings" tab)
754	+ <input id="aZcR_contentLocation" type="text" onClick="this.select();" autocomplete="off"
755	+ style="margin-bottom: 5px; width: 100%" value="">
756	</div>
757	<?php
758	}

761
762	<!-- Description -->
763	<div id="aZcR_tabs-descr">
764	+ <div class="legend">Crop descriptions / settings</div>
765
766	<div class="azMsg">



767	<?php
768	if (!$axzm_cms_mode)
769	{

772	In this editor and also in the derived "clean" examples like
773	<a href="example35_clean.php">example35_clean.php</a>
774	we use "axZmEb" - expandable button (AJAX-ZOOM additional plugin) to display these titles \|\| descriptions
775	+ over the image respectively inside the player.
776	+ You could however easily change the usage of title \|\| description in your implementation,
777	e.g. display them under the player or whatever. Just change the "handleTexts" property of the options object
778	+ when passing it to jQuery.axZmImageCropLoad - see source code of e.g.
779	+ <a href="example35_clean.php">example35_clean.php</a>;<br><br>
780
781	Besides HTML or your text you could also load external content in iframe! The prefix for the source is "iframe:"<br><br>
782	+ e.g. to load an external page simply put something like this in the descripion:<br>
783	+ <code>iframe://www.canon.co.uk/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1100D</code>
784	<br><br>
785	To load a YouTube video you could put this (replace eLvvPr6WPdg with your video code): <br>
786	+ <code>iframe://www.youtube.com/embed/eLvvPr6WPdg?feature=player_detailpage</code>
787	<br><br>
788	To load some dynamic content over AJAX use "ajax:" as prefix, e.g.<br>
789	+ <code>ajax:/test/some_content_data.php?req=123</code>
790	<br><br>
791	If you do not define the title, then the content will be loaded instantly as soon as the spin animation finishes.
792

798	Optionally add a title and/or description.
799	Besides HTML or your text you could also load external content in iframe!
800	The prefix for the source is "iframe:"<br><br>
801	+ e.g. to load an external page simply put something like this in the descripion:<br>
802	iframe://www.canon.co.uk/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1100D
803	<br><br>
804	To load a YouTube video you could put this (replace eLvvPr6WPdg with your video code): <br>

848	if (!$axzm_cms_mode)
849	{
850	?>
851	+ <input type="button" value="Get all" autocomplete="off" onclick="jQuery.aZcropEd.getAllThumbs()">
852
853	+ <select onchange="jQuery.aZcropEd.getAllThumbs()" autocomplete="off">
854	<option value="qString">Query string</option>
855	<option value="url">Url</option>
856	<option value="contentLocation">Cached image url</option>
857	</select>
858
859	+ <select onchange="handleDisplayLongLine(this)" autocomplete="off">
860	<option value="JSON_data">JSON with data</option>
861	<option value="JSON">JSON</option>
862	<option value="CSV">CSV</option>
863	</select>
864
865	+ <span style="display: none;">separated with <input type="text" value="\|" style="width: 20px;" autocomplete="off"
866	+ onchange="jQuery.aZcropEd.getAllThumbs()"></span>
867	<br>and convert to be cached
868	+ <input type="checkbox" value="1" onclick="jQuery.aZcropEd.getAllThumbs()" checked="true" autocomplete="off">
869	and replace thumb size
870	+ <input type="checkbox" value="1" onclick="jQuery(this).next().toggle(); jQuery.aZcropEd.getAllThumbs();" autocomplete="off">
871	<span style="display: none">
872	+ W: <input type="text" style="width: 50px" onchange="jQuery.aZcropEd.getAllThumbs();" autocomplete="off">
873	+ H: <input type="text" style="width: 50px" onchange="jQuery.aZcropEd.getAllThumbs();" autocomplete="off"> px
874	</span>
875	<br>and convert px coordinates to percentage
876	+ <input type="checkbox" value="1" onclick="jQuery.aZcropEd.getAllThumbs();" autocomplete="off">
877	<?php
878	}
879	else

881	?>
882	<input type="button" value="Refresh" onclick="jQuery.aZcropEd.getAllThumbs()">
883
884	+ <select style="display: none;" onchange="jQuery.aZcropEd.getAllThumbs()" autocomplete="off">
885	<option value="qString">Query string</option>
886	<option value="url">Url</option>
887	<option value="contentLocation">Cached image url</option>
888	</select>
889
890	+ <select style="display: none;" onchange="handleDisplayLongLine(this)" autocomplete="off">
891	<option value="JSON_data">JSON with data</option>
892	<option value="JSON">JSON</option>
893	<option value="CSV">CSV</option>

895
896	<span style="display: none;"> <input type="text" value="\|" style="width: 20px; display: none;"
897	onchange="jQuery.aZcropEd.getAllThumbs()" autocomplete=off></span>
898	+ <input style="display: none;" type="checkbox" value="1" onclick="jQuery.aZcropEd.getAllThumbs()" checked="true" autocomplete="off">
899	and replace thumb size
900	+ <input type="checkbox" value="1" onclick="jQuery(this).next().toggle(); jQuery.aZcropEd.getAllThumbs();" autocomplete="off">
901	<span style="display: none">
902	+ W: <input type="text" style="width: 50px" onchange="jQuery.aZcropEd.getAllThumbs();" autocomplete="off">
903	+ H: <input type="text" style="width: 50px" onchange="jQuery.aZcropEd.getAllThumbs();" autocomplete="off"> px
904	</span>
905	+ <input style="display: none;" type="checkbox" value="1" onclick="jQuery.aZcropEd.getAllThumbs();" autocomplete="off">
906
907	<?php
908	}
909	?>
910	</div>
911
912	+ <form <?php echo !$axzm_cms_mode ? 'action="'.$axzm_path.'saveCropJSON.php"' : ''; ?> id="aZcR_saveJSON">
913	+ <textarea id="aZcR_getAllThumbs" style="width: 100%; height: 350px; font-size: 10px; margin-top: 5px;"
914	+ spellcheck="false" autocomplete="off"></textarea>
915	</form>

916	<?php
917	if ($axzm_cms_mode)
918	{
919	?>
920	+ <input type="button" value="Save into database" id="btnSaveJSON" autocomplete="off">
921	+ <input type="button" value="Remove line breaks" style="margin-top: 5px;" autocomplete="off"
922	onclick="jQuery('#aZcR_getAllThumbs').val(jQuery('#aZcR_getAllThumbs').val().replace(/(\r\n\|\n\|\r\|\t)/gm,''))">
923
924	<div id="dialog-saveJSON" title="JSON saved" style="display: none;">

952	{
953	?>
954	<!-- Just a button to select text in the textarea above, can be removed -->
955	+ <input type="button" value="Select text" style="margin-top: 5px;" autocomplete="off"
956	+ onclick="jQuery('#aZcR_getAllThumbs')[0].select()">
957	+ <input type="button" value="Remove line breaks" style="margin-top: 5px;" autocomplete="off"
958	onclick="jQuery('#aZcR_getAllThumbs').val(jQuery('#aZcR_getAllThumbs').val().replace(/(\r\n\|\n\|\r\|\t)/gm,''))">
959
960	<!-- Save -->

967	<div style="margin-top: 10px"><label>Create backup:</label><input type="checkbox" id="aZcR_jsBackUp" value="1" checked> -
968	creates backup of the current JSON file if present with a timestamp in file name</div>
969	<div style="margin-top: 10px"><label>Save JSON:</label>
970	+ <input style="width: 100px;" type="button" value="Save" autocomplete="off" onClick="jQuery.aZcropEd.saveJSONtoFile();">
971	+ to <input type="text" value="" id="aZcR_jsFileName" autocomplete="off">.json (a-zA-Z0-9-_)
972	</div>
973
974	<div style="margin-top: 10px"><label></label>

981	</div>
982
983	<div class="legend">Notes</div>
984	+ In your final frontend presentation you can compose url out of query string with js
985	+ <code>jQuery.fn.axZm.installPath()+'zoomLoad.php?'+queryString</code>



986	<?php
987	}
988	?>

1002	</div>
1003
1004	<div style="clear: both; margin: 5px 0px 5px 0px;">
1005	+ <label>1. Path for 2D:</label> <input type="text" value=""
1006	+ id="aZcR_pathToLoad2D" style="width: 400px;" autocomplete="off"> or
1007	</div>
1008
1009	<div style="clear: both; margin: 5px 0px 5px 0px;">
1010	+ <label>2. Path for 360 or 3D:</label> <input type="text" value=""
1011	+ id="aZcR_pathToLoad360" style="width: 400px;" autocomplete="off">
1012	</div>
1013
1014	<div style="clear: both; margin: 15px 0px 5px 0px;">
1015	+ <label>3. Hotspot file path:</label> <input type="text" value=""
1016	+ id="aZcR_hotspotFileToLoad" style="width: 350px;" autocomplete="off"> (optional)
1017	</div>
1018
1019	<div style="clear: both; margin: 5px 0px 5px 0px;">
1020	+ <label>4. Crop file path:</label> <input type="text" value=""
1021	+ id="aZcR_cropFileToLoad" style="width: 350px;" autocomplete="off"> (optional)
1022	</div>
1023
1024	<div style="clear: both; margin: 5px 0px 5px 0px;">
1025	+ <input type="button" value="LOAD" onClick="jQuery.aZcropEd.changeAxZmContentPHP();" autocomplete="off">
1026	+ <input type="button" value="GET" onClick="jQuery.aZcropEd.getLoadedParameters();" autocomplete="off">
1027	</div>
1028
1029	<div id="aZcR_pathToParameter"></div>
1030
1031	<div class="legend">How does it work:</div>

1032	<div style="clear: both; margin: 5px 0px 5px 0px;">
1033	<ol>
1034	<li>
1035	+ <strong>For 2D</strong> (single image or gallery with more images)
1036	+ please enter local path(s) to the image(s), e.g. <br>
1037	+ "<code>/pic/zoom/animals/test_animals1.png</code>"<br>
1038	+ or image set with image paths separated with vertical dash e.g.<br>
1039	+ "<code>/pic/zoom/animals/test_animals1.png\|/pic/zoom/animals/test_animals2.png</code>"<br>
1040	+ If you want to load all images from a folder please just enter the path to this folder e.g. <br>
1041	+ "<code>/pic/zoom/animals</code>"



1042	</li>
1043	<li style="margin-top: 10px;">
1044	<ul>

1056	</ul>
1057	</li>
1058	<li style="margin-top: 10px;">
1059	+ <strong>Hotspot file path</strong> is the path to the file with hotspot configurations and positions, e.g.<br>
1060	+ "<code>../pic/hotspotJS/eos_1100D.js</code>"<br>
1061	+ You can create such a file in <a href="example33.php">example33.php</a>




1062	</li>

1063	<li style="margin-top: 10px;">
1064	+ <strong>Crop file path</strong> is the path to the file with crop data which can be created with this editor, e.g.<br>
1065	+ "<code>../pic/hotspotJS/eos_1100d.json</code>"<br>





1066	</li>
1067	</ol>
1068	</div>
1069
1070	<div class="legend">Load only JSON data from file into editor</div>
1071	+ <div style="margin-top: 10px">
1072	+ <label>Crop JSON file path:</label>
1073	+ <input type="text" value="" id="aZcR_onlyJSONcropFile" style="width: 350px;" autocomplete="off">
1074	+ </div>
1075	+ <label></label>e.g.: "<code>../pic/cropJSON/eos_1100d.json</code>"
1076	+ <div style="margin-top: 10px">
1077	+ <label></label>
1078	+ <input type="button" value="Load" autocomplete="off"
1079	+ onclick="jQuery.aZcropEd.getJSONdataFromFile(jQuery('#aZcR_onlyJSONcropFile').val())">
1080	+ </div>
1081
1082	</div>
1083

1100	// First json to load
1101	onLoad: function(){ // onSpinPreloadEnd
1102	jQuery.aZcropEd.getJSONdataFromFile('<?php echo $first_load_crop_json;?>');
1103	+ <?php
1104	+ if (isset($first_load_hotspot_json) && $first_load_hotspot_json)
1105	+ {
1106	+ ?>
1107	+ setTimeout(function(){
1108	+ jQuery.fn.axZm.loadHotspotsFromJsFile('<?php echo $first_load_hotspot_json; ?>', false, function(){
1109	+
1110	+ });
1111	+ }, 1000);
1112	+ <?php
1113	+ }
1114	+ ?>
1115	},
1116
1117	onCropEnd: function(){

1125	}
1126	},
1127
1128	+ onBeforeStart: function(){
1129	// Set background color, can also be done in css file
1130	jQuery('.axZm_zoomContainer').css({backgroundColor: '#FFFFFF'});
1131

1264	};
1265
1266	// Define the path to the axZm folder, adjust the path if needed!
1267	+ ajaxZoom.path = "<?php echo $axzm_path;?>";
1268
1269	// Define your custom parameter query string
1270	// example=spinIpad has many presets for 360 images

1350	});
1351
1352	</script>
1353	+ <?php
1354	+ if (!$axzm_tpl_mode)
1355	+ {
1356	+ ?>
1357	</body>
1358	+ </html>
1359	+ <?php
1360	+ }
1361	+ ?>

js/axzoom/preview/hotspoteditor.php ADDED Viewed

	@@ -0,0 +1,3604 @@