Jquery Zoom [Support thread]

Phil,

I will have a look at this in the evening.

But yes, the 'noscript' thing is probably wise. To be honest, on my sites, I have much bigger problems if javascript is not enabled!!! And that is getting less and less common but it is good practice to do what you have done.

Well if you want to zoom you will need a large image to zoom to. I guess there is some logic in just using the large image and no other. That way you are just downloading the big one and not the smaller ones. Not sure what I think of this. Personally, I usually pre-load the large images at the foot of the page. That also deals with image scaling issues that arise from using Image Handler. But as you know that does use bandwidth than may not be needed. So the correct solution???? If you get javascript to load the image when required it can cause issues with ImageHandler because the image may not actually exist yet and needs to be created on the fly.

The module main_product_image.php already does all the heavy lifting of finding the correct image. If there is a large it uses that one etc. So, one does not have to re-invent the wheel there. Rather one can use the variables it creates. It is worth noting however that this file is different in normal installations and in Imagehandler.

As I say I will have a look later on :-)

yeah spotted that earlier when I was understanding the structure a bit more. already does the image checks doesnt it :o)

not sure about the additional images file I got a few threads back for the image swapping though, seems like its using the small and not large if large present, medium if meium present etc etc So when i click the thumbnail, the "gallery" script (i assume) is what puts the image in the area where the main product image goes, but its taking the small image and ssteretching it to the size on my product info image size (which is actually the size of my medium images) hence the qusality drops.. then when hovering over is reduces down to the small again.. am I right in uderstanding that the small and large images are set in the rel part on the additional images file smallimage: and largeimage: ?

Phil

for clarity, below is the additional images file I am using from a few posts back. Still unsure why there is image handler stuff on it too??

PHP Code:

---

<?php
/**
 * additional_images module
 *
 * Prepares list of additional product images to be displayed in template
 *
 * @package templateSystem
 * @copyright Copyright 2003-2010 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: additional_images.php 16913 2010-07-16 03:38:06Z ajeh $
 */
if (!defined('IS_ADMIN_FLAG')) {
  die('Illegal Access');
}
if (!defined('IMAGE_ADDITIONAL_DISPLAY_LINK_EVEN_WHEN_NO_LARGE')) define('IMAGE_ADDITIONAL_DISPLAY_LINK_EVEN_WHEN_NO_LARGE','Yes');
$images_array = array();


// do not check for additional images when turned off
if ($products_image != '' && $flag_show_product_info_additional_images != 0) {
  // prepare image name
  $products_image_extension = substr($products_image, strrpos($products_image, '.'));
  $products_image_base = str_replace($products_image_extension, '', $products_image);

  // if in a subdirectory
  if (strrpos($products_image, '/')) {
    $products_image_match = substr($products_image, strrpos($products_image, '/')+1);
    //echo 'TEST 1: I match ' . $products_image_match . ' - ' . $file . ' -  base ' . $products_image_base . '<br>';
    $products_image_match = str_replace($products_image_extension, '', $products_image_match) . '_';
    $products_image_base = $products_image_match;
  }

  $products_image_directory = str_replace($products_image, '', substr($products_image, strrpos($products_image, '/')));
  if ($products_image_directory != '') {
    $products_image_directory = DIR_WS_IMAGES . str_replace($products_image_directory, '', $products_image) . "/";
  } else {
    $products_image_directory = DIR_WS_IMAGES;
  }

  // Check for additional matching images
  $file_extension = $products_image_extension;
  $products_image_match_array = array();
  if ($dir = @dir($products_image_directory)) {
    while ($file = $dir->read()) {
      if (!is_dir($products_image_directory . $file)) {
        if (substr($file, strrpos($file, '.')) == $file_extension) {
//          if(preg_match("/" . $products_image_match . "/i", $file) == '1') {
          if(preg_match("/" . $products_image_base . "/i", $file) == 1) {
            if ($file != $products_image) {
              if ($products_image_base . str_replace($products_image_base, '', $file) == $file) {
                //echo 'I AM A MATCH ' . $file . '<br />';
                $images_array[] = $file;
              } else {
                //  echo 'I AM NOT A MATCH ' . $file . '<br />';
              }
            }
          }
        }
      }
    }
    if (sizeof($images_array)) {
      sort($images_array);
    }
    $dir->close();
  }
}

if(sizeof($images_array))
{
    // add in main image
    $im = explode('/',$products_image);
    $im = array_reverse($im);
    
    $images_array[] = $im[0];
}

// Build output based on images found
$num_images = sizeof($images_array);
$list_box_contents = '';
$title = '';



