Jquery Zoom [Support thread]

[niccol]

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

[philip937]

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

[philip937]

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
/**
 * 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

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

[philip937]

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

[Kevin205]

Thanks Phil.

[philip937]

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

[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

[niccol]

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

<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

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?

[philip937]

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