Jquery Zoom [Support thread]

[philip937]

The jqzoom will work with whatever size files, it checks which file exists and uses the most appropriate so I guess the only think that would need I merge like you say it the bit that creates an image if it doesn't yet exist.

[philip937]

Let me perfect a standalone version then once sorted I will help you create the files that are also compatible with image handler.

I think it's important to have both as this mod is also great for non image handler users too, so I think we should create two different filesets. (Or alternate file for IH users)

[niccol]

Not somehow. It uses either imagemagick if it is available on the server, or GD, if it is not. Then it caches the scaled image for later use. That bit is not all that complex.

yeah, jqzoom works fine. the issue is that the src that appears in the link may not actually exist yet. If you always zoom to the originally uploaded image then that is not a problem. But IH has the abiltiy to scale the large images too. Why? Because it makes the large images that are used consistent. So, all the big images are, for instance 800 by 800 regardless of how big the uploaded image is. That makes the pop-up or the lightbox or whatever look more consistent.

(Again I approach this a bit differently. In my case I scale the images on upload. Which lets my clients upload whatever they want but the image that gets stored on the server is a maximum of 800 by 800 or whatever)

So, if the user is scaling the big images. Then when the <a> tag for jqzoom is created it might contain an image that does not actually exist as yet. At which point you get a 'zoom loading' which never goes away.

IH I believe has alterations to almost all the files that you are working on. So the quick fix is to preload the images so that you know that they have been created. But it is not perfect

[niccol]

Building two versions is a good way to go :-)

Nick

[philip937]

Qz won't use a link for a source that doesn't exist, that's what I'm saying ;-)

[chadderuski]

Philip,

I was just going to suggest this. In fact, perhaps you don't need to merge anything with IH. Maybe the IH dev's will incorporate your code!

One of the big things the IH4 does is to resize and cache your images so you don't have to create _LRG _MED etc images ... Big time saver.

[philip937]

Basically what I'm saying is, the way I coded this it shouldn't matter what file exists yet.. As long as there is a small medium or large.

So I'm saying the only think missing would be the creating correct sizes bit

Am I making sense?

[niccol]

Yeah, ok, well I think you need to look at IH.

the thing is that IH doesn't store the images in the _LRG folder ( for example) It caches them. So the logic isn't going to find them.

But I agree that working on a non IH version is just fine.

[philip937]

Yeah, ok, well I think you need to look at IH.

the thing is that IH doesn't store the images in the _LRG folder ( for example) It caches them. So the logic isn't going to find them.

But I agree that working on a non IH version is just fine.

Shouldn't be a problem mate. I've been thinking ill just copy the logic of IH and apply that IF IH is installed and so the default logic if not. Job done!

I will just have to take some time to study the workings of IH.

:-)

[philip937]

Nick,

ok so I have started to look at the IH logoic. happy with the main product image file, seems pretty straight forward. however, seriously struggling to understand the login in the additional images file - especially as the images are not stored in the /medium and /large folders!

so heres how I am reading it:

below $products_image_large for the additional image in the loop is defined as
images/large/file_a.jpg

then they remove the check to see if the large file exists, and then manually set the value to true
// $flag_has_large = file_exists($products_image_large);
$flag_has_large = true;

thus now regardless of the file actually exisitng or not, telling the scrip it does exist.

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
//  $flag_has_large = file_exists($products_image_large);
    $flag_has_large = true;
//  End Image Handler changes 1 of 2 

then, the $products_image_large is redefined by testing against the value $flag_has_large which above was set to true so therefore the large image is defined as:
/images/large/file_a.jpg

    $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(addslashes($base_image), addslashes($products_name), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT);
//  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, SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT);
    $large_link = zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_large); 

then the $products_image_large is used in the link:

    // Link Preparation:
    $script_link = '<script language="javascript" type="text/javascript"><!--' . "\n" . 'document.write(\'' . ($flag_display_large ? '<a href="javascript:popupWindow(\\\'' . str_replace($products_image_large, urlencode(addslashes($products_image_large)), $large_link) . '\\\')">' . $thumb_slashes . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>' : $thumb_slashes) . '\');' . "\n" . '//--></script>';

    $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>'; 

so this to me is magic if it works as if the large does't exist there must be a part of image handler somewhere that is the directory is called that instead of using the file it creates the cache file? is that how it works?

if so, then all I need to do is remove the image file checking. do you know exactly how IH works and if what I am assuming is correct?