if ($num_images) {
  $row = 0;
  $col = 0;
  if ($num_images < IMAGES_AUTO_ADDED || IMAGES_AUTO_ADDED == 0 ) {
    $col_width = floor(100/$num_images);
  } else {
    $col_width = floor(100/IMAGES_AUTO_ADDED);
  }




  for ($i=0, $n=$num_images; $i<$n; $i++) {
    $file = $images_array[$i];
    $products_image_large = str_replace(DIR_WS_IMAGES, DIR_WS_IMAGES . 'large/', $products_image_directory) . str_replace($products_image_extension, '', $file) . IMAGE_SUFFIX_LARGE . $products_image_extension;
//  Begin Image Handler changes 1 of 2
//next line is commented out for Image Handler 3
//  $flag_has_large = file_exists($products_image_large);
    $flag_has_large = true;
//  End Image Handler changes 1 of 2
    $products_image_large = ($flag_has_large ? $products_image_large : $products_image_directory . $file);
    $flag_display_large = (IMAGE_ADDITIONAL_DISPLAY_LINK_EVEN_WHEN_NO_LARGE == 'Yes' || $flag_has_large);
    $base_image = $products_image_directory . $file;
    $thumb_slashes = zen_image($base_image, addslashes($products_name), 70, 10000);
//  Begin Image Handler changes 2 of 2
//  remove additional single quotes from image attributes (important!)
    $thumb_slashes = preg_replace("/([^\\\\])'/", '$1\\\'', $thumb_slashes);
//  End Image Handler changes 2 of 2
    $thumb_regular = zen_image($base_image, $products_name, 70, 10000);
    $large_link = zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_large);


// niccol find medium
    $products_image_medium = zen_image($base_image, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT);
    $med_src = explode('src="', $products_image_medium);
    $med_src = explode('"', $med_src[1]);
    //echo $med_src[0];
// end of niccol find medium

    // Link Preparation:
    $rel = "{gallery: 'product_info', smallimage: '".$med_src[0]."',largeimage: '".$base_image."'}";
    $script_link = '
        <a class="bonzer" href="javascript:void(0);" rel="'.$rel.'">  
            '.$thumb_slashes.'
        </a>'  ;

    $noscript_link = '<noscript>' . ($flag_display_large ? '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_large) . '" target="_blank">' . $thumb_regular . '<br /><span class="imgLinkAdditional">' . TEXT_CLICK_TO_ENLARGE . '</span></a>' : $thumb_regular ) . '</noscript>';

    //      $alternate_link = '<a href="' . $products_image_large . '" onclick="javascript:popupWindow(\''. $large_link . '\') return false;" title="' . $products_name . '" target="_blank">' . $thumb_regular . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>';

    $link = $script_link . "\n      " . $noscript_link;
    //      $link = $alternate_link;

    // List Box array generation:
    $list_box_contents[$row][$col] = array('params' => 'class="additionalImages centeredContent back"' . ' ' . 'style="width:' . $col_width . '%;"',
    'text' => "\n      " . $link);
    $col ++;
    if ($col > (IMAGES_AUTO_ADDED -1)) {
      $col = 0;
      $row ++;
    }
  } // end for loop
} // endif

---

How do you combine all the bits of zipped files from the beginning of this thread?

Where can you find the last set of working jqzoom plugin? I would appreciate a feed back on this also. Thank you.

Quote:

---

Originally Posted by Kevin205

How do you combine all the bits of zipped files from the beginning of this thread?

Where can you find the last set of working jqzoom plugin? I would appreciate a feed back on this also. Thank you.

---

download files from post 171

and use the additional images file from post 163

Thanks Phil.

Quote:

---

Originally Posted by Kevin205

Thanks Phil.

---

no probs. I am going to have a play with modifyin that standard files and get this to work with which ever images are avaiable

i.e for zoom images
large if large file exisits
medium if medium file exists
or just small

and for main-product image display/swapping to use
medium if medium exists
or just small.

also I will use the script methos of writing the links so that when java is disabled only one image/link is displays for each image.

If I get this all working on my 1.5.1 files i'll zip up a version and post it here

As promised, here is the file set. Should work with a clean install of ZC 1.5.1.

It should handle all variations of image sizes in the directories you have, for example

if you only have small images in your main image directory, you simply just need the actual image size larger than the value set for your product listing image for the zoom to appear to work.

If you have small and medium images, you simply need to ensure that your actual medium image size is larger than that set in for your product info page.

If you have small, medium and large images, you product info page will as per zen carts logic will show your medium image size and will then zoom to the size of your large image size.

I added an additional file to this file set:
/includes/modules/YOUR_TEMPLATE/main_product_image.php

The reason for this is explained here:
http://www.zen-cart.com/showthread.p...duct_image-php
however this file should be optional. I just found that the logic wasn't working correctly when only small and medium images were present when the large link is built.

Nick,
I would be greatful if you could help finishing what I think is the only thing left to do on this, which is to make the additional image link a proper <script> document.wrtite ...

I think its going to be an escaping nightmare but as we spoke about before, good practice to ensure Java disabled browsers do not see the images twice.

Ta.

Phil :clap:

Sorry, perhaps I am misunderstanding but won't this work?

Code:

---

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

---

Phil, thanks a lot for doing all of this. It is great for me because I really do not have time at the moment and I was starting to think that I probably should. Thanks again.

Nick

Quote:

---

Originally Posted by philip937

just been having a fiddle, and maybe a better way of working it would be like this?

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

having trouble with the escaping though to include
title="' .$products_name. '"

obviousy I think this would still benefit with some sort of image checking above to decide if there is larger images in either medium or large directory. but at least the method above deals with no Javascript..

What d'ya think?

---

Nope the obvious breaks it. Going to have the same headache with the additional images file too

Doesn't break it for me. What error do you get?

Doesn't additional_images.php already have noscript links? WOrking off the top of my head here again :smile:

Begging your pardon, it just looked the same as what I already tried, I e honest I haven't tried it yet lol

No the additional images with the image swap ammendment didn't have no script.

Check out the files I uploaded and let me know if you know if an easy way to do it.

I'm off the mac for the night now so will try your no script snippet tomorrow :)

Sorry it's script links not no script it doesn't have.. Man my brain is fried today!

So, we just need to wrap the $script_link variable in a document.write bit of code and that should be the additional images done.

Something like

Code:

---

$script_link = <script language="javascript" type="text/javascript"><!--
document.write('<?php echo '<a class="bonzer" href="javascript:void(0);" rel="'.$rel.'">'.$thumb_slashes.'</a>';?>').//--></script>;

---

I think that the other one should work. I am being lazy because I am working on another site and just quickly pasted it into the product_info page but it worked fine. We are probably both too tired to think at the moment.... so I would definitely proof read the code above :-)

I'm trying this out on a clean install and I must be missing something.

Do I have to download jqzoom from some location and put that in the templates java folder?

thanks!

no. it should all be there.

But you will need to be running jQuery. So if you are not then see earlier posts about how to get that. As I say I'd do it from google CDN.

This may be the issue: I'm using Anne's Abbington Mega template. The java is there but:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" type="text/javascript"></script>

perhaps the wrong version .... If I remember, 'min' is the mini version, correct?

updated to latest CDN library, but not getting the hover:

http://96<dot>30<dot>58<dot>67/index.php?main_page=product_info&cPath=41_80&products_id=366

replace <dot>'s :p

Okay, been spending some time on this. Does Image Handler have to be installed?

tpl_modules_main_product_image.php has a class="bonzer_zoom" but no where in the included files can I find where that class is defined in a CSS file.

