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.

Type: Discussion
Status: New
zambeel
View Replies: View Best Answer
jb1 replied on at Permalink Reply
jb1
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.
zambeel replied on at Permalink Reply
zambeel
The other images are in a slider.
Navigation at the bottom left of the page.
Click on Thumbnails - PairView - FrontView - PalmView
jb1 replied on at Permalink Reply
jb1
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?
zambeel replied on at Permalink Reply
zambeel
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).
jb1 replied on at Permalink Reply
jb1
Yes, that's fine please go ahead and let me know how that goes.
zambeel replied on at Permalink Reply
zambeel
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
jb1 replied on at Permalink Reply
jb1
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.
zambeel replied on at Permalink Reply
zambeel
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.
jb1 replied on at Permalink Reply
jb1
No worries, here's a link just in case you need it:http://www.concrete5.org/profile/orders/...
zambeel replied on at Permalink Reply
zambeel
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.
jb1 replied on at Permalink Reply
jb1
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.
zambeel replied on at Permalink Reply
zambeel
Hi,

I applied "overflow:visible;" to the following divs. The image still flows within the parent div.

ZoomWindow
ZoomWrapper
ZoomWrapperImage

Just so close.
jb1 replied on at Permalink Best Answer Reply
jb1
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)
zambeel replied on at Permalink Reply
zambeel
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
jb1 replied on at Permalink Reply
jb1
It's a pleasure to help, best of luck!
zambeel replied on at Permalink Reply
zambeel
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
jb1 replied on at Permalink Reply
jb1
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.

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.