Simple Image panner in Opencart
Posted: Sat Mar 21, 2020 8:16 pm
Hi! Did someone put a image panner script on OpenCart 3.0.3.2? I'm trying to get this done: http://www.dynamicdrive.com/dynamicinde ... panner.htm
but with no result. Buttons just don't work.
in header.php I added this:
and in header.twig:
Did someone done this or can you recommand me other method? Thank you guys!
but with no result. Buttons just don't work.
in header.php I added this:
Code: Select all
$this->document->addStyle('catalog/view/theme/default/stylesheet/imagepanner.css');
$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');
Code: Select all
<div id="pcontainer1" class="pancontainer">
<img src="http://www.dynamicdrive.com/dynamicindex4/mercedes.jpg" width="1280" height="782" />
</div>
<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
})
})
--></script>