This is probably why I can't get it to work....

Quote:

---

Originally Posted by chadderuski

Okay, been spending some time on this. Does Image Handler have to be installed?

tpl_modules_main_product_image.php has a class="bonzer_zoom" but no where in the included files can I find where that class is defined in a CSS file.

This is probably why I can't get it to work....

---

Image handler doesn't need to be installed you just need to include the jquery library.

That class is more likely for jquery not css

You might have a jquery conflict, try loading them in a different order

its working my end, and hat even on IE6... see image attatched..

Quote:

---

Originally Posted by philip937

its working my end, and hat even on IE6... see image attatched..

---

Hi Philip!

Your suggestion of jscript version is what I think solved it for me. I was loading 1.9, so I changed back to 1.6.

I found this site that is also using 1.6:

http://www.mind-projects.it/projects...x.php#howtouse

Really appreciate the help!

@chad
that class is used to attach the zoom to the element. it is a jQuery thing.
Having said that you seem to be getting close. When I look the zoom is working. Just in the wrong place.
looks to me like you need to change the settings in the jQuery initialisation which is in jscript_jqzoom_init.js and/or apply a css rule for position:relative to the .bonzer_zoom class.

@phil
great. what next?

Nick, haven't had chance to test the script links yet, as soon as I have I'll let you know the outcome.

I was going to suggest if you want to submit this as a mod, maybe look at having admin settings to enable/disable too?

One more question :p

Is this supposed to work with multiple images yet?

It may be jumping the gun, or not have my images setup for jqzoom.

When I click one of the additional images, I get two pop-up errors:
1st: Problems loading image
2nd: Problems loading big image

I have only 1 image for each product (they are not broken into LRG MED SM), could that be the issue?

-chadd

:smile: I was kind of hoping that you would submit it as a mod!

One of the big issues about mods is just finding the time to support them. I am a bit at my limit with SNAF and helping out on a few others. There are a couple in the pipeline that I would like to release but just don't have the time to support. It feels wrong to submit them if you can't support them.

Actually, I think that the way to go would be to have a configuration page that as well as turning on and off allows users to set some of the jqzoom init variables. Gosh, I have got to stop talking myself into this stuff.

Perhaps it is worth looking at the jqzoom options and deciding which ones we like the look of. What do you think? Chad?

At the moment it looks like this:

Code:

---

    var options = { 
            zoomType: 'innerzoom', 
            lens:true, 
            title:false,
            preloadImages: true, 
            alwaysOn:false, 
            zoomWidth: 300, 
            zoomHeight: 250, 
            xOffset:90, 
            yOffset:30, 
            position:'left' 
            //...MORE OPTIONS 
    };

---

Oh, that is another thing to look at. It adds the main image to the display of the additional images. We need to disable that if there are no additional images. Otherwise it looks a bit rubbish.

@chad
sorry, are you using IH or not?

If you would have a completed zipped file available for download here, maybe someone else might try to support it? And since you guys have done the hard work you might help as well.

Just a suggestion.

Quote:

---

Originally Posted by chadderuski

One more question :p

Is this supposed to work with multiple images yet?

It may be jumping the gun, or not have my images setup for jqzoom.

When I click one of the additional images, I get two pop-up errors:
1st: Problems loading image
2nd: Problems loading big image

I have only 1 image for each product (they are not broken into LRG MED SM), could that be the issue?

-chadd

---

hmm really thats weird, works find on mine and i was pretty confident that the image logic should have dealt with small medium and large what ever you have.

I will have to take another look. ill look on yours to see if there is anything obvious as to why

