Multiple jqZoom images in a page.
Permalink Browser Info Environment
Hi,
Just like your demo, I am trying to place multiple images with Zoom capability.
http://www.10peaks.se/index.php/ski/...
Click on the bottom left thumbnails to navigate between the zoomed images.
Problem:
Lens on the first image works fine.
Lens on 2nd and 3rd image only moves horizontally but not vertically.
Just like your demo, I am trying to place multiple images with Zoom capability.
http://www.10peaks.se/index.php/ski/...
Click on the bottom left thumbnails to navigate between the zoomed images.
Problem:
Lens on the first image works fine.
Lens on 2nd and 3rd image only moves horizontally but not vertically.
Type: | Discussion |
---|---|
Status: | New |
I've looked at your page and only see one jqZoom image. I've only got my phone at the moment but will test your page tomorrow and get back to you.
The other images are in a slider.
Navigation at the bottom left of the page.
Click on Thumbnails - PairView - FrontView - PalmView
Navigation at the bottom left of the page.
Click on Thumbnails - PairView - FrontView - PalmView
Ok, I've been able to replicate what you've described. Very strange - the "palm view" works fine, but the 2 before it don't.
The typical troubleshooting steps in this type of situation is:
1) Try adding this block/s to a new page running the Plain Yogurt theme (to see if it's the theme clashing.
2) Try the original add-on (if you have made any customisations or a custom block template).
3) Try working with different images/files in case the image isn't large enough (but I don't think that's the case here, but still worth testing)
4) Ensure you're using the latest version of this add-on
Have you made any modifications to this add-on?
The typical troubleshooting steps in this type of situation is:
1) Try adding this block/s to a new page running the Plain Yogurt theme (to see if it's the theme clashing.
2) Try the original add-on (if you have made any customisations or a custom block template).
3) Try working with different images/files in case the image isn't large enough (but I don't think that's the case here, but still worth testing)
4) Ensure you're using the latest version of this add-on
Have you made any modifications to this add-on?
Hi,
With your permission, I would like to install the add on on a test site with the same content. (I use a staging area before I make changes to client site).
I am reluctant to make changes directly to my client's website to avoid any issues.
Do I have your permission to install the addon to my test site for testing purposes? (I am asking because I bought only one license).
With your permission, I would like to install the add on on a test site with the same content. (I use a staging area before I make changes to client site).
I am reluctant to make changes directly to my client's website to avoid any issues.
Do I have your permission to install the addon to my test site for testing purposes? (I am asking because I bought only one license).
Yes, that's fine please go ahead and let me know how that goes.
Hi,
I have created an exact replica of the main site at this location.
This page has the add on installed. jQZoom is applied onto 3 images navigable using the thumbnails at bottom-left (pairview, back view, palmview).
This navigation is based on anchor tags.
http://www.zambeel.ca/testc/10peaks/index.php/ski...
More findings...
When the page is launched, I can see 'loading' for all 3 images (zoom out the page to see that). However, only the first image shows correct zoom functionality. Refreshing the page when the other images are selected 'loads' the zoomed part of the image.
This could be a case of calling the javascript function to calculate lens/zoom positioning.
--------------------------------------------
I have changed only the following:
In the .js file on line 919 I inserted the following to force a fixed position on the page. This only applies when position 'right' is chosen in Other settings.
toppos = 213;
leftpos = 165;
--------------------------------------------
I would appreciate if you could suggest something to fix this or an alternative approach.
Regards,
Farhan
I have created an exact replica of the main site at this location.
This page has the add on installed. jQZoom is applied onto 3 images navigable using the thumbnails at bottom-left (pairview, back view, palmview).
This navigation is based on anchor tags.
http://www.zambeel.ca/testc/10peaks/index.php/ski...
More findings...
When the page is launched, I can see 'loading' for all 3 images (zoom out the page to see that). However, only the first image shows correct zoom functionality. Refreshing the page when the other images are selected 'loads' the zoomed part of the image.
This could be a case of calling the javascript function to calculate lens/zoom positioning.
--------------------------------------------
I have changed only the following:
In the .js file on line 919 I inserted the following to force a fixed position on the page. This only applies when position 'right' is chosen in Other settings.
toppos = 213;
leftpos = 165;
--------------------------------------------
I would appreciate if you could suggest something to fix this or an alternative approach.
Regards,
Farhan
Hi Farhan,
I see the way you have applied multiple images to the same area isn't using the built-in multi-image support for jqZoom. I've setup a demo page so you can take a look how it should be done:
http://demo.c5extras.com/index.php?cID=222...
The problem with doing it the way you have implemented it is the large image isn't loaded until afterwards so the calculations for how the zoom works (which occurs at load time), is thrown off. The built-in support uses the "rel" tag to store information about the large image so it's pre-loaded and will display the zoom box correctly.
I've just uploaded v1.2.2 for this add-on to the marketplace which fixes a few minor bugs and also has all the latest multi-image features (it was sitting on my computer for several months, so I'm not sure why it wasn't in the marketplace sooner).
Hope this helps.
I see the way you have applied multiple images to the same area isn't using the built-in multi-image support for jqZoom. I've setup a demo page so you can take a look how it should be done:
http://demo.c5extras.com/index.php?cID=222...
The problem with doing it the way you have implemented it is the large image isn't loaded until afterwards so the calculations for how the zoom works (which occurs at load time), is thrown off. The built-in support uses the "rel" tag to store information about the large image so it's pre-loaded and will display the zoom box correctly.
I've just uploaded v1.2.2 for this add-on to the marketplace which fixes a few minor bugs and also has all the latest multi-image features (it was sitting on my computer for several months, so I'm not sure why it wasn't in the marketplace sooner).
Hope this helps.
Hi,
I have installed the update and works wonderfully.
Just one caveat.
The Zoomed image popup even though its using absolute positioning and z-index of 5001. This shows in the same div as the thumbnail image.
I have tried changing z-index in CSS and HTML markup.
If this window can display on top of other divs. This would be perfect. Is there a way to change the z-index in a way to make it happen?
Thanks for all your support.
I have installed the update and works wonderfully.
Just one caveat.
The Zoomed image popup even though its using absolute positioning and z-index of 5001. This shows in the same div as the thumbnail image.
I have tried changing z-index in CSS and HTML markup.
If this window can display on top of other divs. This would be perfect. Is there a way to change the z-index in a way to make it happen?
Thanks for all your support.
No worries, here's a link just in case you need it:http://www.concrete5.org/profile/orders/...
Hi,
I have installed the update and works wonderfully.
Just one caveat.
The Zoomed image popup even though its using absolute positioning and z-index of 5001. This shows in the same div as the thumbnail image.
I have tried changing z-index in CSS and HTML markup.
If this window can display on top of other divs. This would be perfect. Is there a way to change the z-index in a way to make it happen?
Thanks for all your support.
I have installed the update and works wonderfully.
Just one caveat.
The Zoomed image popup even though its using absolute positioning and z-index of 5001. This shows in the same div as the thumbnail image.
I have tried changing z-index in CSS and HTML markup.
If this window can display on top of other divs. This would be perfect. Is there a way to change the z-index in a way to make it happen?
Thanks for all your support.
I see what you mean. This actually isn't a z-index issue, rather it's caused by the "overflow:hidden" applied to some of the elements. So just go through each of them and remove them and slowly add the required ones back in, and that will help the jqZoom to look nice.
Hi,
I applied "overflow:visible;" to the following divs. The image still flows within the parent div.
ZoomWindow
ZoomWrapper
ZoomWrapperImage
Just so close.
I applied "overflow:visible;" to the following divs. The image still flows within the parent div.
ZoomWindow
ZoomWrapper
ZoomWrapperImage
Just so close.
Sorry I wasn't clear, I'm referring to DIVs such as:
#gloveboximgcontentdata
#gloveboximgcontent
#prdgloveboxright
#prdglovebox
#prdcontentboxcontainer
#prdcontentbox (this one causes a formatting issue, so you may need to make some more tweaks to tidy this up)
#gloveboximgcontentdata
#gloveboximgcontent
#prdgloveboxright
#prdglovebox
#prdcontentboxcontainer
#prdcontentbox (this one causes a formatting issue, so you may need to make some more tweaks to tidy this up)
Hi,
(I am a bit of a novice, thanks for all your help)
I understand what you are referring to now.
I guess I need to change my approach towards thumbnail navigation of the images.
I changed the overflow properties of the parent divs and that allows the Zoom to be visible completely. This is a bit different than previous version, where the Zoom was shown above all other divs automatically.
I looked at your example and it looks like you are using javascript to change zoomable images from thumbnails.
I will convert my thumbnail navigation to something similar.
This requires structural changes to the page template.
Thank you for all your help. I appreciate your patience and guidance.
Regards,
Farhan
(I am a bit of a novice, thanks for all your help)
I understand what you are referring to now.
I guess I need to change my approach towards thumbnail navigation of the images.
I changed the overflow properties of the parent divs and that allows the Zoom to be visible completely. This is a bit different than previous version, where the Zoom was shown above all other divs automatically.
I looked at your example and it looks like you are using javascript to change zoomable images from thumbnails.
I will convert my thumbnail navigation to something similar.
This requires structural changes to the page template.
Thank you for all your help. I appreciate your patience and guidance.
Regards,
Farhan
It's a pleasure to help, best of luck!
Hi,
I have looked at all settings of your add on (applied custom templates ).
I can't seem to figure out how did you get the thumbnails at the bottom of your demo?
Regards,
Farhan
I have looked at all settings of your add on (applied custom templates ).
I can't seem to figure out how did you get the thumbnails at the bottom of your demo?
Regards,
Farhan
On the latest version of the add-on, it now accepts either an individual image or a fileset. See the screenshot at:http://c5extras.com/files/7413/2566/3102/screenshot1.png...
If you don't see this option, then just download the latest version from your C5 account and update it in your Dashboard.
If you don't see this option, then just download the latest version from your C5 account and update it in your Dashboard.