Reloading with javascript

gurnzbot · Feb 24, 2015

Hi!
I'd like to have the user click a button, place the rotator element in the DOM, using jQuery or something, and then load the Rotator.

I have an image gallery that will have rotators placed among images. The user will click a thumbnail and either an image or Rotator will load above it.

Assuming I have already initialized the rotator on an element when the page loads, gotten rid of it by loading another image, and then need to load the rotator again....

How should I go about doing this?

WebSupport · Feb 24, 2015

Hi there,

I would just try re-attaching it to a new DOM element with your other xml, i.e:

Code:

jQuery('#your-new-div-id').rotator({
	configFileURL: '360_assets/productX/productX.xml',
	graphicsPath: 'imagerotator/html/img/basic',
});

Or did you try this already?

gurnzbot · Feb 25, 2015

Thanks for the response

I've tried to do the following:

Code:

var newRotator = $('<div id="wr360PlayerId" class="wr360_player" style="background-color:#FFFFFF;"></div>');
$("#old-image-element").replaceWith(newRotator);
newRotator.rotator({
	configFileURL: _absolute_url+'images/360_assets/productX/productX.xml',
	graphicsPath: _absolute_url+'scripts/imagerotator/html/img/basic',
});

The $("#old-image-element") element get replaced but is never actually filled with the container & images as it should be when initialized. I have verified that the xml path is correct, and I don't get any other errors in the console.

Am I missing anything obvious?

WebSupport · Feb 25, 2015

I see. Please try changing wr360PlayerId to something else every time you attach a new rotator (i.e wr360PlayerId2, etc, as I think we create a unique DOM tree based on this ID / name and it's cached in some array and potentially conflicting if the same id is used twice.. if this doesn't help, please give us a day or so and we will post a working sample.

gurnzbot · Feb 25, 2015

Yes this does not work either. I tried to use new ids by incrementing a counter each time.
So when I tried to create a new div with an id of wr360PlayerId_2, then called runImageRotator() on it as well as using your previous example of prdImage.rotator().

Neither attempt worked.

Please let me know if I can be of further help here.

WebSupport · Feb 25, 2015

Thanks for the update. You will hear from us shortly.

WebSupport · Mar 1, 2015

Hi,

This piece of code seems to work fine "out of the box". Does this help?

Code:

<head>
<! --- includes and styles --->

<script language="javascript" type="text/javascript">

function waitDestroyAndAttachNew(){
	setTimeout(function(){
		// Wait two seconds just to show that the first instance was loaded fine,
		// and then remove it from DOM.
		jQuery('#wr360PlayerId').remove();
		
		// Wait some more just so that we see the empty content before loading the second instance.
		setTimeout(function(){
			// Append new empty viewer container.
			jQuery('#content').append('<div id="wr360PlayerId2" class="wr360_player"></div>');
			
			// Attach the second viewer instance to the new container.
			jQuery('#wr360PlayerId2').rotator({
				configFileURL: '360_assets/apitest/apitest.xml',
				graphicsPath: 'imagerotator/html/img/basic',
			});
		}, 2000);
	},2000);
}

jQuery(document).ready(function(){
	// Add the first empty viewer container.
	jQuery('#content').append('<div id="wr360PlayerId" class="wr360_player"></div>');
	
	// Attach the first viewer instance and wait for the API callback
	// that signals that the viewer was completely loaded.
	
	jQuery('#wr360PlayerId').rotator({
		configFileURL: '360_assets/apitest/apitest.xml',
		graphicsPath: 'imagerotator/html/img/basic',
		apiReadyCallback: function(api){waitDestroyAndAttachNew();}
	});
});

</script>
</head>

<body>
    <div class="responsive-wrapper-demo-do-not-copy" style="max-width:600px;padding:30px;">    
        <div id="content">
        </div>
    </div>    
</body>

gurnzbot · Mar 2, 2015

I'm not entirely sure the exact difference between what you guys have and what I had, but I was able to use your code as a basis and widdle it down to the bare necessities of what I needed.

Long story short... works! Thank you!

Florian · Dec 9, 2015

Hi!

Jumping on this topic. Is there a (undocumented) way to destroy the viewer object completely?

Removing it from the DOM still leave a lot of API object on the memory heap. I would like to dynamically create a instance and destroy it again if out of use. But this will leave lots of stuff on the heap.

The current solution is to hide the viewer in the DOM and reuse it with "reload".

But it would be way cleaner to initiate and destroy it as need.

Cheers,
Florian

WebSupport · Dec 10, 2015

Hi Florian,

Yes, we have been asked about this before and it makes perfect sense indeed..

We will play with one approach for a graceful API cleanup in the next few days and will send you an example via email asap as it's completely undocumented for the time being

If it works well, we will include a "cleanup" API call into the coming release.

Florian · Dec 11, 2015

Great! Can't wait to check it out

Florian · Dec 18, 2015

Any news on this?

cheers,
Florian

WebSupport · Dec 18, 2015

Yes, there were a few issues with the "undocumented" cleanup call I mentioned. We'll see if this is something we can resolve quickly.. so far it proved to be difficult as we have lot of backwards compatibility requirements in the code that is hard to let go in the current version. Will let you know if / when it's fixed asap.

BigBadBurrow · Feb 10, 2016

I have one 360 viewer on my page, but my users can click on thumbnails to load other 360 viewers. I'm having problems getting subsequent 360 viewers to render.

Unfortunately the snippet posted by WebSupport (on Mar 01, 2015) doesn't work for me. The first rotator displays successfully, it is then removed, but then when the second rotator is added all I get is a progress bar. Looking at my network traffic I see there is no request for the second config file. In console I have two lines of:

Code:

13:05:48.447 INFO Powered by WebRotate 360 © ~ v3.5 (build 3.5.0.151)
13:05:53.101 INFO Powered by WebRotate 360 © ~ v3.5 (build 3.5.0.151)

So it is initialising, but just not fetching/displaying the images.

I've spent four or five hours trying various things, including trying to create a variable:

Code:

var ir2 = new WR360.ImageRotator.Create("wr360PlayerId2");
ir1.settings.graphicsPath = "imagerotator/html/img/basic";
ir2.settings.configFileURL = "your-other-xml-path";
ir2.licenseFileURL = "include/license.lic";
ir2.runImageRotator();

But this also doesn't work - with this I don't even get a progress bar. I've also tried creating a global variable of WR360.ImageRotator, and tried

Code:

ir.reload("new-path");

But also to no avail.

I'm just really confused why the snippet provided by WebSupport works for other people but not in my case...

I'm using the latest JS of webrotate.

Any help would be gratefully received

WebSupport · Feb 10, 2016

Hi and thanks for the detailed notes.

The only way we could help quickly is by looking into a running test that doesn't work for you. Is this possible?

PS: just in case, posting here a link to a blog post with a similar example that might help:

http://www.webrotate360.com/Blog/post/F ... plate.aspx

BigBadBurrow · Feb 11, 2016

Excellent, thanks very much! Using the example on that page I managed to tweak mine to work the same way.

Reloading with javascript

gurnzbot

New member

WebSupport

Active member

gurnzbot

New member

WebSupport

Active member

gurnzbot

New member

WebSupport

Active member

WebSupport

Active member

gurnzbot

New member

Florian

New member

WebSupport

Active member

Florian

New member

Florian

New member

WebSupport

Active member

BigBadBurrow

New member

WebSupport

Active member

BigBadBurrow

New member