but yes should be working! :(

can you let me know what product has additional images? the one you sent me doesnt seem to have any?

Quote:

---

Originally Posted by niccol

:smile: I was kind of hoping that you would submit it as a mod!

One of the big issues about mods is just finding the time to support them. I am a bit at my limit with SNAF and helping out on a few others. There are a couple in the pipeline that I would like to release but just don't have the time to support. It feels wrong to submit them if you can't support them.

Actually, I think that the way to go would be to have a configuration page that as well as turning on and off allows users to set some of the jqzoom init variables. Gosh, I have got to stop talking myself into this stuff.

Perhaps it is worth looking at the jqzoom options and deciding which ones we like the look of. What do you think? Chad?

---

Hi Niccol,

I quite understand about supporting mods. I have my hands full with EP4, but am getting some help.

When I tried the magiczoom, the number of options was nearly overwhelming (it doesn't work with IH4). But some basic settings through the admin would be nice if turned into a mod.

I don't have IH4 installed yet. When I was trying to figure things out, I rolled everything back to the "basics".

here's the product:

http://96 .30 .58 .67/index.php?main_page=product_info&cPath=6_110&products_id=458

(remove spaces)

Quote:

---

Originally Posted by chadderuski

Hi Niccol,

I quite understand about supporting mods. I have my hands full with EP4, but am getting some help.

When I tried the magiczoom, the number of options was nearly overwhelming (it doesn't work with IH4). But some basic settings through the admin would be nice if turned into a mod.

I don't have IH4 installed yet. When I was trying to figure things out, I rolled everything back to the "basics".

here's the product:

http://96 .30 .58 .67/index.php?main_page=product_info&cPath=6_110&products_id=458

(remove spaces)

---

not sure how you have your additional images set up but this is what i see from your source code:

the thumbnail is getitng it from:
img src="images/barsupply/hbb250s_01.jpg

the jquery is looking in the correct location which should be:
smallimage: 'images/hbb250s_01.jpg
largeimage: 'images/hbb250s_01.jpg

not sure what the barsupply directory is??

well, I like team efforts :-)

and this has certainly been one of those. one of the times the 'community' works the way it should. Phil has done most of the heavy lifting so far, to be honest.

I am happy to write an admin panel for it. But won't get there before the weekend because of work commitments.

Also, at that time I want to have a look at :

1. how we deal with IH and if we need to preload images for that. (which could be an admin switch)
2. not showing additional images if it is just the main image.

SO there is a bit to do. I think that Phil has the most recent version better than me but if anyone wants to give it a run then the zip file that is posted above is not that far off I believe.

and following Phil's last post we need to check that we are dealing with sub-directories correctly.

'barsupply' is a sub-directory I am guessing.

Quote:

---

Originally Posted by niccol

not showing additional images if it is just the main image.

---

not sure I know what you mean on this one Nick?

Quote:

---

Originally Posted by philip937

not sure how you have your additional images set up but this is what i see from your source code:

the thumbnail is getting it from:
img src="images/barsupply/hbb250s_01.jpg

the jquery is looking in the correct location which should be:
smallimage: 'images/hbb250s_01.jpg
largeimage: 'images/hbb250s_01.jpg

not sure what the barsupply directory is??

---

Philip:

I don't put ALL images in the /images directory ad hoc. I try to organize them a bit mainly by their main category or by manufacturer. For me it make images easier to manage, update and track...

I don't think I'm the only person that does this. This site has about 3,000 images. But another will have close to 10,000 (they have lots of alternate views, and even mini-movies for many of their products).

I will re-visit the code for pulling the additional image location. to be honest I have only ever used the main image directory, medium and large so dont even know how that directory is being used... but clearly the thumnails image knows where to look for it so i'll take another look when I get a bit of time

Quote:

---

Originally Posted by chadderuski

Philip:

I don't put ALL images in the /images directory ad hoc. I try to organize them a bit mainly by their main category or by manufacturer. For me it make images easier to manage, update and track...

I don't think I'm the only person that does this. This site has about 3,000 images. But another will have close to 10,000 (they have lots of alternate views, and even mini-movies for many of their products).

---

haha I have 7000+ in one directory.. but point taken, I just wasnt aware that you could do that..

I will take another look the way the image location is built

Quote:

---

Originally Posted by philip937

not sure I know what you mean on this one Nick?

---

Honestly I am fitting comments in while a database uploads so ignore me if I am wrong but I seem to remember that if there are three images then there will be the main one and three thumbnails. If there is just one image I think there should be the main one and no thumbnails. I think at the moment it still shows the thumbnail of the one image which is a bit redundant.

Just needs a change to the logic. I have that somewhere but it is probably just as quick to rewrite as to find it :-)

Quote:

---

Originally Posted by niccol

Honestly I am fitting comments in while a database uploads so ignore me if I am wrong but I seem to remember that if there are three images then there will be the main one and three thumbnails. If there is just one image I think there should be the main one and no thumbnails. I think at the moment it still shows the thumbnail of the one image which is a bit redundant.

Just needs a change to the logic. I have that somewhere but it is probably just as quick to rewrite as to find it :-)

---

doesnt on mine.. :O)

looks like I need to use the varibale:

$products_image_directory

instead of using DIR_WS_IMAGES when checking for the image in the file

includes/modules/YOUR_TEMPLATE/additional_images.php

try changing this:

PHP Code:

---

//added image checking image swap and jquery zoom
    
    $products_image_extension = substr($file, strrpos($file, '.'));
    $products_image_base = str_replace($products_image_extension, '', $file);
    $products_image_medium = $products_image_base . IMAGE_SUFFIX_MEDIUM . $products_image_extension;
    $products_image_large = $products_image_base . IMAGE_SUFFIX_LARGE . $products_image_extension;


//added for additional medium checking
$second_medium_image_check = $products_image_base . IMAGE_SUFFIX_MEDIUM . $products_image_extension;


// check for a medium image else use small
if (!file_exists(DIR_WS_IMAGES . 'medium/' . $products_image_medium)) {
  $products_image_medium = DIR_WS_IMAGES . $file;
} else {
  $products_image_medium = DIR_WS_IMAGES . 'medium/' . $products_image_medium;
}


// check for a large image else use medium else use small

if (!file_exists(DIR_WS_IMAGES . 'large/' . $products_image_large)) {
  if (!file_exists(DIR_WS_IMAGES . 'medium/' . $second_medium_image_check)) {
    $products_image_large = DIR_WS_IMAGES . $file;
  } else {
    $products_image_large = DIR_WS_IMAGES . 'medium/' . $second_medium_image_check;
  }
} else {
  $products_image_large = DIR_WS_IMAGES . 'large/' . $products_image_large;
}
    

//end added image checking 


---

to this:

PHP Code:

---

//added image checking image swap and jquery zoom
    
    $products_image_extension = substr($file, strrpos($file, '.'));
    $products_image_base = str_replace($products_image_extension, '', $file);
    $products_image_medium = $products_image_base . IMAGE_SUFFIX_MEDIUM . $products_image_extension;
    $products_image_large = $products_image_base . IMAGE_SUFFIX_LARGE . $products_image_extension;


//added for additional medium checking
$second_medium_image_check = $products_image_base . IMAGE_SUFFIX_MEDIUM . $products_image_extension;


// check for a medium image else use small
if (!file_exists($products_image_directory . 'medium/' . $products_image_medium)) {
  $products_image_medium = $products_image_directory . $file;
} else {
  $products_image_medium = $products_image_directory . 'medium/' . $products_image_medium;
}


// check for a large image else use medium else use small

if (!file_exists($products_image_directory . 'large/' . $products_image_large)) {
  if (!file_exists($products_image_directory . 'medium/' . $second_medium_image_check)) {
    $products_image_large = $products_image_directory . $file;
  } else {
    $products_image_large = $products_image_directory . 'medium/' . $second_medium_image_check;
  }
} else {
  $products_image_large = $products_image_directory . 'large/' . $products_image_large;
}
    

//end added image checking 


---

make sure you create a backup copy, not actually tested this, just off the top of my head..

Ha ha!

I found the code!

Code:

---

if(sizeof($images_array))
{
        // add in main image
        $im = explode('/',$products_image);
        $im = array_reverse($im);
       
        $images_array[] = $im[0];
}

---

I must have included that at some point. But there is a weakness there because of the way it uses explode. It will not account for sub-directory use.

Not sure why I didn't just use $products_image_base. Maybe that doesn't have the extension? Need to go through the logic and check.

