How to implement Simple Image Panner and Zoomer v2.0 on a Joomla CMS site

**timtecsa** · 04-15-2016, 03:12 AM

1) Script Title: Simple Image Panner and Zoomer v2.0

2) Script URL (on DD):

3) Describe problem: See here: http://gcm2.gpmnews.com/index.php/blog/18-panda-test

Any ideas why it's not working?

**jscheuer1** · 04-15-2016, 04:43 AM

I'll probably have to get back to you on this later to really help, maybe not, this might be all you need to have your 'aha' moment. The main problem I see now is that the initialized image doesn't exist. That is to say, you init here:

Code:

<script>

var panimage1 // register arbitrary variable
jQuery(function($){
	panimage1 = new imagepanner({
		wrapper: $('#pcontainer1'), // jQuery selector to image container
		imgpos: [100, 300], // initial image position- x, y
		maxlevel: 4 // maximum zoom level
	})
})

</script>

That means we are looking for an element with an id of "pcontainer1" that has an image in it. However, the served source for your page shows this markup:

HTML Code:

<section class="article-content clearfix" itemprop="articleBody">
			<div id="pcontainer1" class="pancontainer"></div>
<p><br /> <button onclick="panimage1.zoom('+1')">zoom In</button> <button onclick="panimage1.zoom('-1')">zoom out</button> <button onclick="panimage1.zoom(1)">reset</button></p> 		</section>

in which the id="pcontainer1" div is empty. Inspecting the DOM of the page shows that the likely candidate image is instead here:

Code:

<article itemscope="" itemtype="http://schema.org/Article" class="item-page">
		<meta itemprop="inLanguage" content="en-GB">

	
	
	
				
			
	<div class="pull-left item-image article-image article-image-full">
		<img src="/images/j2xml/7e/4e990f4f4ec115004adc37c709597d37.jpg" alt="" itemprop="image">
	</div>


		
		<section class="article-content clearfix" itemprop="articleBody">
			<div id="pcontainer1" class="pancontainer"></div>
<p><br> <button onclick="panimage1.zoom('+1')">zoom In</button> <button onclick="panimage1.zoom('-1')">zoom out</button> <button onclick="panimage1.zoom(1)">reset</button></p> 		</section>

A bit before the pcontainer1 - see what I'm saying? Unless you can get your init to agree with the served markup, the image you're targeting will not be initialized to the Simple Image Panner and Zoomer script.

Hope this makes sense or at least points you in the right direction. If not, or even if you just need more help, feel free to ask additional questions.

**timtecsa** · 04-16-2016, 05:14 PM

I think it's all set up OK here http://j351.gpmnews.com/index.php/ip.../74-ipz-test-2 but the buttons have no effect. What am I missing?

**jscheuer1** · 04-16-2016, 06:21 PM

OK, well you fixed that (image is in the right place in the markup), now I see that you're are also either missing the support files, or that they're in a folder where they cannot be accessed. You do understand that the various scripts and css files need to be downloaded from the demo page and uploaded to be accessible to your page, the one exception being jQuery, that can be linked to directly from Google if you like. Forget that part (jQuery) anyway, the page already has the latest jQuery associated with it.

Here in the head of the page (the one where you have the image in the right place), in it's served source, we see (in addition to other code), this:

Code:

  <link rel="stylesheet" href="/templates/protostar/css/template.css" />
  <link rel="stylesheet" href="/imagepanner.css" />
  <style type="text/css">
div.mod_search63 input[type="search"]{ width:auto; }
/* demo styles. Remove if desired */
#pcontainer1{
	width: 600px;
	height: 400px;
}

@media screen and (max-width: 780px){ /* responsive setting */
	#pcontainer1{
		width: 100%;
		height: 400px;
	}
}
  </style>
  <script src="/media/jui/js/jquery.min.js"></script>
  <script src="/media/jui/js/jquery-noconflict.js"></script>
  <script src="/media/jui/js/jquery-migrate.min.js"></script>
  <script src="/media/system/js/caption.js"></script>
  <script src="/media/jui/js/bootstrap.min.js"></script>
  <script src="/templates/protostar/js/template.js"></script>
  <script src="/media/system/js/html5fallback.js"></script>
  <script src="/imagepanner.js"></script>
  <script src="/jquery.kinetic.min.js"></script>
  <script src="/jquery.mousewheel.min.js"></script>

These files (highlighted and red) are all "500 Internal Server Error". This means that either they are not there and/or are not allowed to accessed there. You might try putting them in the folders where files that are like them are already kept and then accessing them from there.

So, you could put imagepanner.css in the /templates/protostar/css/ folder and then write its tag like:

