Module.php

@@ -9,19 +9,6 @@ class Module extends AbstractModule
 {
 	const NAMESPACE = __NAMESPACE__;
 
-	const IMAGE_WIDTH = [
-			'25' => '25 %',
-			'50' => '50 %',
-			'75' => '75 %',
-			'100' => '100 %',
-	];
-
-	const ZOOM_TYPE = [
-			'' => '',
-			'zoom' => 'Touch / grab',
-			'wheelzoom' => 'Deep zooming',
-	];
-
 	public function getConfig()
 	{
 		return include __DIR__ . '/config/module.config.php';

config/module.config.php

@@ -21,7 +21,7 @@ return [
         'ImageViewerBlockForm' => [
             'title' => '',
             'width' => 600,
-            'zoom_type' => '',
+            'zoom' => false,
             'wrapStyle' => 'overflow-y: hidden;display: flex;flex-direction: column;justify-content: center;',
         ]
     ]

src/Form/ImageViewerBlockForm.php

@@ -21,23 +21,15 @@ class ImageViewerBlockForm extends Form
 
 		$this->add([
 			'name' => 'o:block[__blockIndex__][o:data][width]',
-      'type' => Element\Select::class,
+			'type' => Element\Number::class,
       'options' => [
-          'label' => 'Width',
-					'value_options' => Module::IMAGE_WIDTH,
+				'label' => 'Width in pixels',
+			],
+			'attributes' => [
+				'min' => '100',
 			],
 		]);
 
-		$this->add([
-			'name' => 'o:block[__blockIndex__][o:data][zoom_type]',
-      'type' => Element\Select::class,
-      'options' => [
-          'label' => 'Zooming',
-					'value_options' => Module::ZOOM_TYPE,
-      ],
-		]);
-
-		/*
 		$this->add([
 		    'type' => Element\Checkbox::class,
 		    'name' => 'o:block[__blockIndex__][o:data][zoom]',
@@ -48,6 +40,6 @@ class ImageViewerBlockForm extends Form
 		        'unchecked_value' => false,
 		    ],
 		]);
-		*/
+
 	}
 }

src/Site/BlockLayout/ImageViewer.php

@@ -49,8 +49,7 @@ class ImageViewer extends AbstractBlockLayout
 		$form->setData([
 			'o:block[__blockIndex__][o:data][title]' => $data['title'],
 			'o:block[__blockIndex__][o:data][width]' => $data['width'],
-      'o:block[__blockIndex__][o:data][zoom_type]' => $data['zoom_type'],
-      //'o:block[__blockIndex__][o:data][zoom]' => $data['zoom'],
+      'o:block[__blockIndex__][o:data][zoom]' => $data['zoom'],
 		]);
 		$form->prepare();
 
@@ -75,10 +74,11 @@ class ImageViewer extends AbstractBlockLayout
 		static $id = 0;
 
     $media = $attachments[0]->item()->media()[0];
+    $width = $block->dataValue('width');
 		return $view->partial('common/block-layout/imageViewer', [
-			'zoom_type' => $block->dataValue('zoom_type'),
+			'zoom' => $block->dataValue('zoom'),
 			'title' => $block->dataValue('title'),
-			'width' => $block->dataValue('width'),
+			'width' => $width,
 			'image' => $media->primaryMedia()->thumbnailUrl('large'),
       'id' => 'iv-' . ++$id,
 		]);

view/common/block-layout/imageViewer.phtml

@@ -1,18 +1,15 @@
 
 
-<?php
-	if ($zoom_type == "wheelzoom") {
-	$this->headScript()->appendFile($this->assetUrl('vendor/wheelzoom/wheelzoom.js',
-																									'ImageViewer'));
-	}
-	if ($zoom_type == "zoom") {
+<?php if ($zoom == true) {
+	//$this->headScript()->appendFile($this->assetUrl('vendor/wheelzoom/wheelzoom.js',
+	//																								'ImageViewer'));
 	$this->headScript()->appendFile($this->assetUrl('vendor/zoom/jquery.zoom.min.js',
 																									'ImageViewer'));
 	$this->headLink()->appendStylesheet($this->assetUrl('css/zoom.css',
 																									'ImageViewer'));
-	}
-?>
+} ?>
 
+<div class="wheelzoom-wrap" style="position:relative;">
 
 	<?php
 		if ($title !== false && $title !== "") {
@@ -22,34 +19,45 @@
 		}
 	?>
 
-
-<?php if ($zoom_type == "zoom") { ?>
-	<div id='<?= $id ?>' class='zoom' style='width:<?= $width ?>%; cursor:grab'>
-		<img src='<?= $image ?>' alt='<?= $title ?>'/>
-	</div>
-	<script>
-		$(document).ready(function(){
-			$('#<?= $id ?>').zoom({on:'grab', 'duration': 200});
-		});
-	</script>
+	<style>
+		.archive-img {
+			width: <?= $width ?>px;
+			<!-- width: 50%; -->
+		}
+		<?php if ($zoom == true) { ?>
+		#<?= $id ?> {
+			cursor:crosshair;
+		}
 		<?php } ?>
+	</style>
 
-<?php if ($zoom_type == "wheelzoom") { ?>
-	<div class='zoom' style='display:block; width:<?= $width ?>%; cursor:crosshair'>
-		<img id="<?= $id ?>" src="<?= $image ?>" />
-	</div>
-	<script>
-		$(document).ready(function(){
-			wheelzoom(document.querySelector('#<?= $id ?>'));
-		});
-	</script>
-<?php } ?>
-
-<?php if ($zoom_type == "") { ?>
 	<div class="archive-img">
 		<img id="<?= $id ?>"
-				 style="width: <?= $width ?>%;"
 				 src="<?= $image ?>"
 		/>
 	</div>
+
+<?php if ($zoom == true) { ?>
+	<script>
+		$(document).ready(function(){
+		  $('#<?= $id ?>')
+		    .wrap('<span class="zoom" style="display:inline-block; cursor:grab"></span>')
+		    .css('display', 'block')
+		    .parent()
+		    .zoom({'duration': 200, 'magnify': 2, on:'grab'});
+		});
+	</script>
 <?php } ?>
+
+	<?php if ($zoom == true) { ?>
+		<script>
+		/*
+		$(document).ready(function(){
+			wheelzoom(document.querySelector('#<?= $id ?>'));
+		});
+				*/
+		</script>
+
+	<?php } ?>
+
+</div>