@chad

let me know if that ammendemnt above works for you.

@chad looks like you got it sorted?

Have you changed the js or css settings? How comes your zoom is set away from the main image?

Quote:

---

Originally Posted by philip937

@chad

let me know if that ammendemnt above works for you.

---

philip:

VERY close:

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

You'll notice that I the image swaps, and jqzoom works (correctly) , but the base image doesn't resize to the dimensions of the swapped image... did I explain that right?

Is this a situation where additional images would have to be the same "shape" as the main image?

-chadd

Hmm not sure I completely follow.

I would suggest for it to work properly all images should be to the same scale otherwise some would appear to be zoomed and others not.

Again not sure why your zoom window is not the main image area as it should be?

In other words to me it looks like you have set your zoom window to a value you have chosen and your additional images are actually smaller than the window. That make sense?

he is not using 'innerzoom' in the initialisation.

I would suggest that if you don't want a zoom feature to go for image handler if you just want lager images to show when you hover.

If you really want the zoom effect then use the inner zoom so that it actually appears that you are zooming the in on the image in the main product image position

Quote:

---

Originally Posted by philip937

As promised, here is the file set. Should work with a clean install of ZC 1.5.1.

It should handle all variations of image sizes in the directories you have, for example

if you only have small images in your main image directory, you simply just need the actual image size larger than the value set for your product listing image for the zoom to appear to work.

If you have small and medium images, you simply need to ensure that your actual medium image size is larger than that set in for your product info page.

If you have small, medium and large images, you product info page will as per zen carts logic will show your medium image size and will then zoom to the size of your large image size.

I added an additional file to this file set:
/includes/modules/YOUR_TEMPLATE/main_product_image.php

The reason for this is explained here:
http://www.zen-cart.com/showthread.p...duct_image-php
however this file should be optional. I just found that the logic wasn't working correctly when only small and medium images were present when the large link is built.

Nick,
I would be greatful if you could help finishing what I think is the only thing left to do on this, which is to make the additional image link a proper <script> document.wrtite ...

I think its going to be an escaping nightmare but as we spoke about before, good practice to ensure Java disabled browsers do not see the images twice.

Ta.

Phil :clap:

---

Phil anyway you could zip your latest set of files. I used the zip file from the above post on Zen 1.5.1, and I can't even get the cross hair to appear on the main image. When I click on the main image, it goes to a new browser tab showing that image. What am I doing wrong?
I compared my page source, and I don't have "jscript_jquery-1.6.js" loaded. Is that whats causing it?

Quote:

---

Originally Posted by Kevin205

Phil anyway you could zip your latest set of files. I used the zip file from the above post on Zen 1.5.1, and I can't even get the cross hair to appear on the main image. When I click on the main image, it goes to a new browser tab showing that image. What am I doing wrong?
I compared my page source, and I don't have "jscript_jquery-1.6.js" loaded. Is that whats causing it?

---

Yes you need to load the jquery library. Sorry mate this isn't yet an official mod (not this flavour anyway) so instructions are a but vague currently.

Hi!

Actually, the additional images image dimension are there, so when the image swaps on click, it should be possible to update the main image dimensions... correct?

I like the zoom I'm using better than innerzoom...

Also, I just noticed that when I disable javascript, the additional images double-up. The main image doesn't.
The larger image links DO work correctly for the additional images.

Quote:

---

Originally Posted by chadderuski

Hi!

Actually, the additional images image dimension are there, so when the image swaps on click, it should be possible to update the main image dimensions... correct?

I like the zoom I'm using better than innerzoom...

---

As far as I'm aware the zoom isn't 'actually' zooming, it's simply displaying the actual image size. Hence why you have to have the main image dimension settings less than that if the actual image size (unless using the zen cart small medium large structure).

You zoom window is bigger than your additional image sizes.. Make the window smaller.

Philip,

I think we're focusing on two different things. I know the additional images are less than the zoom size, but still larger than the thumbnails displayed. That's something I can improve upon later.

The main products image isn't the same dimensions as some of the additional images. I trying to figure out how to have the main product image display correctly.

Also, I noted above, when java is disabled, the additional images show twice.

-chadd

Oh I see, sorry. Again it looks like you main image size is different dimensions so you probably have your image settings to restrict height and width. If you want the correct proportions try setting either width or height to 0 in your admin?

@chadd

I think I mis understood your problem.

Are you saying that you are expecting that when you click on the additional images they are assuming the same dimensions as the main image and that you don't want this and that you want the dimensions to change to suit the additional being viewed?

Quote:

---

Originally Posted by philip937

@chadd

i think i mis understood your problem.

Are you saying that you are expecting that when you click on the additional images they are assuming the same dimensions as the main image and that you don't want this and that you want the dimensions to change to suit the additional being viewed?

---

yes, exactly! ;p

I'm trying to figure it out, but I'm really playing catchup here!

Hmm ill have to have a play. All my images are all the same dimensions to keep everything all uniform. I'm a bit anal like that! Ill have a play with some random size images and see if there is a way but its probably not possible because the swap is done with the gallery attribute set on the main image so it probably just overlays the image in the space (dimensions) of the main image.

Quote:

---

Originally Posted by philip937

Hmm ill have to have a play. All my images are all the same dimensions to keep everything all uniform. I'm a bit anal like that! Ill have a play with some random size images and see if there is a way but its probably not possible because the swap is done with the gallery attribute set on the main image so it probably just overlays the image in the space (dimensions) of the main image.

---

If you point me to the right area of code, I'll look also...

@chadd

I am pretty limited on my abilty to diagnose the jquery, maybe you are better with it or someone else can look. If I were to guess its either happeing here:

//binding click event on thumbnails
var thumblist = new Array();
thumblist = $('a').filter(function () {
var regex = new RegExp("gallery[\\s]*:[\\s]*'" + $.trim(el.rel) + "'", "i");
var rel = $(this).attr('rel');
if (regex.test(rel)) {
return this;
}
});

or here:

