fixes zoomed image width

Module.php

@@ -9,6 +9,19 @@ 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' => false,
+            'zoom_type' => '',
             'wrapStyle' => 'overflow-y: hidden;display: flex;flex-direction: column;justify-content: center;',
         ]
     ]

src/Form/ImageViewerBlockForm.php

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

src/Site/BlockLayout/ImageViewer.php

@@ -49,7 +49,8 @@ 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]' => $data['zoom'],
+      'o:block[__blockIndex__][o:data][zoom_type]' => $data['zoom_type'],
+      //'o:block[__blockIndex__][o:data][zoom]' => $data['zoom'],
 		]);
 		$form->prepare();
 
@@ -74,11 +75,10 @@ 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' => $block->dataValue('zoom'),
+			'zoom_type' => $block->dataValue('zoom_type'),
 			'title' => $block->dataValue('title'),
-			'width' => $width,
+			'width' => $block->dataValue('width'),
 			'image' => $media->primaryMedia()->thumbnailUrl('large'),
       'id' => 'iv-' . ++$id,
 		]);

view/common/block-layout/imageViewer.phtml

@@ -1,15 +1,18 @@
 
 
-<?php if ($zoom == true) {
-	//$this->headScript()->appendFile($this->assetUrl('vendor/wheelzoom/wheelzoom.js',
-	//																								'ImageViewer'));
+<?php
+	if ($zoom_type == "wheelzoom") {
+	$this->headScript()->appendFile($this->assetUrl('vendor/wheelzoom/wheelzoom.js',
+																									'ImageViewer'));
+	}
+	if ($zoom_type == "zoom") {
 	$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 !== "") {
@@ -19,45 +22,34 @@
 		}
 	?>
 
-	<style>
-		.archive-img {
-			width: <?= $width ?>px;
-			<!-- width: 50%; -->
-		}
-		<?php if ($zoom == true) { ?>
-		#<?= $id ?> {
-			cursor:crosshair;
-		}
-		<?php } ?>
-	</style>
 
-	<div class="archive-img">
-		<img id="<?= $id ?>"
-				 src="<?= $image ?>"
-		/>
+<?php if ($zoom_type == "zoom") { ?>
+	<div id='<?= $id ?>' class='zoom' style='width:<?= $width ?>%; cursor:grab'>
+		<img src='<?= $image ?>' alt='<?= $title ?>'/>
 	</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'});
+			$('#<?= $id ?>').zoom({on:'grab', 'duration': 200});
 		});
 	</script>
 <?php } ?>
 
-	<?php if ($zoom == true) { ?>
+<?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 } ?>
-
-</div>
+<?php if ($zoom_type == "") { ?>
+	<div 	class="archive-img">
+		<img id="<?= $id ?>"
+				 style="width: <?= $width ?>%;"
+				 src="<?= $image ?>"
+		/>
+	</div>
+<?php } ?>