Image Handler 4 (for v1.5.x) Support Thread

[nipinuk]

Thank you so much for your input. It's all way above my head so I'll have to stick with copying files over until someone shares product info zoom with IH4.

[mc12345678]

Thank you so much for your input. It's all way above my head so I'll have to stick with copying files over until someone shares product info zoom with IH4.

The code of: http://www.zen-cart.com/showthread.p...52#post1263152
Is based on the downloadable product image zoom from the downloads section. What I had to do to get that "program" to work or force it to work was to move the javascript files out of their special little directory and place them with the other jscript files just off of the template's main folder. I then prefixed the files to load I think with jscript_. There are less forceful ways to do this, but with those files loaded and the provided code for themain image, product image zoom does work.

Now if you use the IH4 zoom on hover over small images feature then the code at: http://www.zen-cart.com/showthread.p...34#post1263234
Would be more appropriate if the product's image (medium sized image) is the same as both the small image and the large image, or if the large image is relatively repesentative of the product image being displayed.

Other than that, I can't see why more questions aren't asked instead of surrendering to doing more work than is necessary to run your store.

[mc12345678]

The code of: http://www.zen-cart.com/showthread.p...52#post1263152
Is based on the downloadable product image zoom from the downloads section. What I had to do to get that "program" to work or force it to work was to move the javascript files out of their special little directory and place them with the other jscript files just off of the template's main folder. I then prefixed the files to load I think with jscript_. There are less forceful ways to do this, but with those files loaded and the provided code for themain image, product image zoom does work.

Now if you use the IH4 zoom on hover over small images feature then the code at: http://www.zen-cart.com/showthread.p...34#post1263234
Would be more appropriate if the product's image (medium sized image) is the same as both the small image and the large image, or if the large image is relatively repesentative of the product image being displayed.

Other than that, I can't see why more questions aren't asked instead of surrendering to doing more work than is necessary to run your store.

Looking at what I did to make this work, I see that I didn't follow the instructions of installing css/js loader... I thought the lasttime I did that, I got more than I wanted/needed... Needless to say atthat time I uninstalled the application, until I would find a must need for it and as necessary keep/omit the aspects I wanted to have. Seems like it would accomplish the loading of the javascript to apply to the product(s) as necessary based on the auto_loader cll, though if you use a product type other than just product, the autoloder would have to be modified to apply to each applicable product type used/to which to apply the product image zoom code.

[nipinuk]

Sorry I was feeling completely overwhelmed! I'm looking at it again as you're right, I shouldn't just surrender so quickly :)

Here's what I've done and where I got stuck
1. move the following files from includes/templates/mytemplate/jscript/jquery to includes/templates/mytemplate/jscript
jquery.elevateZoom-3.0.8.min.js
jquery_product_image_zoom.js
jquery-1.10.2.min.js

2. 'prefixed the files to load I think with jscript_' - I got stuck here. How would you prefix the files to load? I tried looking into the script of the files mentioned but don't know which line or file to ammend. Which file/s would I need to ammend?

I just read your latest post. I need CSS JS Loader as I'm using the Fast and Easy Checkout plugin. I don't think I'll be using any other product type other than just product thank goodness!

Thank you for all your help mc12345678

[mc12345678]

Sorry I was feeling completely overwhelmed! I'm looking at it again as you're right, I shouldn't just surrender so quickly :)

Here's what I've done and where I got stuck
1. move the following files from includes/templates/mytemplate/jscript/jquery to includes/templates/mytemplate/jscript
jquery.elevateZoom-3.0.8.min.js
jquery_product_image_zoom.js
jquery-1.10.2.min.js

2. 'prefixed the files to load I think with jscript_' - I got stuck here. How would you prefix the files to load? I tried looking into the script of the files mentioned but don't know which line or file to ammend. Which file/s would I need to ammend?

I just read your latest post. I need CSS JS Loader as I'm using the Fast and Easy Checkout plugin. I don't think I'll be using any other product type other than just product thank goodness!

Thank you for all your help mc12345678

From what it seems like (ie, following the instructions which includes loading CSS/JS loader) then steps 1 and 2 above would be unnecessary. But, if not using that, then in step 2, the prefixing of the files is to rename the file so that it begins with jscript_ so jquery-1.10.2.min.js would become jscript_jquery-1.10.2.min.js. That said, caution should be taken to not have jquery load multiple times or under multiple versions... Otherwise some quirky things can happen/load time is increaased, errors etc... CSS/JS loader tries to minimize that by loading only the desired jquery files applicable to the situation/condition met in the autoloaders file(s).