swapimage: function (link) {
el.largeimageloading = false;
el.largeimageloaded = false;
var options = new Object();
options = $.extend({}, eval("(" + $.trim($(link).attr('rel')) + ")"));
if (options.smallimage && options.largeimage) {
var smallimage = options.smallimage;
var largeimage = options.largeimage;
$(link).addClass('zoomThumbActive');
$(el).attr('href', largeimage);
img.attr('src', smallimage);
lens.hide();
stage.hide();
obj.load();
} else {
alert('ERROR :: Missing parameter for largeimage or smallimage.');
throw 'ERROR :: Missing parameter for largeimage or smallimage.';
}
return false;
}

it definatly seems to stretch to fit the size of the main image size which kinda makes sense i guess.

other than that the only other thing i can suggest is to use a batch image editor and make all images the same dimensions by fitting to rectangle. I would always reccomend this anyway as this way your product info page stays the same no matter what images are displayed. but I appreciate other people have different preferences.

sorry im not more help at this time.

or could be this..

this.setdimensions = function () {
this.node.w = (parseInt((settings.zoomWidth) / el.scale.x) > smallimage.w ) ? smallimage.w : (parseInt(settings.zoomWidth / el.scale.x));
this.node.h = (parseInt((settings.zoomHeight) / el.scale.y) > smallimage.h ) ? smallimage.h : (parseInt(settings.zoomHeight / el.scale.y));

It looks like magiczoom uses much of the same code as jqzoom, but they've got a good implementation:

http://96 .30 .40.167/index.php?main_page=product_info&cPath=1&products_id=1

This is a different test with only magiczoom....

Quote:

---

Originally Posted by chadderuski

It looks like magiczoom uses much of the same code as jqzoom, but they've got a good implementation:

http://96 .30 .40.167/index.php?main_page=product_info&cPath=1&products_id=1

This is a different test with only magiczoom....

---

very neat. would do my head in how it moves it all about though. if its similar see if you can see if you can see how they are making the main image change size..

Quote:

---

Originally Posted by philip937

very neat. would do my head in how it moves it all about though. if its similar see if you can see if you can see how they are making the main image change size..

---

outside my skills. they've compressed and obfuscated the javascript... :9

just emailed the author of jqzoom.. see if they have any suggestions

re: magiczoom resizing effect...

this appears to be from http://script.aculo.us/

magictools is most likely incorporating this in some way

just downloaded jqzoom source files with demos and changed one of the image files supplied to a different size. works fine, so there must be something conflicting here,possibly the zen image size being set, will do some more digging

dont know if this makes a differnce, but the demos thumbnails in the html file are coded as:

<li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small1.jpg',largeimage: './imgProd/triumph_big1.jpg'}"><img src='imgProd/thumbs/triumph_thumb1.jpg'></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small2.jpg',largeimage: './imgProd/triumph_big2.jpg'}"><img src='imgProd/thumbs/triumph_thumb2.jpg'></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small3.jpg',largeimage: './imgProd/triumph_big3.jpg'}"><img src='imgProd/thumbs/triumph_thumb3.jpg'></a></li>

notice only the inital one has a class of class="zoomThumbActive"

who ever originally put together this zen version has the html outputting this:
<li><a class="bonzer" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small1.jpg',largeimage: './imgProd/triumph_big1.jpg'}"><img src='imgProd/thumbs/triumph_thumb1.jpg'></a></li>
<li><a class="bonzer" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small2.jpg',largeimage: './imgProd/triumph_big2.jpg'}"><img src='imgProd/thumbs/triumph_thumb2.jpg'></a></li>
<li><a class="bonzer" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small3.jpg',largeimage: './imgProd/triumph_big3.jpg'}"><img src='imgProd/thumbs/triumph_thumb3.jpg'></a></li>

notice how all have the class bonzer and not only the initial image with the class zoomThumbActive

im sure this has nothing to do with the stretching problem but just noticing the differences..

I have found the problem

<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) . '</a>'; ?>');
//--></script>

setting the size here MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT is what is causing it.

I did a test on a product and hard coded the html source output of this for the page and removed the height and width and does as you expect.. however there is a flaw with what you are trying to do unless you use large images as unless you restrict the height and width of your small images you wont actually be zooming anything.

so you have the choice of either using large images and changing the code to not restrict the width and height, or change all your small images to the same scaling.

unless you can see a workaround to this?

I looked at the source after clicking on one of the additional images and even though the href pointed to the additional image (and why jqzoom works), the dimensions given and the document.write() is still defined as the original image and dimensions...

Quote:

---

Originally Posted by chadderuski

I looked at the source after clicking on one of the additional images and even though the href pointed to the additional image (and why jqzoom works), the dimensions given and the document.write() is still defined as the original image and dimensions...

---

That's what I just said. Essentially the jquery is replacing the image in that element it's not changing the sizes set.

They are set my zencart. So like I said either you have to remove the part of code that sets a width and height and use larger images to zoom to, or you have to batch change all your images to the same width and height maintaining their aspect ratio. Not unless you fancy recording the q query to not only pass the image defined as smallimage: and as well pass the width and height and replace that part too.

Way above my head though I'm afraid. So best I can suggest is te two options above. Sorry :-(

I think the fix would be to remove the height and width on the img tag the apply the MEDIUM Inage width and height to a wrapper div, then use css and do something like

#Imagewrapperdiv img {
max-width 100%;
}

That make sense?

@chadd

Done this on my iPhone so might be screwy, try this for a starter for ten and see the result.

Replace this in the template file for main image


<script language="javascript" type="text/javascript"><!--
document.write('<?php echo '<a href="' . $products_image_large . '" class="bonzer_zoom" rel="product_info"><img src="' . $products_image_medium . '" /></a>'; ?>'); //--></script>

Backup backup backup..

Quote:

---

Originally Posted by philip937

@chadd

Done this on my iPhone so might be screwy, try this for a starter for ten and see the result.

Replace this in the template file for main image


<script language="javascript" type="text/javascript"><!--
document.write('<?php echo '<a href="' . $products_image_large . '" class="bonzer_zoom" rel="product_info"><img src="' . $products_image_medium . '" /></a>'; ?>'); //--></script>

