Jquery Zoom [Support thread]

Assuming that you don't have a large image on this one, this one appears to be working my end and its a single image one..

http://96. 30. 58.67/index.php?main_page=product_info&cPath=6_110&products_id=464

philip937:

When I'm looking its really hard to see if its working. Can you set your product info image size in the admin to say 50 wide 50 high?

done as requested: 50!

chadderuski:

done as requested: 50!

Hmm Grrr something defo not working. I'm seeing the main Image diffent sizes on each product and most are more 500-600 :-(

Less on your working than were on mine :-(

just done some more tests my end.

I actually think a safer way of coding it would be to just have this:

function func (img) {
if(img.height >= img.width) {
img.style.height = "<?php echo $iheight ?>";
} else {
img.style.width = "<?php echo $iwidth ?>";
}
}

I am seeing similar results with the additional images vs only oine image however its like it resets it.. if i use the next product link on my site ones that work work, then i'll hit one that has one image and it doesnt then I go previous, then forward and the image is then re-sized..

its very strange...

can't suss your though.. I cant get any to display 50 x 50..

for example, this page, your html source code is showing:
http://96. 30. 58.67/index.php?main_page=product_info&cPath=6_148&products_id=1151&zenid=d0d30ebcd1e64c6234e12a368f3d9e36

and this is the image..

REALLY.. REALLY.. WEIRD!

Philip:

What is weird is when you click back and forth with PREV <> NEXT, the image scales to 50 x 50 and zoom works correctly, but if you REFRESH the page, the image is show FULL size!

It HAS to be because somewhere your variables are not being reset. So the LAST value (for one of the dimensions) is being retained... this is my thought on what's happening...

I'm stumped.. We need a java/jquery guru to help implant the size switch better.

or simply a break ...

Either way, you've made some really great progress!

EUREKA... I think!

use this in your
includes/templates/YOUR/TEMPLATE/templates/tpl_modules_main_product_image.php

works perfect on my site even and tested also with images of different sizes too.

<?php
/**
 * Module Template
 *
 * @package templateSystem
 * @copyright Copyright 2003-2011 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_modules_main_product_image.php 18698 2011-05-04 14:50:06Z wilt $
 */
?>
<?php require(DIR_WS_MODULES . zen_get_module_directory(FILENAME_MAIN_PRODUCT_IMAGE)); ?>
<div id="productMainImage" class="centeredContent back">

<style>
.mainImage {
  max-width: <?php echo MEDIUM_IMAGE_WIDTH ?>px;
  max-height: <?php echo MEDIUM_IMAGE_HEIGHT ?>px;
  height:auto;
  width:auto;
}
</style>


<script language="javascript" type="text/javascript"><!--
document.write('<?php echo '<a href="' . $products_image_large . '" class="bonzer_zoom" rel="product_info">' . zen_image(addslashes($products_image_medium), addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT, 'class="mainImage"') . '</a>'; ?>');
//--></script>



<noscript>
<?php
  echo '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '" target="_blank">' . zen_image($products_image_medium, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>';
?>
</noscript>
</div>

enjoy..

Philip!

That my friend is working PERFECTLY!! Pages are surviving manual refreshing, and Next/Prev are working fine also. Of note, is the GIANT image also behaves as it should. All the picture swapping is working, even with different sizes.

AWESOME!

PS: Have you tested with Image Handler 4 yet?

chadderuski:

Philip!

That my friend is working PERFECTLY!! Pages are surviving manual refreshing, and Next/Prev are working fine also. Of note, is the GIANT image also behaves as it should. All the picture swapping is working, even with different sizes.

AWESOME!

PS: Have you tested with Image Handler 4 yet?

I don't use image handler, I'm afraid I would have to leave that to someone else to deal with.

Pretty chuffed with this, now works for any standard zen cart set up with any type of image set up, can't ask for much more than that! ;-)

When I get time I'll tidy up all te code and zip it up into a

Image Swap with JQZoom Version 1.0 for ZC1.5.1

:clap::clap:

I just need to fix the disabled JavaScript bug and that's it - oh and some instructions..

Opps!

You reminded me of something: When java is turned off, the additional images show TWICE.

Sorry!

chadderuski:

Opps!

You reminded me of something: When java is turned off, the additional images show TWICE.

Sorry!
Yes that's the bug I need to fix. Should be easy to fix

I did a test with IH4, and as expected it doesn't quite work out of the box. On my test site, the only one that work was the product that I have made _LRG and _MED images.

Now, a quick fix that doesn't seem to break IH4 is to just replace the additional_images.php and main_product_image.php files. It's a start... until we can find how to merge the two mods

Not used it so excuse my ignorance? What would the benefit of merging the mods? Doesn't image handler just do hover for large image? The only thing I thought it does in addition is the watermark stuff? Am I missing the point?

Is it because image handler does the hover thing on all product listing images too? If so what you just suggested is the fix. A merge would not be required.

This mod would deal with the product info page and those two files from image handler should just not be installed.

Image handler from what I saw used a completely different Inge selection logic and in my opinion like the standard zen cart image testing is slightly flawed.

This mod now deals fully with all image scenarios
Small
Small and medium
Small and large
Small medium and large
Sub ditectories
And all the above for both main image and additional image.
Zen cart out of the box doesn't

@Phil,

Great work. If you have an up to date version can you post it? Or is the one above the most up to date? I will try and have a look over the weekend.

What are the remaining issues?

I think if it does not play nice with Image handler then that is a major stumbling block. So will have a look at that.
The the javascript escaping?

And what else.

niccol:

@Phil,

Great work. If you have an up to date version can you post it? Or is the one above the most up to date? I will try and have a look over the weekend.

What are the remaining issues?

I think if it does not play nice with Image handler then that is a major stumbling block. So will have a look at that.
The the javascript escaping?

And what else.

Nick, TBH I don't know exactly what image handler odes other than give a hover for larger image facility and a watermark facility?

as per my last post, these files do not affect image handler, they simply replace the job of image handler on the product listing page. However in terms of the watermarking I don't know at what level that is done so maybe that feature would be removed if certain merging is not done.

That said, as I mentioned above the logic of testing for images existing on the server both on image handler and out of the box zencart was flawed as which I have fixed in the code in these zoom files.

regarding whats left to do. Don't worry about the script links, i'll look at sorting that, then as far as i'm concerned its good to go other than instructions for installation and configuration options.

The last zip I uploaded is the latest with the exception of the tpl_modules_main_product_image.php file amendment I have made a few posts back which now deals with keeping different size images aspect ratio.

If you give me a detailed run down on the purpose of image handler and why it's so important i'll have a think it there is any need to merge some files, other than that I think this is great standalone.

P.S - have a good read through the posts since you were last on, we have made some great improvements to ensure full compatibility with any type of zenner... :D

The core functionality of Imagehandler is that it creates scaled versions of the images. So, what you do is upload a large image ( in size not as a _LRG file) . What Zen would do then is server that image whenever requested. Which results in the big image being served even when a small image is needed. Which burns bandwidth.

So, what image handler does is create scaled versions of the images. So when the small version of image.jpg is required it creates it. Then it uses that small scaled image whenever required. So, it means that sites are much much faster and bandwidth is not burnt.

Most developers will put image handler on the site as the very first module they use. And most people should too, to be honest. There is a bit of a logic which says that this functionality should be rolled into the core of Zen ( like prestacart, magento, cs cart, open cart, wordpress ) but I am not going to get involved in that. So, alot of people would say that Zen is not complete without IH.

So, that is kind of why I think that you have to support it to make this a really good module as opposed to a functional one.

The thing about IH is that it creates the images when they are needed. Which can cause issues with javascript because the 'medium' version of a file may not actually exist until it is required. Javascript does not send a request the same way as html does so the image may not be created. Which means that the zoom just won't work.

The usual way to bypass that is to pre-load the images low down on the page. that way they are created before the zoom needs them. but as you know that in itself creates bandwidth issues.

IH has some other features - some of which are useful and some of which are not all that useful and the people managing it would probably ditch if they could.

• It creates lovely lovely hover effects. Most developers hate these but the public seem to like them
• It adds a better interface for uploading additional images
  There are probably a few others that I am over-looking.

But the core functionality is scaling images to the right size before they are served.

I have gone on record as saying that I am not a huge fan of IH. ( Just because it is cumbersome for what it does ) I use my home grown alternative. But some kind of server side image management is pretty much a necessity for most users.

So somehow it actually creates an actual new image file?