fixes zoomed image width

Module.php

@@ -16,6 +16,12 @@ class Module extends AbstractModule
 			'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

@@ -28,6 +28,16 @@ class ImageViewerBlockForm extends Form
       ],
 		]);
 
+		$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]',
@@ -38,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();
 
@@ -75,7 +76,7 @@ class ImageViewer extends AbstractBlockLayout
 
     $media = $attachments[0]->item()->media()[0];
 		return $view->partial('common/block-layout/imageViewer', [
-			'zoom' => $block->dataValue('zoom'),
+			'zoom_type' => $block->dataValue('zoom_type'),
 			'title' => $block->dataValue('title'),
 			'width' => $block->dataValue('width'),
 			'image' => $media->primaryMedia()->thumbnailUrl('large'),

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,43 +22,34 @@
 		}
 	?>
 
-	<style>
-		#<?= $id ?> {
-			width: <?= $width ?>%;
-		}
-		<?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) { ?>
-		<script>
-			/*
-			$(document).ready(function(){
-				wheelzoom(document.querySelector('#<?= $id ?>'));
-			});
-			*/
-		</script>
-	<?php } ?>
+<?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 } ?>
 
-</div>
+<?php if ($zoom_type == "") { ?>
+	<div 	class="archive-img">
+		<img id="<?= $id ?>"
+				 style="width: <?= $width ?>%;"
+				 src="<?= $image ?>"
+		/>
+	</div>
+<?php } ?>