Backup backup backup..

---

Well, the zoom works, but the image is simply displayed full size. Your idea would probably work if I had my images sized small/med/large like with IH4.

Haven't finished yet..

Stand by.

Actually it's real late and spent way too Long on this today..

If you wanna have a go basically you need to add a div on the outside of the a tag give if an id say productimagefocus and an inline style with height and width defined by
The MEDIUM width and height define.

Once you do that then apply the css
#productimagefocus img {
Max-width: 100%;
}

In theory that should work!

Yeah, been a long day and need a break myself! Maybe niccol will strike gold?

I'm pretty confident thy suggestion above is probably the best "all around" solution.

In theory what it will do is create a container which will be controlled by the product info image size set in the admin then by Appleby the css on one axis it will fit the image to rectangle.
That way it will sort it for both people with different size images and people who have the same size image. And also people who just use small and people who use small medium and or large.

Night :-)

ok not tested and not got much time to spend on this today, however hopefully you should see the logic here and be able to have a play, if it works first time i'll be chuffed..

in includes/templates/YOUR_TEMPLATE/templates/tpl_modules_main_product_images.php

replace this:

[PHP][/<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) . '</a>'; ?>');
//--></script>PHP]

with this:

PHP Code:

---

    <script type="text/javascript">
      function func (img) {
        if(img.height >= img.width) {
          img.style.height = "100%";
          img.style.width = "auto";
        } else {
          img.style.width = "100%";
          img.style.height = "auto";
        }
      }
    </script>

<?php
$iCstart = '<div id="iContainer" style="width:' .MEDIUM_IMAGE_WIDTH. '; height:' .MEDIUM_IMAGE_HEIGHT. '">';
$iCend = '</div>';
?>

<script language="javascript" type="text/javascript"><!--
document.write('<?php echo $iCstart. '<a href="' . $products_image_large . '" class="bonzer_zoom" rel="product_info"><img onload="func(this);" src="' . $products_image_medium . '" /></a>' . $iCend; ?>');
//--></script>

---

so heres what we are now doing..
using a clever script to check the image height and width and depending on which is the greatest applying image width 100% to it.

this then should fill to 100% of either the container width or height defined by the admin settings for MEDIUM_IMAGE_WIDTH & MEDIUM_IMAGE_HEIGHT which is now applied with a div around the outside of the image inside the document.write. defined by
$iCstart and $iCend

hope it works... please let me know

grr excuse the extra post, wont let me edit the previous.. missed off the "px" in the style...

----

ok not tested and not got much time to spend on this today, however hopefully you should see the logic here and be able to have a play, if it works first time i'll be chuffed..

in includes/templates/YOUR_TEMPLATE/templates/tpl_modules_main_product_images.php

replace this:

[PHP][/<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) . '</a>'; ?>');
//--></script>PHP]

with this:

PHP Code:

---

    <script type="text/javascript">
      function func (img) {
        if(img.height >= img.width) {
          img.style.height = "100%";
          img.style.width = "auto";
        } else {
          img.style.width = "100%";
          img.style.height = "auto";
        }
      }
    </script>

<?php
$iCstart = '<div id="iContainer" style="width:' .MEDIUM_IMAGE_WIDTH. 'px; height:' .MEDIUM_IMAGE_HEIGHT. 'px">';
$iCend = '</div>';
?>

<script language="javascript" type="text/javascript"><!--
document.write('<?php echo $iCstart. '<a href="' . $products_image_large . '" class="bonzer_zoom" rel="product_info"><img onload="func(this);" src="' . $products_image_medium . '" /></a>' . $iCend; ?>');
//--></script>

---

so heres what we are now doing..
using a clever script to check the image height and width and depending on which is the greatest applying image width 100% to it.

this then should fill to 100% of either the container width or height defined by the admin settings for MEDIUM_IMAGE_WIDTH & MEDIUM_IMAGE_HEIGHT which is now applied with a div around the outside of the image inside the document.write. defined by
$iCstart and $iCend

hope it works... please let me know

looks liek your all but there?!?! did it work?

attattched is a working example of the logic that is being applied to the div and image..

notice if in the htlm source code if you chage either the width or height value in either of the divs the image will re-size but maintain aspect ratio.

just wack it in a html file and load on your pc locally to play.

i'll leave you to tinker..

----
<html>

<head>
<title>Test page</title>
<script type="text/javascript">
function func (img) {
if(img.height >= img.width) {
img.style.height = "100%";
img.style.width = "auto";
} else {
img.style.width = "100%";
img.style.height = "auto";
}
}
</script>
</head>

<body>

<div style="width:300px; height:300px">
<img onload="func(this);" src="http://img.yandex.net/i/www/logo.png" />
</div>

<div style="width:300px; height:200px">
<img onload="func(this);" src="http://t2.gstatic.com/images?q=tbn:ANd9GcROiXx6BaNBDTn4xAS8FBMH7qUZIOPKcXZKL6asl4hHw2ys-h8Z" />
</div>

</body>

</html>

I wanted to post this just in case others are stuck and clueless like I was yesterday without help!

It works now using one size image at 72dpi and 800px wide to get the zoom effect.

I had to move the jquery:
from:

PHP Code:

---

includes/modules/pages/product_info/"jscript_jquery-1.6.js 


---

to:

PHP Code:

---

includes/templates/MyTemplate/jscript/jscript_jquery-1.6.js 


---

And removed the following call for JQuery used in another plugin (this plugin still functions on all pages. The way it meant to work.)

PHP Code:

---

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> 


---

from:

PHP Code:

---

includes/templates/MyTemplate/common/tpl_main_page.php 


---

The sequence of uploading the images when you setup and upload your products were as follow: (ie. if you have four images to upload)
Image1_3.jpg
Image1_2.jpg
Image1_1.jpg
Image1.jpg This being the last and main image for the product.

Only problem is that images can only be uploaded to the main image directory, otherwise the code breaks!

Thanking for hard work of Nick, Phil and Chad.

Quote:

---

Originally Posted by Kevin205