Code:

<link rel="stylesheet" href="/templates/protostar/css/imagepanner.css" />

With the scripts, put them in the /media/jui/js/ folder and access them on the page with these tags:

Code:

  <script src="/media/jui/js/imagepanner.js"></script>
  <script src="/media/jui/js/jquery.kinetic.min.js"></script>
  <script src="/media/jui/js/jquery.mousewheel.min.js"></script>

If you don't have these files, they can all be gotten from the demo page:

http://www.dynamicdrive.com/dynamici...magepanner.htm

in the section headed 'The above code references the following external files (right click, and select "Save As"):' inside of of the Step 1 section.

So anyways, if you have those files, put them where I told you to and setup the tags for them on the page in the way I mentioned. If you don't have them, grab them from the demo page and then put them where I mentioned and place the tags for them on the page as indicated.

Once you've taken care of that, you may need to refresh the page and/or empty the browser cache to see changes take effect.

**timtecsa** · 04-18-2016, 08:44 PM

Pan and Zoom only works vertically. Error message was caused by presence of the standard Joomla Read more thing. Without it the buttons below image are visible on category blog view. fixable? http://j351.gpmnews.com/index.php/ip.../74-ipz-test-2

**jscheuer1** · 04-18-2016, 10:31 PM

Alright, we're making progress. Everything seems to be working, it looks like just a style conflict now. If I remove the highlighted:

Code:

img {
	max-width: 100%;
	width: auto \9;
	height: auto;
	vertical-align: middle;
	border: 0;
	-ms-interpolation-mode: bicubic;
}

from the template css file (/templates/protostar/css/template.css), it seems to work OK. No disappearing image, zooms in/out, and when zoomed in, executes a drag pan.

This is a problem that sometimes happens with styles. Since the template css gives these styles to all images, it can interfere with scripts that manipulate the styles of images. If there were a way to remove or contradict these styles just for the (in this case the #pcontainer1 img) image(s) using this script, I would recommend doing that, but I've tried and, although there might be a way, I haven't found it. So all I can suggest for now is removing the indicated styles from the template css file.

Once they are removed from the css, it's possible to use jQuery to add them back to all other images. But that might cause other problems, though might be needed for the template to work as intended. It could be a simple fix or need more tweaking.

**timtecsa** · 04-18-2016, 11:39 PM

I 'removed' the highlighted items in template.css like this:

Code:

img {
	/* max-width: 100%; */
	/* width: auto \9; */
	/* height: auto; */
	vertical-align: middle;
	border: 0;
	-ms-interpolation-mode: bicubic;
}

but I don't see any effect and the Error message that seemed to be related to the Read more is back. Correction: I switched to FF and I see it works. Many thanks. The same image in this this ja Wall template seems dead in the water. http://wall-cs.gpmnews.com/index.php...panda-well-fed I'll try removing the .img bits if same in that template.css. Thanks again. Like your backyard FB photos :-)

**jscheuer1** · 04-19-2016, 02:57 AM

Aha! But look! This page:

http://j351.gpmnews.com/index.php/ip.../74-ipz-test-2

is now working!!

Great News! Right?

That said, the problem (at least a main one) with the 16-panda-well-fed page is that the imagepanner scripts and styles are again - unavailable to it for some reason(s). Looks the same as before (500 Internal Server Error), looks like the tags are pointing to the old incorrect locations on/for that page:

Code:

  <link rel="stylesheet" href="/imagepanner.css" type="text/css" />
  <style type="text/css">
/* demo styles. Remove if desired */
#pcontainer1{
	width: 500px;
	height: 375px;
}
  </style>
  <script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
  <script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
  <script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
  <script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
  <script src="/media/system/js/core.js" type="text/javascript"></script>
  <script src="/media/system/js/mootools-more.js" type="text/javascript"></script>
  <script src="/media/jui/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="/imagepanner.js" type="text/javascript"></script>
  <script src="/jquery.kinetic.min.js" type="text/javascript"></script>
  <script src="/jquery.mousewheel.min.js" type="text/javascript"></script>
  <script type="text/javascript"> . . .

**timtecsa** · 05-03-2016, 01:05 AM

Hi John, Now I have it working inside a modal popup, but still only on the default Protostar Joomla template. http://j351.gpmnews.com/index.php Tim

**jscheuer1** · 05-03-2016, 01:28 AM

Well it was working before on that other page. I'm not sure if it still does. That was:

http://j351.gpmnews.com/index.php/ipz-testing/74-ipz-test-2

But I see that page is no longer there.

This really isn't rocket science. You just have to make the resource files (scripts and css) available to the page and remove and/or override any countervailing css.