Customising Viewer

C

cd_design

New member
Hi all,

First off, thanks for this nifty piece of software, easy to use and looks fantastic.

I have 2 samples running on my website, one is a 3d viewer, then the other is set as a configuration viewer.
3d view is here - [link-removed] - 3d viewer button opens it in a lightbox
config viewer is here- [link-removed] - again, 3d base view opens it in a lightbox

The 1st link is running exactly how I want it.
The 2nd link, it shows each configuration in 360, then when you mouse up it changes to the next row.
I would like to know how to disable the Y axis on the mouse, and control it with 4 small icons on the left to show each configuration.

I know you show some demos showing the different colours of the shoes, but I dont like the way it reloads the view and the shoe goes back to the initial view albeit in the new colour.

Any help would be greatly appreciated! I am willing to upgrade to PRO if this feature is possible :)
 
WebSupport

WebSupport

Active member
Hi there and thanks for the details and links :) very clean design!

Couple of thoughts:

1. Reload API allows keeping the same frame on a re-loadeded view via an extra parameter (reloadImageIndex) in the API call:

Code: 
api.reload(configFileURL, rootPath, callback, reloadImageIndex)

2. Your idea using rows for this is great too :cool:

You can disable Y-axis mouse & touch drag by setting Y-sensitivity to 0 (see attached screenshot). Then you can use the viewer toolbar buttons that you can customize (please try Retina skin in SpotEditor for a reference as this is the only skin right now that has up & down buttons) to control rows.

Alternatively you can use the API to jump between rows via api.toolbar.moveRowUp() and api.toolbar.moveRowDown() - you can see it in action if you publish your 3D product view in SpotEditor via the JavaScript API template.

I hope this helps!
 

Attachments

  • 3-16-2016 6-52-34 PM.png
    3-16-2016 6-52-34 PM.png
    10.1 KB · Views: 3,048
C

cd_design

New member
Hi,

I have just got back round to looking at this, but I seem to be having some issues.

When i rotate the screen of ipad/smart phone or even resize desktop browser window, the viewer goes blank?

What would be causing this?
Thanks for any help..
 
WebSupport

WebSupport

Active member
Hi there! This is odd.. please send us a link to your sample to support at webrotate360 dot com or share here and we will review and comment.
 
C

cd_design

New member
Hi,

Totally forgot to add a link to the issue, opps!

If you look here, [link-removed] and scroll down to any of the product sizes, RS48, RS50x50 etc, you will see a 3d viewer button that loads the viewer in a fancybox.

The reason for the fancybox is to allow it to load on demand as there are several 3d views on this page, also allows the user to view it without leaving the current page.

Also, another small request, if you look at this page, [link-removed], you will see a row of buttons that I have added, clicking these will load a different configuration of the product. Works fine if the viewer is opened on a full page, but when its in the fancybox, it will not work as good, the bottom of the image not visible.
You can see it here on this test page, [link-removed] - please note, the actual buttons will not work on this test page as I havent configured the links, only initial view.

Hopefully you can provide a solution.
 
WebSupport

WebSupport

Active member
Hi, there's a bit of a problem in the iFrame html you have in fancybox for these 3d product views (btw, awesome 3d images!).

For some reason the iframe has two different viewer initializations that happen at the same time against the same html element. It looks like the script was copied from two different SpotEditor templates into the same html for the iFrame:

Code: 
view-source:[link-removed]

One attempt to load the viewer is using the jquery plugin at the top of the iFrame:

Code: 
jQuery(document).ready(function(){
	jQuery('#wr360PlayerId').rotator({
		licenseFileURL: 'license.lic',
		configFileURL: '360_assets/RS50x50/RS50x50.xml',
		graphicsPath: 'imagerotator/html/img/basic',
		googleEventTracking: false,
	});
});

And then there's another snippet that does the same using API:

Code: 
var rotator = WR360.ImageRotator.Create('wr360PlayerId');

rotator.licenseFileURL = 'license.lic';
rotator.settings.configFileURL = '360_assets/RS50x50/RS50x50.xml';
rotator.settings.graphicsPath = 'imagerotator/html/img/empty';
rotator.settings.googleEventTracking = false;
rotator.settings.responsiveBaseWidth = 0;
rotator.settings.responsiveMinHeight = 0;
rotator.runImageRotator();

Then when resize event is triggered when fancybox dimensions are changed, two viewers are trying to update the same html and there's a conflict.. If you remove one of the snippets I believe it should start working.
 
C

cd_design

New member
Thanks very much, that has sorted the problem, it resizes fine now.

The 2nd issue, regarding the buttons for the options, I have moved away from this idea, and went with a button on the page to load each relevant html...[link-removed], each option opens its own viewer now.

Thanks for the compliment on the 3d images, my focus at the moment is on offering the customer a more engaging webpage experience, rather than just looking at pictures or pdfs. The new homepage for the product website will also try to catch the users attention with a niffy video...sneak preview [link-removed]

Thanks again for an awesome 3d viewer!
 
C

cd_design

New member
Thanks for the offer of putting this on your examples page, I would need to get the go ahead from a few managers, so I'll ask the question and hopefully let you know soon.

Looking back at the option buttons, I have implemented this today, using your shoe colours example;

[link-removed], click the 3d viewer on the RS140 option (you may need to reload incognito mode if it doesnt load the option with buttons)

It works nicely, but i dont know how to implement this part,

1. Reload API allows keeping the same frame on a re-loadeded view via an extra parameter (reloadImageIndex) in the API call:

CODE: SELECT ALL
api.reload(configFileURL, rootPath, callback, reloadImageIndex)
Click to expand...

I have set all images to load in the same position as the icon, but it doesnt keep the same frame when reloading the option.

Any ideas?

Thanks again
 
C

cd_design

New member
Hi,

I have updated all the pages to use the latest javascript that is created when you preview/export from spoteditior.
 
C

cd_design

New member
Hi,

Here is a page with the reload call, [link-removed].

The part that is working, is the change of config xml, but it doesn't keep the same frame/position when switching between xml's, after you have rotated it away from the initial position.

Cheers
 
WebSupport

WebSupport

Active member
You would need to follow this example such that you can capture the api object in apiReadyCallback and then use it to call reload on click events from the product thumbnails, e.g:

Code: 
	jQuery('#view1').click(function(e) {
		e.preventDefault();
		if (apiObj) {
			apiObj.reload('360_assets/view1/view1.xml');
		}
	});

Then you can pass the missing parameters to the reload call above, e.g:

Code: 
apiObj.reload('360_assets/view1/view1.xml', null, null, apiObj.images.getCurrentImageIndex(), apiObj.images.getCurrentRowIndex());

I hope it works! Just let us know if not..
 
WebSupport

WebSupport

Active member
You can send us the standalone package for the entire reload example you shared before (i.e html plus the image folders, etc) and we can update it for you on our end. What do you think?
 
C

cd_design

New member
Hi, any updates?

I've just noticed your location. We have some of our products installed near you, outside Union Station, if your ever down that way!

union-01.PNG


Its not the sign itself, its the part that holds it in the ground...one of only a few installations in the USA.
 
You must log in or register to reply here.
Top