Page 1 of 1

Simple Image panner in Opencart

Posted: Sat Mar 21, 2020 8:16 pm
by prototype0104
Hi! Did someone put a image panner script on OpenCart I'm trying to get this done: ... panner.htm
but with no result. Buttons just don't work.
in header.php I added this:

Code: Select all

		$data['styles'] = $this->document->getStyles();
		$this->document->addScript('catalog/view/javascript/imagepanner.js', 'header');
		$this->document->addScript('catalog/view/javascript/jquery.kinetic.min.js', 'header');
		$this->document->addScript('catalog/view/javascript/jquery.mousewheel.min.js', 'header');
		$this->document->addScript('catalog/view/javascript/jquery.min.js', 'header');
		$data['scripts'] = $this->document->getScripts('header');
and in header.twig:

Code: Select all

<div id="pcontainer1" class="pancontainer">
<img src="" width="1280" height="782" />

<br />
<button onClick="panimage1.zoom('+1')">zoom In</button> <button onClick="panimage1.zoom('-1')">zoom out</button> <button onClick="panimage1.zoom(1)">reset</button>

Code: Select all

<script type="text/javascript"><!--
var panimage1 // register arbitrary variable
jQuery(function($){ // on DOM load
	panimage1 = new imagepanner({
		wrapper: $('#pcontainer1'), // jQuery selector to image container
		imgpos: [100, 300], // initial image position- x, y
		maxlevel: 4 // maximum zoom level

Did someone done this or can you recommand me other method? Thank you guys!

Re: Simple Image panner in Opencart

Posted: Fri Mar 27, 2020 5:32 pm
by prototype0104
Anyone please?