[Resolved] Responsive problems in Magento

[keraweb]

Hi,

We have setup a testsite for a new shop in which we want to use the 360 tools.

I've installed the plugin etc and did a template merge for media.phtml to have both the hover-zoom and 360degree functions available.

Example page: http://fenfshops.keraweb.nl/draagtassen ... -2420.html

Now I have multiple problems:

1. Full-screen does not work, no clue why.

2. After returning from full-screen the 360 box keeps loading without results (Cannot read property 'length' of null)

3. When resizing the screen the same loading issue arises.

4. When I don't want the 360 image to be the default selected image the images loads in a container with a height of 100px (probably since the container is hidden). How can I fix this? (have have set the 'basewidth' property)

Any help would be greatly appreciated!

Thanks Jory

 

[WebSupport]

Hi Jory,

Thanks for the link. Very nice implementation!

To answer your questions:

The full-screen function is not available in the free version of the product at this time. More details can be found here.

The rest of the issues are related to your question 4. Right now you have the container with the 360 product view hidden upon page load and then I think you trigger a click on the first thumbnail (the one with the 360 view) to make it visible. The product viewer is not yet visible when we initialize it, i.e it happens before you trigger the click.

The issue with viewer dimensions when it's initialized before it becomes visible is summarized in this post.

One approach we recommend if you don't want to load the 360 product spin as the default image, and considering that you are familiar with the code, is to initialize the viewer once upon the first click on the 360 thumbnail and after its parent container becomes visible.

So essentially you would do something like this inside some jQuery's document ready callback:

isViewerLoaded = false;

jQuery(".show-webrotate").click(function() {
    if (isViewerLoaded)
        return;
      
    isViewerLoaded = true;
    
    ...
    _imageRotator.runImageRotator("wr360PlayerId");
});

If you prefer to keep the 360 spin as the default image, just don't hide it upfront in which case you wouldn't need to trigger the click either and place the viewer initialization snippet inside the jQuery ready callback.

I hope it helps!

 

[keraweb]

Hi! Thanks for your quick reply.

"The full-screen function is not available in the free version of the product at this time."
Didn't know that but won't be a problem. I believe my client already have ordered a licence today.
After getting the licence the plan is to have all webrotate files on a separate server (external URL).

Your assumptions about triggering the click are correct.
I've tried your suggestion and it looks like it works nicely!

What I've also done is make the container visible first and load the viewer after it's visible, this also makes the container height size nicely.

I'll to some more testing with scaling the window etc. tomorrow and will let you know.

Thanks again!

 

[keraweb]

Hi again,

Just wanted to let you know that it all works fine now. There we're some more conflicts with the CloudZoom functions that overlapped the class selectors.
After fixing these to unique selectors for both CloudZoom and Webrotate360 everything worked great.

We got the Pro version now and the client is very happy with it.

Thanks again for your help.