Glad though that there is progress... As Diva pointed out there is one additional snippet of. code needed to control the display of the zoomed image according to the images->zoom on small image hover setting. A "partial" solution has been provided I apologize that I did not fully incorporate all aspects into a single snippet of code yet. The above code for using product image zoom will be active regardless of that setting, though still the image that will be presented on hover of the medium sized image (product image) will be the large size image. For general use of IH4 this doesn't make a difference, but for those that use IH4 to store two or three different images for a single "product", this code will display the large image as stored in the database/on the server.

[DivaVocals]

So, dropped the product image zoom version of the above. Instead went with incorporating the existing zoom functionality of IH4, which I know Diva you dislike... :)

I dislike it because it's a silly feature which really has little to do with IH4's PRIMARY purpose, and for that reason I have despised it's inclusion in IH.. That said, I know folks like it including some of my own clients.. **SHRUGS**

The above does not require any additional switch to turn on/off the zoom functionality as it is auto controlled when it comes to the builtin zoom functionality.

and this ASSUMES that one would want to turn on image hover on both small and medium images.. that may NOT be the desired behavior.. Hence why I suggested that there be a configuration option for turning on/off zoom on medium images..

[nipinuk]

Thank you so much mc12345678! There is definitely progress indeed! I've deleted all my images in the images/large directory - hurrah!

Here's temporary link to my test site to show it working: http://tinyurl.com/nolf24y

I have more than one image per product. I currently use the additional images hover to display the additional images in the main product image area. Ideally I would like to be able to click on the little additional product image, display it in main product image area and be able to zoom in on the product. Then I won't need to use zen colorbox and additional images hover plugins. If this is beyond the scope of this thread, do let me know!

Relevant plugins used: IH4, zen colorbox, product image zoom, css js loader, additional images hover

Template used: westminster_new by Anne from picaflor-azul

File ammended (thanks to mc12345678 ) - includes/templates/westminster_new/templates/tpl_modules_main_product_image.php. Contents of file as follows:

<?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)); 
/* Begin add 1 of 2 by mc12345678 to support product image zoom */
if ($products_image != '') {
 if (function_exists('handle_image')) {
  $newimg = handle_image($products_image_large, addslashes($products_name), LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT, '');
  list($src, $alt, $width, $height, $parameters) = $newimg;
  $products_image_large_test = zen_output_string($src);
  if (file_exists($products_image_large_test)) {
   $products_image_large = $products_image_large_test;
  }
 } 
}
/* End add 1 of 2 by mc12345678 to support product image zoom 14-10-31*/
 ?> 
<div id="productMainImage" class="centeredContent back">
<script language="javascript" type="text/javascript"><!--
document.write('<?php echo '<a href="javascript:popupWindow(\\\'' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '\\\')">' . zen_image(addslashes($products_image_medium), addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT,/* Begin add 2 of 2 by mc12345678 14-10-31*/ (file_exists($template->get_template_dir('loader_product_image_zoom.php',DIR_WS_TEMPLATE, 'auto_loaders','auto_loaders'). 'loader_product_image_zoom.php') ? 'data-zoom-image="' . $products_image_large . '"' : '') /* End add 2 of 2 by mc12345678 14-10-31*/) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></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>

[DivaVocals]

New version of IH4 coming out which FINALLY (Thanks/credit to balhir) gets rid of those ugly MD5 hash file names.. NO OTHER updates in this release.. but given that this has been asked for repeatedly over the years, I think this is a pretty BIG change.

See what the new image URL's will look like here: http://overthehillweb.com/shop/bmz_cache/z/zc4wp.png.image.550x432.png

The new file naming convention in this release breaks down like this:
Actual file name
Filetype
Dimension

This should encourage shop owners to create image file names which are MUCH more meaningful, and it means that shop owners will need to implement file naming structures which follow proper file naming standards. (i.e. no file names with spaces in them or file names with invalid characters)

Needs to be tested.. I have been using this for MONTHS with no issues.. However both I and my clients do not engage in poor file naming practices, and I've not tested this when the file names include spaces or invalid characters.

See: https://github.com/DivaVocals/zen_Image-Handler

[karinvd]

Yes!! I'm going to download the beta version :-D Thank you for putting so much effort in this community!

[Fungai]

I have repeatedly followed the instructions for an install of IH4 for the last 4 days. I'm totally missing something. I change the name to my admin name I FTP the files over that are not the same name and use WinMerge to merge the files that are. Every time I try to start up I get a white screen instead of an Admin Login. I've tried to be in Admin then do the FTP of files as well but when I click on something I get the white screen. I'm clueless at this point in time. What could I possibly be doing wrong?

Please help me. the only blog I found that's like my problem gave no real response as to what he did to fix it and instead said "I got it"