Assuming that you don't have a large image on this one, this one appears to be working my end and its a single image one..
http://96. 30. 58.67/index.php?main_page=product_info&cPath=6_110&products_id=464
Printable View
Assuming that you don't have a large image on this one, this one appears to be working my end and its a single image one..
http://96. 30. 58.67/index.php?main_page=product_info&cPath=6_110&products_id=464
done as requested: 50!Quote:
Originally Posted by philip937
Hmm Grrr something defo not working. I'm seeing the main Image diffent sizes on each product and most are more 500-600 :-(Quote:
Originally Posted by chadderuski
Less on your working than were on mine :-(
just done some more tests my end.
I actually think a safer way of coding it would be to just have this:
function func (img) {
if(img.height >= img.width) {
img.style.height = "<?php echo $iheight ?>";
} else {
img.style.width = "<?php echo $iwidth ?>";
}
}
I am seeing similar results with the additional images vs only oine image however its like it resets it.. if i use the next product link on my site ones that work work, then i'll hit one that has one image and it doesnt then I go previous, then forward and the image is then re-sized..
its very strange...
can't suss your though.. I cant get any to display 50 x 50..
for example, this page, your html source code is showing:
http://96. 30. 58.67/index.php?main_page=product_info&cPath=6_148&products_id=1151&zenid=d0d30ebcd1e6 4c6234e12a368f3d9e36
<script language="javascript" type="text/javascript"><!--
function func (img) {
if(img.height >= img.width) {
img.style.height = "50px";
img.style.width = "auto";
} else {
img.style.width = "50px";
img.style.height = "auto";
}
}
document.write('<a href="images/barsupply/roy-112.jpg" class="bonzer_zoom" rel="product_info"><img src="images/barsupply/roy-112.jpg" onload="func(this);" /></a>');
//--></script>
and this is the image..
Attachment 11906
REALLY.. REALLY.. WEIRD!
Philip:
What is weird is when you click back and forth with PREV <> NEXT, the image scales to 50 x 50 and zoom works correctly, but if you REFRESH the page, the image is show FULL size!
It HAS to be because somewhere your variables are not being reset. So the LAST value (for one of the dimensions) is being retained... this is my thought on what's happening...
I'm stumped.. We need a java/jquery guru to help implant the size switch better.
or simply a break ...
Either way, you've made some really great progress!
EUREKA... I think!
use this in your
includes/templates/YOUR/TEMPLATE/templates/tpl_modules_main_product_image.php
works perfect on my site even and tested also with images of different sizes too.
enjoy..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">
<style>
.mainImage {
max-width: <?php echo MEDIUM_IMAGE_WIDTH ?>px;
max-height: <?php echo MEDIUM_IMAGE_HEIGHT ?>px;
height:auto;
width:auto;
}
</style>
<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, 'class="mainImage"') . '</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>
Philip!
That my friend is working PERFECTLY!! Pages are surviving manual refreshing, and Next/Prev are working fine also. Of note, is the GIANT image also behaves as it should. All the picture swapping is working, even with different sizes.
AWESOME!
PS: Have you tested with Image Handler 4 yet?
I don't use image handler, I'm afraid I would have to leave that to someone else to deal with.Quote:
Originally Posted by chadderuski
Pretty chuffed with this, now works for any standard zen cart set up with any type of image set up, can't ask for much more than that! ;-)
When I get time I'll tidy up all te code and zip it up into a
Image Swap with JQZoom Version 1.0 for ZC1.5.1
:clap::clap:
I just need to fix the disabled JavaScript bug and that's it - oh and some instructions..
Opps!
You reminded me of something: When java is turned off, the additional images show TWICE.
Sorry!
Yes that's the bug I need to fix. Should be easy to fixQuote:
Originally Posted by chadderuski
I did a test with IH4, and as expected it doesn't quite work out of the box. On my test site, the only one that work was the product that I have made _LRG and _MED images.
Now, a quick fix that doesn't seem to break IH4 is to just replace the additional_images.php and main_product_image.php files. It's a start... until we can find how to merge the two mods
Not used it so excuse my ignorance? What would the benefit of merging the mods? Doesn't image handler just do hover for large image? The only thing I thought it does in addition is the watermark stuff? Am I missing the point?
Is it because image handler does the hover thing on all product listing images too? If so what you just suggested is the fix. A merge would not be required.
This mod would deal with the product info page and those two files from image handler should just not be installed.
Image handler from what I saw used a completely different Inge selection logic and in my opinion like the standard zen cart image testing is slightly flawed.
This mod now deals fully with all image scenarios
Small
Small and medium
Small and large
Small medium and large
Sub ditectories
And all the above for both main image and additional image.
Zen cart out of the box doesn't
@Phil,
Great work. If you have an up to date version can you post it? Or is the one above the most up to date? I will try and have a look over the weekend.
What are the remaining issues?
I think if it does not play nice with Image handler then that is a major stumbling block. So will have a look at that.
The the javascript escaping?
And what else.
Nick, TBH I don't know exactly what image handler odes other than give a hover for larger image facility and a watermark facility?Quote:
Originally Posted by niccol
as per my last post, these files do not affect image handler, they simply replace the job of image handler on the product listing page. However in terms of the watermarking I don't know at what level that is done so maybe that feature would be removed if certain merging is not done.
That said, as I mentioned above the logic of testing for images existing on the server both on image handler and out of the box zencart was flawed as which I have fixed in the code in these zoom files.
regarding whats left to do. Don't worry about the script links, i'll look at sorting that, then as far as i'm concerned its good to go other than instructions for installation and configuration options.
The last zip I uploaded is the latest with the exception of the tpl_modules_main_product_image.php file amendment I have made a few posts back which now deals with keeping different size images aspect ratio.
If you give me a detailed run down on the purpose of image handler and why it's so important i'll have a think it there is any need to merge some files, other than that I think this is great standalone.
P.S - have a good read through the posts since you were last on, we have made some great improvements to ensure full compatibility with any type of zenner... :D
The core functionality of Imagehandler is that it creates scaled versions of the images. So, what you do is upload a large image ( in size not as a _LRG file) . What Zen would do then is server that image whenever requested. Which results in the big image being served even when a small image is needed. Which burns bandwidth.
So, what image handler does is create scaled versions of the images. So when the small version of image.jpg is required it creates it. Then it uses that small scaled image whenever required. So, it means that sites are much much faster and bandwidth is not burnt.
Most developers will put image handler on the site as the very first module they use. And most people should too, to be honest. There is a bit of a logic which says that this functionality should be rolled into the core of Zen ( like prestacart, magento, cs cart, open cart, wordpress ) but I am not going to get involved in that. So, alot of people would say that Zen is not complete without IH.
So, that is kind of why I think that you have to support it to make this a really good module as opposed to a functional one.
The thing about IH is that it creates the images when they are needed. Which can cause issues with javascript because the 'medium' version of a file may not actually exist until it is required. Javascript does not send a request the same way as html does so the image may not be created. Which means that the zoom just won't work.
The usual way to bypass that is to pre-load the images low down on the page. that way they are created before the zoom needs them. but as you know that in itself creates bandwidth issues.
IH has some other features - some of which are useful and some of which are not all that useful and the people managing it would probably ditch if they could.
- It creates lovely lovely hover effects. Most developers hate these but the public seem to like them
- It adds a better interface for uploading additional images
There are probably a few others that I am over-looking.
But the core functionality is scaling images to the right size before they are served.
I have gone on record as saying that I am not a huge fan of IH. ( Just because it is cumbersome for what it does ) I use my home grown alternative. But some kind of server side image management is pretty much a necessity for most users.
So somehow it actually creates an actual new image file?
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.
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)
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
Building two versions is a good way to go :-)
Nick
Qz won't use a link for a source that doesn't exist, that's what I'm saying ;-)
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.
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?
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!Quote:
Originally Posted by niccol
I will just have to take some time to study the workings of IH.
:-)
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.
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:PHP Code: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
/images/large/file_a.jpg
then the $products_image_large is used in the link:PHP Code:$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);
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?PHP Code:// 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>';
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?
Sorry, a bit snowed under at the moment.
Basically, the 'magic' happens in function zen_image . In there there is a function 'handle_image' which acts as a hook for all the IH stuff. Or any other image manipulation you might want to do. So, that is where IH hooks into the existing system.
But :
Don't understand what you are saying here. where is 'file_a.jpg' coming from?Quote:
below $products_image_large for the additional image in the loop is defined as
images/large/file_a.jpg
just using that as an example..
I looked at some more of the code and I think my assumption is correct. I think basically it works when the file is not found.
show the link still points to
images/large/thefile.jpg
when it doesnt exist it creates the cache version and uses that for it there after..
so the links dont actually need to change, its just the physical checking to see if the file exists needs to be removed.
When i get some time I will re-write for you to test.
Well, I am absolutely the wrong person to test that. As I said I don't use IH.
But I am not sure of the point you are making. IH works anywhere a call is made to handle_image. The heavy lifting is done in the ih_image class.
The handle image where some of the logic is found is in functions_bmz_ something-or-other
Don'y worry I know what I mean :oDQuote:
Originally Posted by niccol
Sorry actually I think its chad that uses it. chad will have to be the test driver once i've re-written.
the point i was making is I was tryin gto understand the trigger for creating and calling cache images. the answer is within the zen_image as you say, when you request an image that doesnt exist in the large directory. i.e images/large/image.jpg it triggetrs it from there and sets the size based on if you were looking in the medium folder of the large folder.
So where as the current code checks for a large file that exisits, and when it doesnt it checks for a medium, and when it does it uses the base image IH actuallt removes this logic so that regardless whether or not there is a large image in the directory images/large/ it will still use that in the zen_image function... then all the magic happens.
so I just need to remove the part that redfines the $product_image_large after image checks and use that for if IH is installed and NOt if IH isnt installed.
Hi guys, just a quick note to say i havent walked away frm this, just been extremely busy with a website upgrade and other work. Pretty sure I have a solid all around solution, so watch this space and as soon as I have time to put it down I will and upload the files
Hello Phil - Have you looked combining IH and JQzoom yet?
Hi Kevin, its all up in my head, as per my last post as soon as I get time I will update the code and post here for it to be tested.Quote:
Originally Posted by Kevin205
Great. Thank you.
Attachment 11987
Ok here it is, though I have coded it but NOT TESTED. Give it a go, let me know how it goes. pay attention to the two files you now need to set true or false depending on whether you are running Image Handler or not.
Please report back and let me know if you hit any errors.
Backup as always to be able to revert back. File attatched.
Shouldl IH mod be installed for this test?
well its needs testing with and with out it. the readme explains how to enable image handler if installed. I need to know if it works.Quote:
Originally Posted by Kevin205
i just did some testing. i dont think its working so wait out and i'll submit the next files after testing them myself save you wondering if its something your doing wrong. speak soon
ok guys I think I have some bad news. I am pretty sure the image swap part of this mod will never be able to be compatible with Image Handler. the reason is that my understanding is that the IH images are created and cached during the zen image function somewhere, and because the image swap is all handles with the jquery script, all it simply does is creates its own image tag etc. therefore for this reason I will have to make the latest version of the mod a standalone version. Im sorry I cant be of more help than this. Perhaps the guys that created/maintian IH might like to look at the Jquery code and see if they can get it to implement the IHandling bit?
I will post a cleaned up standalone version of this in a couple of weeks.
If you are using the default image to zoom to in IH then it really is not that difficult. (http://goo.gl/GHV7L) IH will create the medium image as the page loads. The default image ( the zoom-to-image) exists because it is the one that you uploaded. This requires the user to be disciplined on the proportions and size of the images that they upload. (Or to put in place a system that scales the image on upload which is a better solution because it stops huge images being stored on the server and never used)
If however, you allow Image handler to create a 'large image' and you want to use that as the zoom-to-image ( which kind of makes sense because it means that the zoom ratio is constant) then you have an issue because the image may, or may not, exist on page load. And the javascript cannot create it. So, as I think I may have mentioned before the solution here is to pre-load the image somewhere else on the page and hide it but use it's source in the zoom tag.
That was my only thought, having the product info page load both medium and large of all image and hide all apart from the medium main image. That would be a solution but its getting messy. What's everyone else think?
I am sure I am missing something here, but I really do not understand why IH is needed. Other than it's use for watermarking and etc.
When I am setting up products with max 4 images.
I am re-sampling and saving the high resolution images to 72dpi and at 1200px X 1200px, which to me is a nice size file for zoom purposes. Each files size is about 199kb saved as JPEG Medium Quality.
- On the product listing display page the images get scaled down to 290px X 290px as per my admin parameters.
- On the Product info page all 4 images get loaded very fast, all together about 800kb (images - Not cached in the browser, when viewed first time).
Just upload one size image. I do not know what kind of problem you might have, when placing 3,000 to 4,000 (12,000 to 16,000 images) products online. Not that this site will have that many products!
Am I missing something here?
You don't need image handler. We are just trying to develop this so that it is compatible with or without IH. The file set I posted prior to the last works perfectly without image handler. It also works if you have one image or the default image medium and large imagesQuote:
Originally Posted by Kevin205
Thanks for the confirmation.
Phil have you dealt with sites running a lot of products using zen?
Depends what your definition of lots of products is. My site runs approx 3000 products with about 8000 total variations and image wise about 7,500Quote:
Originally Posted by Kevin205
Here is an example of how IH works
Client with 2000 products.
They have 40 products per page on the product listing.
Without IH that means that they need to download 40 times 200kb ( roughly) So that is 8000kb of image.
It is a busy site so that page may get requested several times a minute. The bandwidth usage soon builds up. And the page is slow for every user. And google hates the page because large images are being downloaded and then scaled in the browser.
So what IH does is scale each image on the server. So, each image now becomes about 20kb . There are still 40 of them on the page. SO there is still 800kb of images to download for the page. 800kb is far too much but it is a lot better than 8mb. Each page loads faster for each user. You use less bandwidth. And google likes your pages more.
It is a bit of a no-brainer ....
having said that, of course if you upload small medium and large version of every image then IH is not required at all. But most large stores do not want to do that. The largest I work with is about 25,000 products so creating those scaled versions is just a pain in the ####. Particularly when I can get it to be done automatically on the server.
OR you can do what I do an have small images as the default image located in /images approx 15-20k each
Then medium images located in /images/medium approx 30k each then large images in the images/large approx 200k
Image size / quality is totally what you want it.
It takes about 30 mins for me to batch create 3 different sizes of 7,500 images and upload to the site.
Either way one or the other is the best option over using just 1 image and loading that size image for everything so either use the zen image folder sizes or IH.
Niccol, for you and other experts, this might be a no brainer! For some of us including myself, trying to put the impossible together, it then becomes a challenge. If something can't work, then you try to compromise.Quote:
Originally Posted by niccol
Quote:
Originally Posted by niccol
Furthermore how do you get IH and zoom to work together in on the above mentioned www? Are you using IH and zoom?
As I say, if you are happy to provide small, medium and large then the discussion is not important. So, everyone can make their own decisions. Really doesn't matter too much.
So now I am just chatting.
The thing is that the software that you use to batch process the images is probably based on GD or ImageMagick which are the modules that the server uses to scale the images. So really what we are saying is the same thing. Batch process the images using GD or ImageMagick. I choose to do that on the server, you choose to do it on your computer. That's the only difference.
The only thing I would say is that for most users it is easier to have the system on the server and not even have to think about it. And it does save you that half hour.
I am overtly not a supporter of IH itself. I have been quite vocal about what I regard as its short-comings. As I have said I use my own version of it that has the advantages that it is not limited to three sizes because many of my stores use more than that, it cleans up better after itself, it doesn't destroy the image name if you are doing SEO stuff with that name and it has a smaller footprint than IH. But IH is the industry standard image handling module for Zen. A LOT of people use it.
I think that's the route I should and will take. Thanks again.Quote:
Originally Posted by philip937
I agree with your logic. But unfortunately at the moment, IH and zoom together is a no go.Quote:
Originally Posted by niccol
@Kevin
Sorry, I didn't mean that the way it perhaps sounded. The 'no-brainer' is that you MUST send scaled images from the server. Otherwise it is a loose-loose situation.Quote:
Niccol, for you and other experts, this might be a no brainer!
The ways to do that are to
-- use IH or something similar
-- upload small. medium. large images
I didn't mean anything other than that.
All IH does is make that process a bit easier. But as Phil says there are other ways around it.
Yes, that site does use IH and it does have this zoom. It was the first one that I did like that and I think it is kind of where this whole thread started in one way, or for me anyway. I suspect that the code that I posted earlier in the thread is taken directly from that site.
Niccol, don't worry we are all trying to help, one way or another. I am always thankful of your help as well. :cheers: :smile:Quote:
Originally Posted by niccol
Is there a limit for the number of characters the image file path name could be?
Image is not showing up, as I look at the page source, the image name is getting truncated at the end.
Yes apparently it is 64 character long in the tables. That's why it was breaking.
I found it here
I revised my method of image management to small, medium & large. Everything is working great.
Is there any way to have the zoom deactivated, when there is no large image available? It doesn't look right if you are using the zoom without any zoom effect.
Yeah you could just change the logic in how it checks for the large image. So if the large doesn't exist you would simply set the late image to be the same as the main product image. Glad it's working well for you. I still plan to put some more work into this code if nothing else but to tidy up a bit but am so busy it's not funny at the moment.
Busy is great. Happy Sunday.
Hey Philip!
Can't wait to see what you finally come up with. Here is IH4 and (mostly) your jquery code working on a live site:
http://u-buyrite.com/index.php?main_...oducts_id=3983
Thumb nails are handled by IH, but the main image is not. That's your code and zencore code. The image swapping and zoom work really well!
-chadd
Hey Phillip,
I was wondering what I need to change to have the thumbs swap on Hover instead of onclick... I dug around, but am not finding it...
-chadd
hi guys, sorry its been a while, I am so busy rebuilding and revamping my site I havent had any spare time at all. I will defo be coming back here once its all done I promise.
@chad I dont know how that can be implemented sorry.
Hey Phil, I don’t know what I did wrong and I can’t figure out why!
I have 3 images, small (150px), Medium (400px) and large(800px). I have named them as follow:
For Small Images
/images/group_A/04353.jpg, /images/group_A/04353_01.jpg & /images/group_A/04353_02.jpg
For Medium Images
/images/medium/group_A/04353_MED.jpg, /images/medium/group_A/04353_01_MED.jpg & /images/ medium/group_A/04353_02_MED.jpg
For Large Images
/images/large/group_A/04353_LRG.jpg, /images/large/group_A/04353_01_LRG.jpg & /images/large/group_A/04353_02_LRG.jpg
All small images are visible in the product listing page.
When the product_info_page first loads, 04353.jpg shows as main image and the other two images show up as thumbnail (small images). And the zoom effect work on the main image, but when I click on the other images the main image changes to low resolution of the images I have clicked on. When I go on top of the main image to get the zoom effect, the image reduces down to the small size. Same thing happens when I click on all other small/thumbnail images. No more zoom effect. Until I refresh the page and then I get the main image only to show the zoom effect.
I would appreciate your feedback on this. What is wrong here.
Hi Kevin.
Which files are you using? There was a flaw with the last lot I uploaded so I probably wouldn't use them.
I assume you are not using image handler?
I have finished my update to my site at last so hopefully should have some time to spend on this and get a demo site up too.
Thanks for the reply Phil.
I will let you know which files I am using. I am NOT using IH.
Meanwhile, I forgot to mention, I am having this problem with products with multiple images only. On a single image product, zoom functions perfectly.
Following is the page source HTML with multiple products:
I have omitted HTML for images 2 and 3, to save space, but they look identical to small image 1.HTML Code:<!--bof Main Product Image -->
<div id="productMainImage" class="centeredContent back">
<script language="javascript" type="text/javascript"><!--
document.write('<a href="images/large/TestImages/IMG_0021_LRG.jpg" class="bonzer_zoom" rel="product_info">
<img src="images/medium/TestImages/IMG_0021_MED.jpg" alt="test" title=" test " width="400" height="300" /></a>');
//--></script>
<noscript>
<a href="http://MyDomain.com/Folder/store1/index.php?main_page=popup_image&pID=15" target="_blank">
<img src="images/medium/TestImages/IMG_0021_MED.jpg" alt="test" title=" test " width="400" height="300" />
<br /><span class="imgLink">larger image</span></a></noscript>
</div><!--eof Main Product Image-->
</div><!--EOF DIV Main Product Image-->
<div> </div>
<div><!--BOF DIV ADDITIONAL Product Image-->
<!--bof Additional Product Images -->
<div id="productAdditionalImages">
<div class="additionalImages centeredContent back" style="width:33%;">
<a class="bonzer" href="javascript:void(0);" rel="{gallery: 'product_info', smallimage: 'images/TestImages/IMG_0021_1.jpg',largeimage: 'images/TestImages/IMG_0021_1.jpg'}">
<img src="images/TestImages/IMG_0021_1.jpg" alt="test" title=" test " width="100" height="75" /></a>
<noscript><a href="http://MyDomain.com/Folder/store1/index.php?main_page=popup_image_additional&pID=15&pic=0&products_image_large_additional=images/TestImages/IMG_0021_1.jpg" target="_blank">
<img src="images/TestImages/IMG_0021_1.jpg" alt="test" title=" test " width="100" height="75" /><br /><span class="imgLinkAdditional">larger image</span></a></noscript>
</div>
I am using includes\modules\MyTemp\additional_images.php
Let me know if you need to see any other files.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
Phil - You might be busy, but i had to ask the questions.
If you have multiple images (2-3) on your products info page, do they show as intended with jqzoom?
1. main image zoom-able, from medium to large?
2. smaller images enlarged to medium inside of the main product image once click on, from small to medium. And zoom-able as you hover over them, from medium to large?
I am still trying to get this to work.
For a product with a single image, jqzoom functions perfectly. Having images in the following structure:
Small image: images/Image01.jpg
Medium image: images/medium/ Imager01_MED.jpg
Large image: images/large/ Imager01_LRG.jpg
-For any products with more than one image, when product page shows up, main image shows up as (medium size, good quality image) and when I hover over it, I get the zoom effect.
When I click on the second image, or any of the other thumbnails, the image shows up as low res (it seems that it is enlarging the small image to fit the main image box, when I try to hover over it, it the shows the small image actual size.
So I change the code in jqzoom in /includes/modules/MyTemplate/additional_images.php and removed the comments
From:
TO:Quote:
//removed below for image swap and jquery zoom logic used from above instead
// $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;
$flag_has_large = file_exists($products_image_large);
//removed below for image swap and jquery zoom logic used from above instead
// $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);
$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);
Now on a multi-image product, when thumbnails are clicked, it shows a blured version of the clicked image in the main product image, I think it is enlarging the small image again. And when I hover over it, it now shows the large image.Quote:
//removed below for image swap and jquery zoom logic used from above instead
$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;
$flag_has_large = file_exists($products_image_large);
//removed below for image swap and jquery zoom logic used from above instead
// $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);
$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);
Why am I getting the small image, enlarged when I click on any of the thumbnail?
Help:unsure:
What area of the code, php handles the part, when the thumbnail image is clicked; the thumbnail image is displayed in the main product image area?
When I click on the thumbnail I am getting the small image enlarged, instead of the medium image!
Struggling here and I have to solve this problem.
There is an issues with this mod, when sub-directories are created under image folders small(root of image Dir), medium and large.
With a fresh install of Zen 1.5.1 files, when the small, medium & large image are at the root and not in a sub-directory, everything works fine. But as soon as I want to organize the images and add a sub-directory (for different manufacturers), the links break.
Zoom Works Perfectly, small thumbnails, medium and large images, as well as image swapping and zoom effect. With the following directory structure:
Small images:
images/ImageA.jpg
images/ImageA_01.jpg
Medium images:
images/medium/ImageA_MED.jpg
images/medium/ImageA_01_MED.jpg
Large images:
images/large/ImageA_LRG.jpg
images/large/ImageA_01_LRG.jpg
html code view:
Issue 1Quote:
<div class="additionalImages centeredContent back" style="width:50%;">
<a class="bonzer" href="javascript:void(0);" rel="{gallery: 'product_info', smallimage: 'images/medium/04098_01_MED.jpg',largeimage: 'images/large/04098_01_LRG.jpg'}"><img src="images/04098_01.jpg" alt="" width="80" height="80" /></a>
<noscript><a href="http://localhost/ZenDemo/index.php?main_page=popup_image_additional&pID=2&pic=0&products_imag e_large_additional=images/large/04098_01_LRG.jpg" target="_blank"><img src="images/04098_01.jpg" alt="" width="80" height="80" /><br /><span class="imgLinkAdditional">larger image</span></a></noscript></div>
Zoom fails to function and it does not work, when directory structure is as follow:
Small images:
images/Manufacturer_Name/ImageA.jpg
images/ Manufacturer_Name /ImageA_01.jpg
Medium images:
images/medium/ Manufacturer_Name/ImageA_MED.jpg
images/medium/ Manufacturer_Name/ImageA_01_MED.jpg
Large images:
images/large/ Manufacturer_Name/ImageA_LRG.jpg
images/large/ Manufacturer_Name/ImageA_01_LRG.jpg
html code view:
With the above code:Quote:
<div class="additionalImages centeredContent back" style="width:50%;">
<a class="bonzer" href="javascript:void(0);" rel="{gallery: 'product_info', smallimage: 'images/zcy/04098_01.jpg',largeimage: 'images/zcy/04098_01.jpg'}"><img src="images/zcy/04098_01.jpg" alt="" width="80" height="80" /></a>
<noscript><a href="http://localhost/ZenDemo/index.php?main_page=popup_image_additional&pID=2&pic=0&products_imag e_large_additional=images/zcy/04098_01.jpg" target="_blank"><img src="images/zcy/04098_01.jpg" alt="" width="80" height="80" /><br /><span class="imgLinkAdditional">larger image</span></a></noscript></div>
- I get the thumbnails
- Image swap works
- Once the thumbnail is selected, small image shows up in main product image area and when hover over it, small image is displayed.
I am trying to figure out, what area of the code controls the output of the medium and large images above. And which part fails to add the proper directory path?
Issue 2
I have also found out, when I remove the comment from additional_images.php at around line 135
html code view:Quote:
//removed below for image swap and jquery zoom logic used from above instead
$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;
With the above code:Quote:
<a class="bonzer" href="javascript:void(0);" rel="{gallery: 'product_info', smallimage: 'images/zcy/04098_01.jpg',largeimage: 'images/large/zcy/04098_01_LRG.jpg'}"><img src="images/zcy/04098_01.jpg" alt="" width="80" height="80" /></a>
<noscript><a href="http://localhost/ZenDemo/index.php?main_page=popup_image_additional&pID=2&pic=0&products_imag e_large_additional=images/large/zcy/04098_01_LRG.jpg" target="_blank"><img src="images/zcy/04098_01.jpg" alt="" width="80" height="80" /><br /><span class="imgLinkAdditional">larger image</span></a></noscript></div>
- I get the thumbnails
- Image swap works
- Once the thumbnail is selected, small image shows up in main product image area and when hover over it, large image is displayed (zoom effect happens). Medium image DOES NOT show up.
I would dump all images in one folder, but it would be horrible spaghetti and things will get messy with a lot of images!
Thank you.
the $products_image_directory is defined further up in this file and actually this code has not been changed, so I can only assume that you are either organising your files in a way zen cart has never intended or there is a bug in the zencart core code?
this is how it is defined:
check you have this code above in your file. as you can see it gets the image directly from the image file location against your product.PHP Code:$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;
}
so assumably if on the database it is like this:
images/coats/12345.jpg
then the above code will strip this back to just
images/coats/
which defines the image directory. so there is no reason why this shouldnt be working.
I think I see your problem
should it not be:Quote:
images/Manufacturer_Name/ImageA.jpg
images/ Manufacturer_Name /ImageA_01.jpg
Medium images:
images/medium/ Manufacturer_Name/ImageA_MED.jpg
images/medium/ Manufacturer_Name/ImageA_01_MED.jpg
Large images:
images/large/ Manufacturer_Name/ImageA_LRG.jpg
images/large/ Manufacturer_Name/ImageA_01_LRG.jpg
images/Manufacturer_Name/ImageA.jpg
images/Manufacturer_Name/ImageA_01.jpg
Medium images:
images/Manufacturer_Name/medium/ImageA_MED.jpg
images/Manufacturer_Name/medium/ImageA_01_MED.jpg
Large images:
images/Manufacturer_Name/large/ImageA_LRG.jpg
images/Manufacturer_Name/large/ImageA_01_LRG.jpg
???
From what I have found out so far, the problem is where DIR_WS_IMAGES is replaced with $products_image_directory!
Quote:
Originally Posted by philip937
The highlighted in Red is where the problem is. It should show it as images/medium/coats/ (for medium) or images/large/coats/ (for large) and it doesn't. That's why you get all your small images images/coats/ (Thumbnails) and non of the other, medium or large.
Of-course this matters where you have your directories organized in a certain way, and not when placing all images under, images/, images/medium/ and images/large/.
It should be:Quote:
Originally Posted by philip937
images/Manufacturer_Name/ImageA.jpg
images/Manufacturer_Name/ImageA_01.jpg
Medium images:
images/medium/Manufacturer_Name/ImageA_MED.jpg
images/medium/Manufacturer_Name/ImageA_01_MED.jpg
Large images:
images/large/Manufacturer_Name/ImageA_LRG.jpg
images/large/Manufacturer_Name/ImageA_01_LRG.jpg
I am trying to get rid of all $products_image_directory and replace it back to DIR_WS_IMAGES as it was (I think originally intended). I will let you know what happens.
I think your missing the point. If you replace with DIR_WS_IMAGES this will set the directory as /images only and will not use your specified folders.
If you want different folders then you need to use the structure I stated above .
Small
images/your_sub
Medium
images/your_sub/medium
Large
images/your_sub/large
How do you make the main image to center horizontally in the product_info page?
I've looked at every css page that's out there!
I am having problem with the ZOOMed images loading instead of the main product image. The main (small) product image doesn't seem to be loading when this happens. You can see an example here:
http://dutchgiftoutlet.com/delft-cow...r-6-p-194.html
It doesn't always do it (load only the zoomed image) so if it doesn't for you, click around and look at other products. It seems to happen pretty consistently in all browsers I've tested except Firefox 3.6.8 on mac (a real old version).
Is this happening to anyone else and any ideas of where I should look for a fix?
I am using on ZEN cart version 1.3.9.
The "zoomed image" is the same size as the "main image" your issue I think is with how you have your configuration
To get the zoom affect you need to set your product image size in the settings to a smaller ratio than the actual image size. Then when hovering over the image it displays the "actual" image size this giving a zoom affect. They are the same image though. Hope that helps. Good luck :-)
I am using Image Handler 2 and have set the main product image smaller. It used to load the smaller version of image (med size in IH settings) for main product image before I installed the zoom.Quote:
Originally Posted by philip937
I thought this was where I was supposed to "set your product image size in the settings" but maybe I have to set somewhere else?
Or do I need to generate smaller and larger versions of images and put into separate folders?
Thanks for you help. :smile:
I'm not sure anyone managed to get this to work with IH, May be why you are struggling.Quote:
Originally Posted by boxcar
So what is the suggested solution? Uninstall IH 2 and generate smaller images manually?