Zen Cart Logo
Forums / All Other Contributions/Addons / Jquery Zoom [Support thread]

Jquery Zoom [Support thread]

Views: 82,261

Results 201 to 220 of 385
05 Feb 2013, 12:41
#201
niccol avatar

niccol

Totally Zenned

Join Date:
Apr 2009
Posts:
2,138
Plugin Contributions:
1

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

05 Feb 2013, 13:00
#202
philip937 avatar

philip937

Totally Zenned

Join Date:
Aug 2009
Location:
Bedford, England
Posts:
968
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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

05 Feb 2013, 13:06
#203
philip937 avatar

philip937

Totally Zenned

Join Date:
Aug 2009
Location:
Bedford, England
Posts:
968
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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
05 Feb 2013, 14:57
#204
kevin205 avatar

kevin205

Totally Zenned

Join Date:
Dec 2012
Posts:
607
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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.

05 Feb 2013, 15:15
#205
philip937 avatar

philip937

Totally Zenned

Join Date:
Aug 2009
Location:
Bedford, England
Posts:
968
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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

05 Feb 2013, 15:34
#206
kevin205 avatar

kevin205

Totally Zenned

Join Date:
Dec 2012
Posts:
607
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

Thanks Phil.

05 Feb 2013, 15:47
#207
philip937 avatar

philip937

Totally Zenned

Join Date:
Aug 2009
Location:
Bedford, England
Posts:
968
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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

05 Feb 2013, 20:41
#208
philip937 avatar

philip937

Totally Zenned

Join Date:
Aug 2009
Location:
Bedford, England
Posts:
968
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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.php?205668-Possible-Bug-includes-modules-main_product_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:

05 Feb 2013, 21:38
#209
niccol avatar

niccol

Totally Zenned

Join Date:
Apr 2009
Posts:
2,138
Plugin Contributions:
1

Re: Jquery Zoom [Support thread]

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

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?

05 Feb 2013, 22:13
#210
philip937 avatar

philip937

Totally Zenned

Join Date:
Aug 2009
Location:
Bedford, England
Posts:
968
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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

05 Feb 2013, 22:15
#211
niccol avatar

niccol

Totally Zenned

Join Date:
Apr 2009
Posts:
2,138
Plugin Contributions:
1

Re: Jquery Zoom [Support thread]

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:

05 Feb 2013, 22:22
#212
philip937 avatar

philip937

Totally Zenned

Join Date:
Aug 2009
Location:
Bedford, England
Posts:
968
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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

05 Feb 2013, 22:24
#213
philip937 avatar

philip937

Totally Zenned

Join Date:
Aug 2009
Location:
Bedford, England
Posts:
968
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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

05 Feb 2013, 22:32
#214
niccol avatar

niccol

Totally Zenned

Join Date:
Apr 2009
Posts:
2,138
Plugin Contributions:
1

Re: Jquery Zoom [Support thread]

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

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

05 Feb 2013, 23:14
#215
chadderuski avatar

chadderuski

Totally Zenned

Join Date:
Apr 2006
Location:
Dark Side of the Moon
Posts:
986
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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!

05 Feb 2013, 23:21
#216
niccol avatar

niccol

Totally Zenned

Join Date:
Apr 2009
Posts:
2,138
Plugin Contributions:
1

Re: Jquery Zoom [Support thread]

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.

05 Feb 2013, 23:24
#217
chadderuski avatar

chadderuski

Totally Zenned

Join Date:
Apr 2006
Location:
Dark Side of the Moon
Posts:
986
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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?

05 Feb 2013, 23:43
#218
chadderuski avatar

chadderuski

Totally Zenned

Join Date:
Apr 2006
Location:
Dark Side of the Moon
Posts:
986
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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

06 Feb 2013, 01:26
#219
chadderuski avatar

chadderuski

Totally Zenned

Join Date:
Apr 2006
Location:
Dark Side of the Moon
Posts:
986
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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

06 Feb 2013, 07:47
#220
philip937 avatar

philip937

Totally Zenned

Join Date:
Aug 2009
Location:
Bedford, England
Posts:
968
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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