PDA

View Full Version : 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:


<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:


<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:


<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/ipz-testing/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:


<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:


<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:


<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/dynamicindex4/imagepanner.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/ipz-testing/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:


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:


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/cats/16-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/ipz-testing/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:


<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.

timtecsa
05-03-2016, 03:20 PM
This is down to the panning script (and beyond my support!).
In your code you have:

wrapper: $('#pcontainer1')
There is no element with id "pcontainer1".

This is Peter's comment about the Wrapper error message. Any idea what I need to change ?

jscheuer1
05-03-2016, 04:13 PM
I don't see how that's a mystery. At one point you had the element, but there was no image in it. Apparently in this instance you have skipped the element. As I said before this really isn't so complicated. You just have to arrange things so the requirements of the script are satisfied. Perhaps, if you haven't already, you should setup you own working HTML/javascript only demo - just so you can see what's required.

timtecsa
05-03-2016, 10:26 PM
All I know how to do is to copy paste what is given in Steps 1 and 2 here: http://www.dynamicdrive.com/dynamicindex4/imagepanner.htm Perhaps I should read the set up information :-(

jscheuer1
05-03-2016, 11:48 PM
Reading is always good.

timtecsa
05-04-2016, 12:54 AM
I agree. But this time I'm no wiser. I can't even find any coherent explanation of the Error message on Google. It doesn't seem to affect the functioning of the pan / zoom so I'm wondering how important it is.

jscheuer1
05-04-2016, 01:59 AM
If the only problem is that alert, look in the script (imagepanner.js) with a text only editor and add the highlighted as shown:


function imagepanner(options){
var thisinst = this
if (options.wrapper.length !=1){
//alert('Wrapper should be a single element! Existing.')
return
}
this.s = $.extend({}, defaults, options)
var $wrapper = options.wrapper.cs . . .

That's meant to help beginners doing this on a single page. If you are working across multiple pages with only some or one of them having the markup, this alert is pointless.

timtecsa
05-04-2016, 03:45 AM
Thanks. I had seen that and wondered if it could be disabled. I've added the 2 slashes but it's still coming up. 5897 Chrome politely asked if would like to stop seeing it but FF and Safari are less cooperative :-) Where else may it come from or is it possible stuck in cache ? I don't see the edit in the page source yet, but just checked in Filezilla and it's there. ??

jscheuer1
05-04-2016, 04:33 AM
Well, it's only there once in the imagepanner.js file, so either you have updated a copy that isn't being used, have multiple copies associated with the page, one or more of which haven't yet been edited, or, it's as you suspect, cached. In most browsers holding down the CTRL key while hitting the F5 key will reload while clearing the cache. (latest Chrome, Firefox, and Opera, maybe IE11).

In most browsers - Chrome is my favorite for this, you can hit F12 and get a developers' console, click the resources tab, then open the page's name drop down in the left column, then click on/open the script branch. Then click on imagepanner.js - you should then see it in the main panel to the right and can soon see if the desired edit is in it.

If you want more help, give me a link to the current page where this is happening.

jscheuer1
05-04-2016, 04:38 AM
I just tried CTRL F5 on http://j351.gpmnews.com/index.php and the error went away - you should be good.

timtecsa
05-04-2016, 10:32 AM
Many thanks. Error now gone. I also discovered how to turn of Site Ground cache for domains in dev stage :-) 5898 Now to find a coder to help make a Joomla plugin.