It works now using one size image at 72dpi and 800px wide to get the zoom effect.

---

the image can be any size... however to get the zoom effect the size for your product info image size needs to be set smaller than the actual image size (if only using the one size image or small and medium. if you also use large images, it will use the large image for zooming and medium or small for the product info page main image).

[QUOTE]Only problem is that images can only be uploaded to the main image directory, otherwise the code breaks![/QUOTE
this bug was corrected a few posts back if you read through but the files havent yet been updated.

Thanks for your kind words.. still working hard to make this work for all set-ups to reduce the limitations.

Quote:

---

Originally Posted by philip937

this bug was corrected a few posts back if you read through but the files havent yet been updated.

Thanks for your kind words.. still working hard to make this work for all set-ups to reduce the limitations.

---

http://www.zen-cart.com/showthread.p...15#post1184215

Quote:

---

Originally Posted by philip937

the image can be any size... however to get the zoom effect the size for your product info image size needs to be set smaller than the actual image size (if only using the one size image or small and medium. if you also use large images, it will use the large image for zooming and medium or small for the product info page main image).

---

Not really. You don't have to that.

I am not using small, medium & large images. Only one image. When it comes to production time, it does not make any sense dealing with all that extra work.

What I have done is to change my "tpl_product_info_display.php" with <div>s limiting the size of the main product image.

Quote:

---

Originally Posted by Kevin205

Not really. You don't have to that.

I am not using small, medium & large images. Only one image. When it comes to production time, it does not make any sense dealing with all that extra work.

What I have done is to change my "tpl_product_info_display.php" with <div>s limiting the size of the main product image.

---

you've lost me.. I said you can use any image size..

whether or not you are using
a small image
a small and medium image
a small medium and large image

the admin settings for product info image size is what limits the image size. So what I am saying is if you use just a small image lets say

600px x 800px

then so that the "zoom" works, because you do not have a large image you would have to have the product info image size in the admin set to say:

width 300
height 400

if you have the admin setting set to more than

width 600
height 800

then as you do not have a large image for it to use for zoom there would be no zoom.

I am currently working on a fix so that images of different dimensions can still be used and still controlled through the admin so they do not stretch to fit the area of the main image area.

My Admin for Product Info - Image is set 400px X 400px
My div is set to 400px wide (no height specified)
My image size is 800px wide.

It works for me. I get the effect.

Quote:

---

Originally Posted by Kevin205

My Admin for Product Info - Image is set 400px X 400px
My div is set to 400px wide (no height specified)
My image size is 800px wide.

It works for me. I get the effect.

---

not sure what you have your DIV for.. it should work without the div..

but yes with those values it should work well :o)

Quote:

---

Originally Posted by philip937

not sure what you have your DIV for.. it should work without the div..

but yes with those values it should work well :o)

---

I had to re-lay the product info page on this site differently.

ok its close..

this seems to work, but my end seems a bit intermittent.. not sure if its a caching issue or if there is conflicting java, but having no expreience with java I cant diagnose..

perhaps you guys can play with it and let me know what results you see..

so, as a test replace your
includes/templates/YOUR_TEMPLATE/templates/tpl_modules_main_product_image.php with this code:

PHP Code:

---

<?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">



<?php
$iwidth = MEDIUM_IMAGE_WIDTH . 'px'; 
$iheight = MEDIUM_IMAGE_HEIGHT . 'px'; 
?>

<script language="javascript" type="text/javascript"><!--
      function func (img) {
          img.style.height = "<?php echo $iwidth ?>";
          img.style.width = "<?php echo $iheight ?>";
      }

document.write('<?php echo '<a href="' . $products_image_large . '" class="bonzer_zoom" rel="product_info"><img src="' . $products_image_medium . '" onload="func(this);"  /></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>

---

actually this is more logical

PHP Code:

---

<?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">



<?php
$iwidth = MEDIUM_IMAGE_WIDTH . 'px'; 
$iheight = MEDIUM_IMAGE_HEIGHT . 'px'; 
?>

<script language="javascript" type="text/javascript"><!--

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


document.write('<?php echo '<a href="' . $products_image_large . '" class="bonzer_zoom" rel="product_info"><img src="' . $products_image_medium . '" onload="func(this);"  /></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>

---

still very intermittent for me, very weird.. maybe doesn't like some of my images?

Guys,

Here is the latest fileset with some bug fixes and includes the images to display correctly if using different image sizes and maintians the ability to set image size in the admin for the product info image.

The image size part is still a bit flakey and needs more testing and feedback.

Still need to wrap the additional product image links inside <script> document.write so that they are not displayed when Javascript is disabled.

Let me know how you get on, I don't have much more I can give on this right now so maybe someone else would like to take charge? :P

Attachment 11904

Cheers

Phil

Hey Philip,

Will try your latest package shortly... thanks for the REALLY hard work :P

I tried the previous post's code, and its VERY close. Some images (ones I have as solo images, but in a sub-directory inside /images)
are either showing FULL size.

But others (I have a number of different ways to do images upload here), work well, and the main image window re sizes to fit the proportion of the clicked image.

Click through this folder to see some of the different results. Will try your new file set shortly:

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

-chadd

ps: we should probably start putting beta version numbers on these file sets so people don't get them mixed up :p

@chadd
Glad to be of help, just hope it works or at least is almost there. In theory the new fileset should allow your admin settings for product info image to determine the width and height but "should" still retain aspect ratio.

Let me know if it works. My post from this morning wasn't working hence why I changed the method in the new files.

Philip!

Go look at the above link and you'll see it's quite close. Only thing breaking is the solo images that are really big (don't know why yet). Wanted you to know.

We (strangely enough) had that working before. Zencart was sizing my HUGE image to fit in the prescribed products image dimentions. Now I am getting the full sized image.

investigating...

-chadd

Are you on the latest file set now?

yes. latest file set.

Here's what I found for the inconsistency:

If a product HAS additional images, it's working.

If there are NO additional images, it seems to be breaking...

EDIT:

ALSO, it seems that once of the attributes is pulling from the previous image...

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?